Skip to main content

Installation

  1. To start working with BOPP Checkout, you need to source the sdk by adding a script tag to the hosting page
<script type="text/javascript" src="https://bopp.io/scripts/sdk.js"></script>
  1. Then you need to add a DOM element container with id 'bopp' that will host the BOPP Checkout:
<div id='bopp'></div>
  1. The BOPP Checkout is initialized by calling the BoppButton function which takes two required parameters:
  • The Key is the API key which we will supply you, it permissions the button to issue payment request on you behalf
  • The container is the DOM element you created in the previous step:
const boppButton = BoppButton({
key: 'did:bopp:proxy:api:key:12345qwerty',
container: document.getElementById('bopp')
});

Note: If you don't pass at least one of the parameters, an error is generated.

  1. In order to get the errors mentioned below and also to find out the status of the BOPP Checkout processing once it is pressed you can attach a callback to the boppButton variable you have just declared.

.setCallback method will accept two parameters: first one is the functions which will be called when getting the payment status (onStatus) and the second one is the function which transmits errors to the merchant (onError). The callback attached using the .onStatus method will be called when BOPP Checkout is finished with processing. The result (success or failure) indicates the result of the payment.

function onStatus (status) {
if(status === 'success'){
//add success status
}
if(status === 'failed'){
//add failed status
}
}
function onError (error) {
console.log(error);
}
boppButton.setCallback(onStatus, onError);

When the error occurs, BOPP Checkout will call the previously passed ' onError' function in which it passes 2 parameters: code (which is the error code essentially) and message (short error description). For instance:

.onError({ code: '200', message: 'order number should be string type' })
  1. Before the BOPP Checkout is pressed by the user you will need to set the parameters for payment processing. This is also done by setting methods on the boppButton object.

Below is a list of the available methods:

MethodParametersDescription
setPaymentReferencereference (string)sets a value which will be used as a payment reference on the payment instructions set to the Payer application and then used in their banking interactions
setAmountamount (number), currency (String)Is the amount requested when the BOPP Checkout is clicked
boppButton.setPaymentReference("OrderNumber");
boppButton.setAmount(10.00, "GBP");

Once set-up, a user can click on the BOPP Checkout will cause a paylink to be generated. It will also cause an overlay dialogue to be shown to the user. This overlay will allow the user to scan a QR code to complete payment on a separate device, or continue payment on the existing device. This in turn will cause the users banking application to load from where they can complete their payment.

During this payment processing the BOPP Checkout opens a server connection to listen for status updates from the various components completing the payment processing. After the payment is complete, the BOPP Checkout sdk will call the status callback that was previously registered via the .setCallback method.

Styling#

BOPP Button is provided in 4 possible styles: DarkWide, DarkShort, LightWide, LightShort. If buttonStyle parameter is not passed, the default style will be 'DarkWide'.

DarkWide
DarkShort
LightWide
LightShort
Parameter for the init function of the button should be:
const boppButton = BoppButton({
key: 'cri:BDeMFufilAUaeAsc1aP1uMzFStttl5m2',
container: boppBtn,
buttonStyle: 'DarkShort'
});

Errors#

The errors are divided into following groups:

Missing Parameters#

Errors that occur if a required parameter is not passed.

ErrorDescription
101Amount and currency is required

Mismatched Types#

Errors that occur if the passed parameter does not match expected type.

ErrorDescription
201Order number should be string type
202Amount should be number type
203Currency should be string type

Paylink Processing Errors#

Errors related to the creation of a paylink.

ErrorDescription
301Paylink is empty
302'failed' when creating a paylink
303Error from the server when creating a paylink

Sign Up for Sandbox#

To sign up to the sandbox and get a developer API Key you will need to give us your Name and email address. You will receive an API for the Sandbox environment via email. This will allow you to test your BOPP Checkout implementation.

Start accepting live payments#

Once you are ready to accept payments on your site using BOPP Checkout, sign up for a BOPP Account. With this you will be able to access the BOPP Dashboard and generate a live API Key for your site and BOPP Checkout instance, you will also be able to revoke API Keys when no longer needed and review all transactions.