External checkout

Once a customer clicks on one of your payment methods, they will be redirected to the checkoutUrl provided in the previous step. If necessary, this is where customers enter their payment information to complete the ongoing order.

See the live demo here. "SleekyPay" is the custom payment method on our official demo.

See the GitHub repo here.

Hosting your external checkout

There are no specific requirements for hosting your external checkout page. At this point, requests to the API, such as retrieving the payment session, can be done either server-side or through a client-side app. As mentioned in a previous entry, examples shown in this documentation use a frontend-centric approach with serverless functions.

Since this page is hosted on your end, you're responsible for employing good security practices so customers can checkout through a secure environment. You can check out the OWASP cheatsheet for any security guidance.

Displaying customer and invoice information

To display any information about the order, you can retrieve the ongoing payment session by sending a GET request to our payment session endpoint. A full description of the return payload can be found in our technical reference.

// Get public token from query string
const publicToken = new URLSearchParams(window.location.search).get('publicToken')

// Fetch payment session from API
const response = await fetch(`https://payment.snipcart.com/api/public/custom-payment-gateway/payment-session?publicToken=${publicToken}`);

// Retrieve body as JSON if the request's status code is successful
if (response.ok) {
    const paymentSession = await response.json()
}

Send customers back to Snipcart

If you want to let customers return to Snipcart's shopping cart or cancel their payment, a PaymentAuthorizationRedirectUrl field is available through the payment session object.

paymentSession.PaymentAuthorizationRedirectUrl

Creating a simple HTML link to this URL should do the trick!

Next up

→ Server-side payment processing