Super for Shopify

A seamless integration with Shopify.

Shopify is a SaaS solution used by businesses around the world to build their e-commerce stores. Businesses can easily build and manage their online stores and customise them to their needs.

Our Super Payments widget enables Shopify businesses to accept payments in a secure and hassle-free manner, whilst providing your customers with cash rewards and instant refunds on their purchases.

1. Create Your Super Payments Business Account

Sign up for your Super Payments Business Account.

2. Add Your Shopify Integration

Once you are signed up, go to Settings -> Payment methods, and add your e-commerce store url to your business portal.

3. Generate Your Shopify Plugin API keys

Generate your API keys in your business portal. You'll need your Confirmation ID and API key when you add your Super Payments plugin in the Shopify admin interface. These keys keep your payments safe and secure.

🚧

Website URL

If you change your e-commerce store URL from a testing URL to a live URL, don't forget to update in the business portal or your live calls will fail.

4. Install the Super Payments Shopify Plugin

  • Select Add app
  • Select the store you want to add Super Payments to
  • Select Install App

5. Configure your Super Payments Plugin

  • Copy your Confirmation ID from your Super Payments Portal into the Confirmation ID field (PWH...)
  • Copy your API key from your Super Payments Portal into the API key field (PSK...)
  • Hit Save Settings

🚧

Sandbox account

Contact us at [email protected] if you need a sandbox account.

If you've been issued with sandbox credentials then enter the sandbox API key and Confirmation ID in the correct fields whilst configuring the Super Payments Plugin (see above image)

6. Activate the Super Payments Plugin

  • Select Active Super Payments

🚧

Sandbox account

If you've been issued with sandbox credentials and want to test the Super Payments Plugin against the sandbox account then ensure the "Enable test mode" checkbox is checked. Test mode can be enabled or disabled at any time. Please see the Shopify documentation on testing payments for more information:

https://help.shopify.com/en/manual/payments/shopify-payments/testing-shopify-payments

7. Install the Super Payments Marketing Assets

Using Super as a checkout method will ensure that shoppers will have a better shopping experience, increasing the likelihood that they’ll purchase from your store, increase their average order value and come back again.

Take a look at the Marketing Assets for some examples of what this should look like on your site.

Until shoppers reach your checkout, they’re not aware of the benefits that Super Payments can provide. Letting them know early on in their shopping journey that Super is available as a checkout option through checkout messaging will help their purchase decision, knowing that they’ll get a cash reward for your store when they pay with Super Payments.

  • Select Add app
  • Select the store you want to add Super Payments to
  • Select Install App

8. Configure your Super Payments Marketing Plugin

  • Copy your API key from your Super Payments Portal into the API key field (PSK...)
  • Hit Save Settings

9. Add Super Payments Marketing Assets to your Store

Super Payments marketing assets can be added using three different approaches:

  • Automated Insertions - Recommended
  • Manual insertions using App blocks (only available on themes built with Online Store 2.0)
  • Manual insertions into liquid file with raw HTML

9a. Automated Insertions

  • Select Online Store -> Themes -> Customise
  • Select Left Panel Navigation -> App embeds
  • Select Banner Display - Adds a Super Banner to your store front
  • Select Banner colour scheme - Aligns to your store front colours
  • Select Display on Product Listing Page - Adds a Super content block to you collections page
  • Select Display on Product Details Page - Adds a Super content block to you product page
  • Select Display Cart Callout on - Adds a Super content block to you cart page
  • Select Trigger Pre-Checkout on - Add a Super content block before navigating to checkout

9b. Manual insertions using Shopify App Blocks

  • Select Sections -> Default product
  • Select Add block and Select Super Payments CTA Box
  • Move the position of the Super Payments Block to below the Buy button
  • Select Sections -> Cart
  • Select Add block and Select Super Payments CTA Box
  • Move the position of the Super Payments Block to below the Checkout button
  • Select Theme settings -> Checkout
  • Select Logo -> Select image and upload a new image Super Payments will send you that will include your brand logo too

9c. Manual insertions adding Raw HTML to the Liquid file

Whilst the recommended approach is to use the Super Payments Marketing App, you can also add marketing assets directly to the Shopify Liquid Files. Follow these instructions to add the html snippets on your site.

  • Select Online Store -> Themes -> Customise
  • Select Homepage and add Super Payments to a site banner, Add section -> Customer liquid and copy the following html into the customer liquid field.
<div data-super-banner="data-super-banner" 
     style="width: 100% !important; 
            height: 3.3rem !important; 
            display: flex !important; 
            flex-wrap: wrap !important; 
            justify-content: center !important; 
            align-items: center !important; 
            color: #FFFFFF !important; 
            background-color: #D64000 !important; 
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
            Geneva, Verdana, sans-serif; 
            line-height: 1.2rem !important; 
            z-index: 1000 !important; "> 
  <span style="white-space: nowrap !important;">Pay with</span> 
  <img style="max-height: 2.2rem !important;
              min-height: 2.2rem !important; 
              min-width: 2rem !important; 
              flex-shrink: 0 !important; margin: 0 !important; 
              padding: 0 !important; 
              transform: translateY(0.15rem);" 
       src="https://cdn.superpayments.com/payments/super-wordmark-sm-white.svg" alt="Super Logo"> 
  <span style="white-space: nowrap !important;"> and earn a 5% Cash Reward </span> 
</div>
  • Select Default Products and add Super Payments below the add to bag button, Add block -> customer liquid and copy the following html into the customer liquid field.
<div style="display: inline-block; 
            min-width: 100%;" data-super-description="data-super-description"> 
  <div style="font-size: 1.2rem; 
              display: flex !important; 
              gap: 0.8rem; 
              background-color: #ffffff; 
              border-radius: 10px; 
              padding-right: 10px; 
              justify-content: flex-start; 
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
              Geneva, Verdana, sans-serif; 
              line-height: 1.2rem; 
              margin: 1.25rem 0rem; 
              color: #1E2B29; 
              max-width: fit-content; "> 
    <div> 
      <img style="max-height: 40px; 
                  min-height: 40px; 
                  min-width: 40px; 
                  margin: 0 !important; 
                  padding: 0 !important;" 
           src="https://cdn.superpayments.com/payments/logo-only-small.svg" alt="Super Logo">
    </div>
    <div style="display: flex !important; 
                align-items: center; 
                flex-wrap: wrap; 
                gap: 0.3rem; >
                Earn a <strong>5% Cash Reward</strong> with 
      <img style="min-height: 1.4rem; 
                  max-height: 1.4rem; 
                  width: auto; 
                  padding: 0.4rem 0 0 0 !important; 
                  margin: 0 !important" 
           src="https://cdn.superpayments.com/payments/logo-wordmark-orange.svg" alt="Super">
    </div>
  </div>
</div>
  • For Shopify PLUS checkouts only, Add block -> customer liquid and copy the following html into the customer liquid field.
<div class="payment_box payment_method_superpayments">
			<div class="wdm-super-payments-decs">
        <div data-super-description="data-super-description" 
style="font-size: 1rem; 
       display: flex; flex-direction: 
       column; gap: 1.2rem; 
       background-color: #ffffff; 
       color: #1E2B29; 
       border-radius: 10px; 
       padding: 20px 13px; 
       font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
       line-height: 1.2rem; 
       overflow: clip; "> <div style="display: flex; 
          gap: 0.8rem"> <div style="margin-top: 0.2rem; 
          height: 1rem; 
          min-width: 1rem"> 
          <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.3337 1L5.00033 8.33333L1.66699 5" stroke="#F54900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          </div> 
          <div 
               style="display: flex; 
                      flex-direction: column; gap: 0.8rem">   
            <p><strong>What’s a Cash Reward?</strong> 
              Using Super to pay saves SUPER PAYMENTS HOLDINGS LTD money, so you’ll earn a Cash Reward, which is automatically applied as money off the next time that you shop here.</p> 
          </div> 
          </div> 
  <div style="display: flex; gap: 0.8rem">
  <div style="margin-top: 0.2rem; height: 1rem; min-width: 1rem"> 
  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 
  <path d="M12.3337 1L5.00033 8.33333L1.66699 5" stroke="#F54900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
  </svg> </div> 
  <div> <strong>Fast:</strong> confirm via your bank app in just seconds - no card required. </div> </div> 
<div style="display: flex; gap: 0.8rem"> 
  <div style="margin-top: 0.2rem; height: 1rem; min-width: 1rem"> <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M12.3337 1L5.00033 8.33333L1.66699 5" stroke="#F54900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
</svg> </div> <div> 
  <strong>Safe:</strong> simply confirm this payment with Face ID or fingerprint verification. </div> </div> 
<div style="width: 100%; display: flex; gap: 0.8rem"> <div style="min-width: 1rem"></div> 
<img style="width: 87%; max-width: 27rem; height: auto; padding: 0 !important;" src="https://cdn.superpayments.com/payments/[email protected]" alt="Monzo, HSBC, Santander, Barclays, NatWest, Halifax, Lloyds"> </div> 
<div style="width: 100%; display: flex; gap: 0.8rem"> 
  <div style="min-width: 1rem"></div> <div>+ many more major banks</div> </div> </div>
    </div><input type="hidden" class="input-hidden" name="super_cashback_offer_id" id="super_cashback_offer_id" value="8208f661-d070-4e8c-991b-ef92d14773ed">		
</div>

📘

We're here to help

Any queries about the best way to add Super Payments to your store checkout?

Contact us at any time: [email protected].

Frequently Asked Question

Q - I found a bug, what do I do?
A - Please reach out to us via [email protected] , we’ll investigate immediately.

Q - Help! I’d like some support with getting Super Payments running on my website.
A - Chat to us via [email protected] or get in contact directly with your designated Payment Specialist.