Payments - Hosted Page

A streamlined guide to integrating our secure, hosted payment page solution.

The Hosted Page solution allows you to redirect your customers to a secure environment managed by Super to complete their transaction. We handle the sensitive payment data, ensuring a secure experience while minimizing your integration effort.

The Payment Journey

  1. Calculate Cash Rewards: Request a reward calculation to generate the required ID for the transaction.
  2. Request Hosted Page: Send a request to our API; Super will return a unique secure link.
  3. Redirect Customer: Direct your customer to the provided URL to complete their purchase.
  4. Secure Checkout: Your customer enters their payment details on our hosted page.
  5. Return to Site: Once the transaction is processed, we redirect the customer to your designated success or failure URL.

Integration Guide

Follow the steps below to execute an example request, handle the response, and manage the customer redirection.

Create a Payment Intent

Request Example

Send a request to our Create Payment Intent API.

curl --location 'https://api.superpayments.com/2025-11-01/payments' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: YOUR_SUPER_SECRET_KEY' \
--data '{
"amount": 5000,
"currency": "GBP",
"paymentInitiatorId": YOUR_PAYMENT_INITIATOR_ID,
"rewardCalculationId": YOUR_REWARD_CALCULATION_ID
"offSession": "false"
"externalReference": "Order-123", 
"successUrl":"https://www.example.com/success",
"failureUrl":"https://www.example.com/failure",
"cancelUrl":"https://www.example.com/cancel"
}'
curl --location 'https://api.test.superpayments.com/2025-11-01/payments' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: YOUR_SUPER_SECRET_KEY' \
--data '{
"amount": 5000,
"currency": "GBP",
"paymentInitiatorId": YOUR_PAYMENT_INITIATOR_ID,
"rewardCalculationId": YOUR_REWARD_CALCULATION_ID
"offSession": "false"
"externalReference": "Order-123", 
"successUrl":"https://www.example.com/success",
"failureUrl":"https://www.example.com/failure",
"cancelUrl":"https://www.example.com/cancel"
}'

Response Example

200 Payment Intent Created
{
  "brandId": "Brand_Id",
  "externalReference": "Order-123",
  "id": "a792e89d-658c-4acb-8410-6e08f82636cc",
  "offSession": false,
  "paymentInitiatorId": "Payment_Initiator_Id",
  "redirectUrl": "https://web-checkout.test.superpayments.com/checkout-host?pi-token=eyJhbGciOiJIUzI1....=a792e89d-658c-4acb-8410-6e08f82636cc&start=payment",
  "status": "PaymentPending"
}

Redirect the Customer

Use the redirectUrl provided in the API response to direct the customer to our secure hosted payment page.

Confirm the Payment Status

Once the transaction is complete, the customer is redirected to your designated success or failure URL. We will simultaneously trigger a Payment Status Webhook , providing the final outcome in the transactionStatus field.

Check Payment Status

While webhooks provide real-time updates, you can use our GET Transaction Status endpoint to manually verify the state of a payment at any time. This is useful for reconciling transactions or verifying status after a customer returns to your site.

Payment Status Definitions

The transactionStatus field will return one of the following values:

  • PaymentSuccess - The transaction was authorized and completed successfully.
  • PaymentPending - The transaction is currently being processed by the provider.
  • PaymentFailed - The transaction was declined or could not be processed.
  • PaymentCancelled - The customer manually cancelled the transaction before completion.
  • PaymentAbandoned - The customer closed the checkout session without taking action.
  • PaymentDelayed - The payment requires additional time for verification.

Request Example

curl --location 'https://api.superpayments.com/2025-11-01/payments/{{TRANSACTION_ID}}' \
--header 'Accept: application/json' \
--header 'Authorization: YOUR_SUPER_SECRET_KEY'
curl --location 'https://api.test.superpayments.com/2025-11-01/payments/{{TRANSACTION_ID}}' \
--header 'Accept: application/json' \
--header 'Authorization: YOUR_SUPER_SECRET_KEY'

Response Example

200 Payment Transaction Details
  {
  "brandId": "YOUR_BRAND_ID",
  "externalReference": "Order-123",
  "fees": null,
  "funding": [
      {
          "amount": {
              "amount": 2600,
              "amountMultiplier": 100,
              "currency": "GBP"
          },
          "dispute": null,
          "fundingDetails": {
              "address": {
                  "city": null,
                  "country": "GB",
                  "line1": null,
                  "line2": null,
                  "postalCode": "SW46BX",
                  "state": null
              },
              "authorisationCode": "657164",
              "cardClassification": "CONSUMER",
              "cardDescription": "Traditional",
              "country": "US",
              "cvcCheck": "pass",
              "failureCode": null,
              "fingerprint": "I2ho5rSUaGef1DLa",
              "funding": "credit",
              "issuer": "visa",
              "last4": "4242",
              "nameOnCard": null,
              "product": "A",
              "riskFactor": 12,
              "riskLevel": "normal",
              "threeDSAuthentication": null,
              "type": "CARD",
              "walletLast4": null,
              "walletType": null,
              "zipCheck": "pass"
          },
          "institutionId": null,
          "institutionName": null,
          "providerData": {
              "cardBrand": "visa",
              "cardBrandProduct": null,
              "cardBrandProductDescription": null,
              "cardDescription": "Visa Classic",
              "cardFingerprint": "I2ho5rSUaGef1DLa",
              "cardLastFourDigits": "4242",
              "stripeChargeId": null,
              "stripeIntentId": "pi_3SrJOgRZ3RRfjGVG1feUwDx5",
              "stripeIntentStatus": "succeeded",
              "stripeToken": "[redacted]",
              "type": "STRIPE"
          },
          "reference": "CAKEXX5CAUTMM9W9AK",
          "type": "CARD"
      }
  ],
  "metadata": null,
  "transactionAmount": 2600,
  "transactionId": "48513e60-0c3f-40b6-86c3-8a260f9f0f96",
  "transactionReference": "CAKEXX5CAUTMM9W9AK",
  "transactionStatus": "PaymentSuccess"
}

Handle Post-Payment Events

Automate your backend processes by listening for real-time transaction updates.

Automate Order Fulfillment

Set up a webhook to handle post-payment events sent by Super. These notifications ensure your system is updated with the final payment status even if the customer closes their browser or leaves the page before the frontend callback completes.

Why Use Webhooks?

Listening to these asynchronous events is essential for a robust integration. It ensures your system stays in sync for all payment methods—including those that require external authentication.

Tip: For more details on setting up webhooks, check out our Webhook Documentation.