JavaScript

The JavaScript SDK provides a secure, client‑side library for web‑based payment processing.

Prerequisites

To integrate the JavaScript SDK into your website, ensure you have following:

✅ An HTTPS-enabled web server.

✅ A modern browser that supports JavaScript.

✅ An active Xplor Pay account.

Contact to Xplor Pay to create an active account.

✅ A public API key.

Visit Let's Get Started - Xplor Pay to get API access key.

✅ A sandbox URL for testing the integration.

Contact Xplor Pay Getting Started to get Sandbox URL.

1

Add payment form

To add the payment form into your website:

1. Add a <div> tag to your code that hosts the payment form.

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

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

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

1. Call the init method with the base URL to host the payment form and add your public key.

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

The baseURL directs your customers to the hosted payment form where they can enter the payment information.

You can style the payment form, see Format payment page for more information.

2

Get JSON Web Token

To get a JSON Web Token when a customer submits payment information to process:

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

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

To receive success or error messages from the SDK without using promises, add callback handlers to your web page when the SDK securely calls the JWT service.

1. The ClearentTokenSuccess callback function securely receives the response from the JWT services, 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 Mobile Transactions endpoints.

3

Create card token

To create a card token when processing the card payments:

1. Add the create-token property to your JSON request body of the Mobile Transactions endpoint 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"
       }
}

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

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

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 future card transactions using the Transactions endpoints. You must include the Card Token in the card field of the JSON request body.