Quick Start

This page helps you to obtain a JSON Web Token and create a Card Token when processing payments using the Xplor Pay JavaScript SDK.

About Xplor Pay JavaScript SDK

The Xplor Pay JavaScript SDK offers a secure, client-side library for seamless web-based payments integration.

If you haven’t integrated the Xplor Pay JavaScript SDK, See JavaScript SDK for more information.

Prerequisites

To integrate the Xplor Pay JavaScript SDK into your website, ensure the following prerequisites are met:

✅ An HTTPS-enabled web server.

✅ A modern browser that supports JavaScript.

✅ An active Xplor Pay account.

✅ A public API key.

✅ A sandbox URL for testing the integration.

1

Add payment form

To add the payment form into your website:

1. Add a <div> tag to your code to contain the payment form hosted by Xplor Pay.

<div id="payment-form"></div>

1. Add a <script> tag to include the JavaScript SDK library hosted by Xplor Pay.

<script src="https://gateway-sb.clearent.net/js-sdk/js/clearent-host.js"></script>

1. Call the init method with the base URL for hosting the payment form and your public key.

<script type="text/javascript">
    ClearentSDK.init({
        "baseUrl": "https://gateway-int.clearent.net",
        "pk": "YOUR PUBLIC KEY GOES HERE"
    });
</script>

The payment form is displayed to the customer to enter the payment information.

For styling options, see Formatting the Payment Form.

2

Obtain JSON Web Token

To receive success or error messages from the Xplor Pay JavaScript SDK without using promises, add callback handlers to your web page.

To obtain a JSON Web Token when a customer submits payment information:

1. Add the ClearentSDK.getPaymentToken method using promises to access the Xplor Pay JWT service.

ClearentSDK.getPaymentToken().then(
    (result) => {
        console.log("ClearentTokenSuccess");
        console.log(result);
    },
    (error) => {
        console.log("ClearentTokenError");
        console.log(error);
    }
);

The Xplor Pay JavaScript SDK securely calls the Xplor Pay JWT service.

1. The ClearentTokenSuccess callback function securely receives the response, which includes an encrypted JSON Web Token in the jwt field.

{
   "code":"200",
   "status":"success",
   "exchange-id":"ID-clearent-mobile-jwt-1-c32bfe39-d454-4e34-8b4f-94d850643e48",
   "payload":{
      "mobile-jwt":{
         "jwt":"eyJhbGciOi23UzIh4iJ9.eyJsYXN0LWZvdXIiOiIxMrkP8iwidHlwZSI6Ik1BTlVBTCIsImV4cCI6MTU0NzY0NjU2MSwidG9rZW4iOiIxMTAwMDAwMDAwMDEzNTkyIn0.eT8c_5yUzxCxL2MEtmbG444eTFRW7OxzRF7x4uRIo-U",
         "last-four":"1111"
      },
      "payloadType":"mobile-jwt"
   }
}

A JSON Web Token (mobile-jwt) is required to process payments through the Xplor Pay Mobile Transactions API.

3

Process payment and create Card Token

To process card-not-present transactions, include the zip field in the request body.

To process the payment and create a Card Token:

1. Add the create-token property to your JSON request body and set its value to true.

{
    "type": "sale",
    "amount": "15.55",
    "service-fee": "0.46",
    "software-type": "Sally's Seashell Shore Software",
    "software-type-version": "1.0",
    "software-version": "1.0",
    "create-token": true,
    "billing": 
       {
        "zip": "85284"
       }
}

Set the Create-token property to false to process the payment without generating a Card Token.

1. The successful response includes a randomly generated Card Token in the id field.

{
    "rel": "token",
    "href": "/rest/v2/tokens/1100003582050381111",
    "id": "1100003582050381111"
}

A Card Token allows you to process card transactions using the Xplor Pay Transactions API. You must include the Card Token in the card field of the JSON request body