# JavaScript

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

### Prerequisites <a href="#prerequisites" id="prerequisites"></a>

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.

{% hint style="info" %}
Contact to [Xplor Pay](https://xplorpay.com/contact/) to create an active account.
{% endhint %}

✅ A public API key.

{% hint style="info" %}
Visit [Let's Get Started - Xplor Pay](https://xplorpay.com/getting-started/) to get API access key.
{% endhint %}

✅ A sandbox URL for testing the integration.

{% hint style="info" %}
Contact [Xplor Pay Getting Started](https://xplorpay.com/getting-started/) to get Sandbox URL.
{% endhint %}

{% stepper %}
{% step %}

### Add payment form

To add the payment form into your website:

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

{% code lineNumbers="true" %}

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

{% endcode %}

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

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% hint style="info" %}
You can style the payment form, see [Format payment page](https://app.gitbook.com/s/yN9CLsR8tlS8G8avRMB5/payment-processing-solutions/javascript/format-payment-page "mention") for more information.
{% endhint %}
{% endstep %}

{% step %}

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

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

{% hint style="warning" %}
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.
{% endhint %}

2. The `ClearentTokenSuccess` callback function securely receives the response from the JWT services, which includes an encrypted JSON Web Token in the `jwt` field.

{% code lineNumbers="true" %}

```javascript
{
   "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"
   }
}
```

{% endcode %}

A JSON Web Token (`mobile-jwt`) is *required to* process payments through the [Transactions](https://app.gitbook.com/s/j9heLdoDRsfnChUQohvj/api/payments/cards/transactions "mention") endpoints.
{% endstep %}

{% step %}

### 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 [Transactions](https://app.gitbook.com/s/j9heLdoDRsfnChUQohvj/api/payments/cards/transactions "mention") endpoint and set its value to `true`.

{% code overflow="wrap" lineNumbers="true" %}

```javascript
{
    "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"
       }
}
```

{% endcode %}

{% hint style="warning" %}
To process **card-not-present** transactions, you must include the `zip` field in the JSON request body.
{% endhint %}

{% hint style="success" %}
Set the `Create-token` property to `false` to process the card payment without generating a token.
{% endhint %}

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

{% code lineNumbers="true" %}

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

{% endcode %}

A Card Token allows you to process future card transactions using the [Transactions](https://app.gitbook.com/s/j9heLdoDRsfnChUQohvj/api/payments/cards/transactions "mention") endpoints. You *must* include the Card Token in the `card` field of the JSON request body.
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xplorpay.com/quick-starts/javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.