# Add payment form

To add the payment form into your website:

{% stepper %}
{% step %}
Add the `div` provided to you into your code to contain the payment form.

{% code lineNumbers="true" %}

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

{% endcode %}
{% endstep %}

{% step %}
Add the `script` tag into the JavaScript SDK library.

{% code lineNumbers="true" %}

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

{% endcode %}
{% endstep %}

{% step %}
Add the **Global** **Callback Handlers** into your code to receive the success or error messages from the JavaScript SDK. You can also add the Promises to receive the success or error messages alternate to avoid global callback handlers.

{% code lineNumbers="true" %}

```javascript
<script type="text/javascript">
    // When you get a successful token response and
    // use this to make a sale/auth on your backend
    function ClearentTokenSuccess(raw, json) {
        console.log("ClearentTokenSuccess");
        console.log(raw);
        console.log(json);
        // now you can send the token to your server
        // to complete the transaction via mobile-gateway
    }
    function ClearentTokenError(raw, json) {
        console.log("ClearentTokenError");
        console.log(raw);
        console.log(json);
    }
</script>java
```

{% endcode %}
{% endstep %}

{% step %}
Call the `init` method using the `baseUrl` and `pk` provided to you for your sandbox.

{% code lineNumbers="true" %}

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

{% endcode %}
{% endstep %}
{% endstepper %}

This form lets your customers submit their payment information.


---

# 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/guides/javascript/add-payment-form.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.