Payments API

A seamless integration to Super Instant Payments.

5 simple steps to add Super Payments to your e-commerce store.

πŸ“˜

Getting Started

Take a look at the Overview before you start. Here you'll get familiar with the API call sequence, authentication, and how you'll know a customer has made payment using Super Payments via a webhook you'll need to provide.

Any queries about the best way to implement Super to your store's checkout? Contact us at any time: [email protected].

1. Create your Super Payments business account

Sign up for your Super Payments Business Account.

2. Add your e-commerce storefront details

2.1 Develop your payments callback url

You will need to develop a webhook for Super Payments before you can complete your setup. This webhook is called by the Super Payments gateway to inform you of payment status, prior to our payments frontend redirecting the customer back to the given return url.

2.2 Set your store and payment callback urls

Once you are signed up and you've got your Super Payments payment callback url live, add your e-commerce store url, payment callback url to your business portal.

You'll set your refunds callback url later when you're integrating with the Refunds API.

697

Manual API Integration

2.3 Generate your API keys

You'll need to be authenticated for every request you make to the Super Payments API.

You'll find details for Super Payments authentication here.

🚧

Website URL

If you change your website URL from a testing URL to a live production URL, don't forget to regenerate your API Keys or your live calls will fail.

3. Add Super Payments to your e-commerce store

3.1 Calculate Offer

The first step is to call business cashback offer to calculate and display the offer to your customers based on their current basket value.

This generates a cashbackOfferId you'll need to initiate a payment, alongside the html assets you'll need to render Super on your storefront.

❗️

Code snippet

Please treat the following code snippets as illustrative examples rather than working code.

curl --request POST \
     --url https://api.superpayments.com/v2/offers \
     --header 'accept: application/json' \
     --header 'checkout-api-key: your key' \
     --header 'content-type: application/json' \
     --header 'referer: www.yourwebsite.com' \
     --data '
{
     "cart": {
          "items": [
               {
                    "name": "toothbrush",
                    "url": "www.toothbrush.com",
                    "quantity": 1,
                    "minorUnitAmount": 10000
               }
          ],
          "id": "34567"
     },
     "minorUnitAmount": 10000,
     "page": "Checkout",
     "output": "both",
     "test": true
}
'

3.2 Initiate a payment

Once you have received a cashbackOfferId from the business cashback offer, you should initiate a payment request.

This generates a transactionId and redirectUrl you'll use to take payment from your customer.

❗️

Code snippet

Please treat the following code snippets as illustrative examples rather than working code.

curl --request POST \
     --url https://api.superpayments.com/v2/payments \
     --header 'accept: application/json' \
     --header 'checkout-api-key: your key' \
     --header 'content-type: application/json' \
     --header 'referer: www.yourwebsite.com' \
     --data '
{
     "currency": "GBP",
     "cashbackOfferId": INSERT OFFER ID,
     "successUrl": "https://www.yourwebsite.com/success.html",
     "cancelUrl": "https://www.yourwebsite.com/cancel.html",
     "failureUrl": "https://www.yourwebsite.com/fail.html",
     "minorUnitAmount": 10000,
     "externalReference": "order101",
     "test": true
}
'

On a successfully created transaction you should redirect your Customer on the provided redirectUrl link by the response above.

3.3 Handle Payment Notifications

At this point the customer will be on our checkout page and will be asked to authorize the payment with their bank.

We will make a POST request to the payment callback url specified in your Payment Method Configuration whenever there is an update to the payment state (e.g. on PaymentSuccess or PaymentFailed).

You should update the state of your order based on this request

An example of the POST content is below:

{
    "eventType": "PaymentStatus",
    "transactionId": "b1445dfc-adc2-4292-bf14-3a5975cf1111",
    "transactionReference": "CKR6D907A240000000",
    "transactionStatus": "PaymentSuccess",
    "transactionAmount": 10000,
    "externalReference": "order101"
}

3.4 Expire Offer

Once your customer has made payment using Super or any payment method and the order created, you should expire your offer so that is can't be used again.

curl --request POST \
     --url https://api.superpayments.com/v2/offers/9eb0ee73-3922-4be3-bdbb-1404b38cca86/expire \
     --header 'accept: application/json' \
     --header 'checkout-api-key: your key'

3.5 Add Super to you storefront

There's lots more you should do to introduce more Super Payments content to your site.

Take a look at Super on your storefront for examples of what it could look like in different parts of your site.

Use the page: field in the request, and the response from business cashback offer, to give you the content you might use for marketing across your site.

4. Perform a test transaction

All you need to do now is to make sure everything is working as expected. We can provide a sandbox account for your business, just Contact us [email protected].

Simply add a product to your basket and checkout on both desktop and mobile and you'll experience the same seamless payments journey your customers will use to make payment on your e-commerce store.

5. View transaction in the business portal

You will be see any test transactions in your [business portal] (https://business.superpayments.com/dashboard/transactions).

You are live and ready to start accepting Free Payments Forever using Super Payments.

πŸ“˜

Help and Support

Contact us at any time: [email protected].