# 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 %}