Skip to main content

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:

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 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.

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