# JavaScript SDK

This page provides an overview of Xplor Pay’s JavaScript SDK solution and explains how it enables merchants and integrators to securely accept web-based payments integration.

## About JavaScript SDK

The Xplor Pay’s JavaScript SDK enables merchants to securely accept payments directly on their websites using a hosted payment form. It embeds a PCI-compliant payment iframe into the merchant’s checkout experience, allowing customers to enter payment details without exposing sensitive data to the merchant’s servers. The SDK supports card payments, digital wallets (Apple Pay and Google Pay), and compatible card readers, providing a flexible and secure way to accept payments across web-based channels. It generates secure payment tokens that merchants submit from their backend systems to complete transactions, helping reduce PCI scope while maintaining control over the flow.

## Business challenges addressed

Integrating the JavaScript SDK helps address common web payment challenges by:

* Embedding a secure, PCI-compliant payment form into a website
* Reducing PCI compliance complexity by securing payment data
* Eliminating the need to store or process sensitive cardholder information
* Improving checkout conversion with trusted and familiar payment methods
* Supporting secure payment acceptance across browsers and devices

## Key capabilities

JavaScript SDK provides the following core capabilities:

* Embed a secure, hosted payment form into a merchant website
* Tokenize payment details for safe backend transaction processing
* Support manual card entry, Apple Pay, and Google Pay on the web
* Enable browser-based payments using supported USB card readers
* Customize the payment form appearance to match website branding

## Use cases

JavaScript SDK covers some of the following scenarios:

* Accepting online card payments through a web-based checkout page
* Offering Apple Pay or Google Pay for faster customer checkout
* Integrating secure payment acceptance into custom web applications
* Supporting both card-not-present and card-present workflows on the web

## JavaScript SDK process flow

{% stepper %}
{% step %}
**Initiate the SDK.**

The merchant loads the JavaScript SDK and initializes it using the public key and environment configuration.
{% endstep %}

{% step %}
**Display the payment form.**

The SDK renders a secure, hosted payment form within the website.
{% endstep %}

{% step %}
**Collect payment details.**

Customers enter payment information or use a supported digital wallet, such as Apple Pay or Google Pay, once enabled.
{% endstep %}

{% step %}
**Generate secure payment token.**

The SDK generates a signed JSON Web Token (JWT) when the customer submits the form.
{% endstep %}

{% step %}
**Process the transaction.**

The merchant’s backend submits the JWT token to the payment gateway to complete the transaction and optionally create a reusable card token.
{% endstep %}

{% step %}
**Receive transaction result.**

The system returns the transaction response, including approval status and relevant transaction details.
{% endstep %}
{% endstepper %}

## Technical requirements

To use Recurring Payments, you need:

* Website hosted over HTTPS
* JavaScript-enabled, supported web browsers
* Public and API keys issued to you by Xplor Pay

## Related topics

* To get JWT and card token quickly, see [JavaScript SDK Quick Start Guide](https://docs.xplorpay.com/quick-starts/javascript).
* To learn how to implement the setup to process payment, see [JavaScript SDK](/guides/javascript.md).


---

# 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/getting-started/getting-started/our-products/payment-processing/javascript-sdk.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.