Getting Started

Simply follow these steps to help you get set up. Before you 'go live' please test the payment flow on your webpage using our sandbox test network and use our demo bank app.

1. Get a developer API key. Get a developer API key.

2. Follow the BOPP Checkout implementation documentation and examples and embed the button on your own webpage.
3. When you are ready to go live, sign up for a BOPP Checkout account and generate a live API key.
4. Update your webpage with the live API key.

That's it. You are now ready to accept payments from your customers and users via BOPP!

How It Works

The button needs a checkout amount in the BOPP payment request as a parameter. How you do this is up to you. It can be a static amount, hard coded on your page, or you may want to use a form to let the user enter the amount they wish to pay (e.g., if you were asking for a charity donation).

This amount, together with your API key is sent to the BOPP servers to generate the necessary paylink. This is returned, embedded in an HTML overlay which displays in a <div> over your webpage content. This overlay allows the end user to initiate the payment flow on a separate device (if required, e.g. desktop-to-mobile) or on the current device (e.g. desktop-to-desktop, mobile-to-mobile).

During the payment flow a connection, via websockets, is maintained between the overlay displayed over your webpage and the BOPP paylink servers. As the status of the 'payment request' updates, this connection allows the overlay to report to the user their place in the payment flow.

Once the payment flow has been completed, or the overlay is manually closed by the end user, the websocket connection is closed and the browser is once again showing your webpage.

User Flows

There are three primary flows:

As a customer I visit a merchant website on my Desktop, I complete my selections (e.g. checkout) and choose to pay with BOPP by clicking the BOPP Checkout. I scan a QR code on the desktop page from my phone and get the Payment Details Screen, I select my bank and initiate payment, then authorise the payment from within my native bank application on my phone. I then return to the Desktop to see that the payment has been confirmed by the merchant and my purchase is complete.

1

Add code to your webpage

2

Buyer clicks the BOPP Checkout to Pay

3

BOPP API called with Amount, Reference and API Key

4

BOPP Checkout Overlay returned to page

5

Buyer scans QR Code with phone and launches BOPP Payment Flow

6

Buyer interactions with BOPP Payment Flow via BOPP API

7

Buyer authorises payment in their Bank App

8

Payment complete message returned with control to your webpage