Payments - Hosted Page

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

The Payment Journey

1. Calculate Cash Rewards: Request a reward calculation to generate the required ID for the transaction.
2. Create a Payment Intent: 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 redirect.

Step 1: Calculate Cash Rewards

Before creating a payment intent, request a reward calculation to obtain your rewardCalculationId. This ID is required in the payment intent request body.

Step 2: Create a Payment Intent

Make a POST request to the /payments endpoint with the amount, reward calculation ID, and your redirect URLs.

Request Example

curl --location 'https://api.superpayments.com/2026-04-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/2026-04-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

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

Step 3: Redirect the Customer

Use the redirectUrl from the API response to direct your customer to the secure hosted payment page.

Step 4: Customer Completes Payment

The customer enters their payment details on the hosted page. Super securely processes the transaction.

Step 5: Customer is Redirected

Once the payment is processed, the customer is redirected to your successUrl or failureUrl depending on the outcome. Super will simultaneously trigger a Payment Status Webhook with the final result.

Confirm the Payment Status

Super sends a Payment Status Webhook when a transaction is complete, providing the final outcome in the transactionStatus field. You can also poll our GET Payment endpoint at any time to manually verify the state of a payment — useful for reconciling transactions or confirming status after a customer returns to your site.

Request Example

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

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

Response Example

{
  "brandId": "YOUR_BRAND_ID",
  "externalReference": "Order-123",
  "transactionId": "48513e60-0c3f-40b6-86c3-8a260f9f0f96",
  "transactionReference": "CAKEXX5CAUTMM9W9AK",
  "transactionAmount": 2600,
  "transactionStatus": "PaymentSuccess",
  "funding": [
    {
      "type": "CARD",
      "reference": "CAKEXX5CAUTMM9W9AK",
      "amount": {
        "amount": 2600,
        "currency": "GBP"
      },
      "fundingDetails": {
        "type": "CARD",
        "last4": "4242",
        "issuer": "visa",
        "funding": "credit",
        "cvcCheck": "pass"
      }
    }
  ]
}

Payment Status Definitions

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