Redirect

The Redirect integration is the fastest way to accept payments without building a custom checkout UI. Leatherback hosts the payment page, handles the security (PCI compliance), and manages the various payment methods for you.

Once the customer completes the transaction, they are automatically redirected back to your website with the transaction reference for reconciliation.

Implementation Journey

Integrating the Leatherback Redirect flow requires a three-step encoding process. Unlike standard APIs that use query strings, our system expects a Base64-encoded JSON object passed as a path parameter. This ensures payload integrity and prevents URL truncation across different browsers.

Step 1: Construct and Encode the Payload
First, aggregate your transaction details into a JSON object as defined in the Payload Schema. Once constructed, you must stringify the object and convert it to a Base64 string.

{
  "redirectUrl": "https://your-redirect-url.com",
  "key": "pk_test_*****",
  "showPersonalInformation": false,
  "customerEmail": "[email protected]",
  "customerName": "Vee Test",
  "reference": "MC000000000029",
  "shouldWindowClose": false,
  "amount": 100,
  "currencyCode": "NGN"
}

Step 2: Build the Redirect URL

Append the encodedPayload directly to the Leatherback Base URL as a path parameter not query parameter.

Base URL: https://pay.leatherback.co/redirect/

Step 3: Verification on Redirect

Once the customer completes the payment, Leatherback redirects them back to your specified redirectUrl. We append the reference of the transaction as a query parameter for your reconciliation.

Example Callback:
https://your-app.com/callback?reference=LB_REF_9901

Use the reference to call the Get Transaction Status API to confirm the payment was successful before fulfilling the order.

Implementation Recommendations

The UX behavior is dictated by the shouldWindowClose boolean. We strongly recommend setting this to false for the most seamless customer journey.

Recommended Config: shouldWindowClose = false

• Same Tab: The payment page refreshes and redirects the user to your redirectUrl in the current tab.
• New Tab: The payment tab closes automatically upon completion, and the user is redirected to your redirectUrl within that same tab.

Alternative Config: shouldWindowClose = true

• Same Tab: The transaction page remains open after completion; the user is not redirected to your site.
• New Tab: The tab closes automatically, but the redirect is suppressed.