Checkout payments overview

Roqqett checkout payments

Roqqett's checkout payment method enables you to accept payments faster, easier, and cheaper via its open banking payment technology; technology that is easy to implement along side existing payment methods offered at checkout, with support for all payment information service (PIS) enabled UK banks (list here).

Adding open banking payments to your webstore, gives your customers the choice to pay securely and conveniently via a frictionless journey with their banking app.

For more info about open banking and the PSD2-certified technology - see here.

Payment process

The process of initiating and completing a Roqqett checkout payment consists of these steps:

  1. The webstore payment page presents the Roqqett payment button.
  2. The end customer clicks the Roqqett button which initiates the checkout session.
    1. Once clicking the Roqqett button, a full screen overlay is shown that prevent the users from editing their basket.
  3. The webstore initialises a payment that the customer 'picks up' either in the Roqqett app or on a browser (mobile or desktop).
    1. If the payment initiates on a desktop, the user is offered several options - QR code scan, link via SMS, or push notification (app only) - to transfer the payment onto their mobile device for a faster journey that integrates seamlessly with their banking app(s).
  4. Once picked up, the customer authorises the payment in the banking app of their choice and is returned back to your site.
  5. The webstore is informed that the payment has been completed, the user is returned, and you can present confirmation.

The below diagrams detail the user journeys for device-initiated and desktop-initiated checkout payments.

Integration overview

The integration of Roqqett's checkout is quick and lightweight. The only prerequisite is that your business is registered with us and you have created the necessary API keys.

The diagram outlines the fundamentals of the payment process.

To integrate with Roqqett checkout, you will need to include some javascript served from Roqqett. The library is responsible for taking the user to the correct place on both desktop, mobile web and app. The outcome of the payment and checkout sessions will be communicated via webhooks which are configured in the merchant portal. The consumer is then returned to your designated return URL which also is defined in the merchant portal.

Flow

  • On page load, a Roqqett instance must be created which takes a callback as an argument. The callback will be given a transferId as an argument which must be given back to Roqqett through the api.
<script>
  let roqqett;
  window.onload = function () {
    roqqett = new Roqqett(callback);
  };

  async function callback(transferId) {
    ...
  }
</script>
  • The consumer is transferred to Roqqett Checkout by calling roqqett.checkout() function of the roqqett object.
  • This in turn calls a 'merchant defined callback' provided at roqqett object instantiation that triggers the merchants backend services to initiate the checkout session via /checkout/create
  • The outcome of checkout sessions are sent via webhooks
  • Consumers are returned back to the merchant domain using the return URL specified in the checkout configuration.
    • NB: a merchant, at any one time, can have multiple live checkouts, each with their own return URL. You can configure a checkout's return URL on the checkouts page in the Roqqett portal (info / link).

API

  • Initiate and cancel checkout sessions
  • Check the status of a checkout session
  • Read payment records

Did this page help you?