Sunbit Checkout SDK

## Request:curl 'https://api-sandbox.sunbit.com/epay/api/v1/epay?transactionId=completed-gthftredxserrr&purchaseId=39325178' \  -H 'sunbit-key: YOUR_KEY' \  -H 'sunbit-secret: YOUR_SECRET'

## Response:{  "purchaseId": "mockId",  "purchaseAmount": 100,  "status": "COMPLETED",  "purchaseDate": "2020-06-16T01:02:42"}

Copy

## Validation Call Example:## Request:curl 'https://api-sandbox.sunbit.com/epay/api/v1/epay?transactionId=BAD_CREDENTIALS_ve3bbr' \  -H 'sunbit-key: YOUR_KEY' \  -H 'sunbit-secret: YOUR_SECRET'

## Response:{    "message": "Bad credentials",    "code": "forbidden"}

Add and initialize the Sunbit SDK

The Sunbit SDK for JavaScript doesn’t require any standalone files to be downloaded or installed. Instead, you simply need to include a short piece of JavaScript into your HTML that will asynchronously load the SDK into your pages. The async load means that it does not block loading other elements in your page. The following snippet of code (Snippet #1) will give the basic version of the SDK where the options are set to their most common defaults. You should insert it on each page you want to load it, directly after the opening tag.

Init Sunbit’s SDK

<script>  // Init Sunbit SDK   window.sunbitAsyncInit = function() {     SUNBIT.init({       mode: 'SANDBOX',       sunbitKey: <Your Sunbit key> //Supplied by Sunbit - NOTICE: Do not insert your secret here     });   }; </script><script async defer src="https://static.sunbit.com/sdk/sunbit-sdk.js"></script>

Add Sunbit Checkout to your page

After adding the Sunbit SDK to your site and initializing it, you can add the Sunbit Checkout element to your checkout page using the method detailed below as snippet #2.

<script>  // Add a checkout element  SUNBIT.UI.checkoutElement('[data-sunbit-checkout]', {    theme: 'transparent',    size: 'large',  });</script>

The method accepts the following:

CheckoutElementOptions:

Set up the payment method on your site

1. Add a function call to your checkout button, which is called when a customer selects the “Checkout with Sunbit” option.
2. The method should call your server’s initiate transaction API (as stated above) with the transaction details. Your server should return the token returned by Sunbit’s initialization API.
3. Call the checkout method of the SDK to start the checkout process using the token and callback methods.

The checkout method accepts the following

CheckoutOptions:

Place in flow callback

This callback returns information on each step the customer has reached within the Sunbit flow. Register to onPlaceInflow to receive an eNum representing the last screen the customer has entered. Note that for different reasons, the eNum can repeat itself within a single flow and that the last callback is always the accurate position.

Current pages enum:

• PHONE_NUMBER
• PHONE_VERIFICATION
• CUSTOMER_DETAILS
• EMAIL_VERIFICATION
• APPROVAL
• PAYMENT_PLAN
• PAYMENT_METHOD
• AGREEMENT
• AUTHORIZATION
• THANK_YOU

SUNBIT.epay.checkout({  token: data.sunbitToken, // should be generated by server to server  onCompleted: (data) => {    handleCompleted(data.statusType, data.purchaseId); // handleCompleted - your function  },  onCanceled: (data) => {    handleCancellation(data.statusType); // handleCancellation - your function  },  onUserCancelled: (data) => {    handleUserCancellation(data.statusType); // handleUserCancellation - your function  },  onPlaceInFlow: (data) => {    handlePage(data.page); // handlePage - your function, page- enum as stated above  },  onPurchaseVerified: (data) => {    handlePurchaseVerified(data.purchaseId); // handlePurchaseVerify - your function  },});

Usage Example

  <script>        window.sunbitAsyncInit = function() {          SUNBIT.init({            sunbitKey      : '', //SUNBIT KEY            mode: '', // sandbox/prod - please review notes below.          });
          SUNBIT.UI.checkoutElement('[data-sunbit-checkout]', {            theme: 'transparent',            size: 'large',          });
          const button = document.querySelector('div[data-sunbit-checkout]'); // checkoutElement btn.          SUNBIT.epay.init({            onInitFinish: () => {              button.addEventListener('click',()=> {                SUNBIT.epay.checkout({                  token: '', // For the Initialization call                  onCompleted: (data) => {                    console.log(`status: ${data.statusType}, purchaseId: ${data.purchaseId}`); // handleCompleted - your function                  },                  onCanceled: (data) => {                    console.log(`status: ${data.statusType}`);                  },                  onUserCancelled: (data) => {                    console.log(`status: ${data.statusType}`);                  },                  onPlaceInFlow: (data) => {                    console.log(`page: ${data.page}`);                  },                  onPurchaseVerified: (data) => {                    console.log(`purchaseId: ${data.purchaseId}`);                  },                });              });            }          })        };  </script>  <script async defer src="https://static.sunbit.com/sdk/sunbit-sdk.js"></script>

Notes:

1. SDK INIT configuration mode: You can choose between sandbox/prod values – please view: Using the sandbox and Switch to Production Mode
2. The token for SUNBIT.epay.checkout is provided in the Initialization call
3. Keep in mind that the event listener for this button should be after onInitFinish.
4. When importing the sunbit-sdk, make sure that you are using async defer.

Using the Sandbox

The default mode of the SDK is “sandbox”, which is meant to be used for server integration testing.

Important: In order to receive a real and working purchase ID you will need to switch to “demo” mode. You will need a purchase ID to test the end-to-end integration with the server before moving to production. See “Full flow simulation” below.

Minimal flow simulation

In this mode we simulate the iframe and completion of Sunbit’s flow only, there are no calls being made to Sunbit’s servers and it is meant only to provide a simulation for developers to check the javascript integration and callbacks without the need of completing a full flow.

Once initiated you should see a screen similar to this

This mode is intended to help with server integration and making sure the initialization and the completion of the transaction are working properly.

You can control the completion status of the transaction by prefixing your transaction ID as follows:

In sandbox mode, add one of the prefixes below to the transactionId to simulate a response with a specific status from Sunbit’s server:

Full flow simulation

Once done with the integration, you can see the full Sunbit flow by changing the mode to “demo”.

During the flow you will be prompted to enter customer details. See below for guidance:

Notice

1. Customer details, e.g. name, email, phone number, are saved in the demo environment, so once you entered details for a certain phone number, the next time you use it, the same details will load again.
2. The default pin code for SMS verification is 1234.
3. An email verification will be sent to the email provided and will need to be verified in order to continue the flow.

<script>        window.sunbitAsyncInit = function() {          SUNBIT.init({            sunbitKey      : '<YOUR SUNBIT_KEY>', //mandatory, provided by Sunbit            mode           : 'demo',            location       : '<YOUR LOCATION NAME>', //optional                      });        };      </script>

Switch to Production Mode

Server-side changes

1. Replace the demo api URL calls with the production URL: https://api.sunbit.com/epay/api/v1/epay
2. Change to production values: sunbit-secret, sunbit-key, Location
3. Cleanup any prefixes you might have added to your transactionIds during development.

Client-side changes

1. Change mode in SUNBIT.init function to “prod”

<script>        window.sunbitAsyncInit = function() {          SUNBIT.init({            sunbitKey      : '<YOUR SUNBIT_KEY>', //mandatory, provided by Sunbit            mode           : 'prod',            location       : '<YOUR LOCATION NAME>', //optional                      });        };</script>