- To start working with BOPP Checkout, you need to source the sdk by adding a script tag to the hosting page
- Then you need to add a DOM element container with id 'bopp' that will host the BOPP Checkout:
- 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:
Note: If you don't pass at least one of the parameters, an error is generated.
- 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.
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:
- 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:
|setPaymentReference||reference (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|
|setAmount||amount (number), currency (String)||Is the amount requested when the BOPP Checkout is clicked|
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.
BOPP Button is provided in 4 possible styles: DarkWide, DarkShort, LightWide, LightShort. If buttonStyle parameter is not passed, the default style will be 'DarkWide'.
The errors are divided into following groups:
Errors that occur if a required parameter is not passed.
|101||Amount and currency is required|
Errors that occur if the passed parameter does not match expected type.
|201||Order number should be string type|
|202||Amount should be number type|
|203||Currency should be string type|
Errors related to the creation of a paylink.
|301||Paylink is empty|
|302||'failed' when creating a paylink|
|303||Error from the server when creating a paylink|
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.
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.