Single Payments

The BOPP Checkout is initialised by calling the BoppButton function which takes two required parameters:

The Key is the API key which is created in the BOPP Dashboard, it permissions the button to issue the payment request.
The container is the DOM element you created in the previous step:

const boppButton = BoppButton({
  key: 'Copied Key',
  container: document.getElementById('bopp')
});

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

Before the BOPP Checkout is clicked by the user you will need to set the parameters for the payment processing. This is also done by setting methods on the boppButton object.

Below is a list of the available methods:

Method	Parameters	Description
setPaymentReference	reference (constrained 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. This referenced is passed through the open banking API's and is publically visible on the payer and payees bank records. In addition to being visible to all, parties it is limited in size and can only handle a limited character set
setInternalReference	reference (string)	sets a value which is maintaned internally by the bopp system and will be returned on the status responses and availible via the callback api. This string has no length limits and contain any legal javascript string character
setAmount	amount (number), currency (String)	Is the amount requested when the BOPP Checkout is clicked

constrained string Is a string value with a max character length of 18, and which can only contain alpha numeric characters and spaces. This is required for some fields to pass though the open banking api and banks internal systems. Some banks are very restricted, so to avoid unexpected fails we have implemented validation on this field so that it will be accepted by all receiving systems.

boppButton.setPaymentReference("OrderNumber");
boppButton.setInternalReference("some#string-in-any-format");
boppButton.setAmount(10.00, "GBP");

Once set-up, a user can click on the BOPP Checkout that 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 the payment on a separate device, or continue on the existing device. This in turn will cause the user's banking application to load from where they can complete the payment.

In the above example the setPaymentReference value will be passed to the bank and visible to payer and payee. If you have non-public, or more complex referencing requirements you can use the setInternalReference method. You can use this string to manage your application logic, this param isn't visible to user, but will return in onPaymentSuccess and onPaymentFailed callbacks.

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.

The button can be enabled / disabled using the setEnabled parameter with a boolean value.

boppButton.setEnabled(true);

The button is enabled by default.

Next Steps​

Next Steps