> For the complete documentation index, see [llms.txt](https://docs.2checkout.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.2checkout.com/2checkout-apis/2checkout-apis/2pay.js-payments-solution-integration-guide.md).

# 2Pay.js-Payments-Solution-Integration-Guide

The 2Pay.js Javascript library is a quick and secure way to collect sensitive credit card payments, using customizable UI components that give merchants full control over the checkout experience. It allows merchants to create seamless payment flows while keeping the need for PCI compliance to a minimum SAQ A level. This means that shoppers pass sensitive payment information directly to the 2Checkout platform without sharing their credit card details with the merchant.

## Availability <a href="#availability" id="availability"></a>

The 2Pay.js payments solution is available for all 2Checkout merchants who already use or want to use the 2Checkout API integration, no matter what business model they have.&#x20;

## Requirements <a href="#requirements" id="requirements"></a>

To benefit from the 2Pay.js solution, merchants need to be integrated with the 2Checkout API and use the latest version - [API 6.0](https://verifone.cloud/docs/2checkout/API-Integration/JSON-RPC_API_6.0).&#x20;

Merchants with <20,000 transactions/year are recommended to have an SAQ-A filled in, but merchants >20,000 transactions are required to do so.

> **Discover our newest API 6.0, designed to bring more capabilities that prepare you to scale your online business.**
>
> <a href="https://www.2checkout.com/lp/2Checkout-API-Datasheet.html" class="button primary" data-icon="readme">Read more</a>

{% hint style="info" %}
To maintain a reduced PCI scope, it is mandatory to always include the 2pay.js library hosted on 2Checkout’s servers. Do not use bundle libraries that contain 2pay.js or host a copy of the 2pay.js library from your own servers, as this increases your PCI requirements.
{% endhint %}

## Benefits <a href="#benefits" id="benefits"></a>

The 2Pay.js solution brings multiple benefits for both merchants and shoppers:

* Improved payment processing with a more secure and compliant system
* Full-cart ownership for merchants as they don't need to handle customer data, by tokenizing the payment information for them
* Reduced complexity for the [PCI DSS validation process](https://www.pcisecuritystandards.org/merchants/) via an SAQ-A self-questionnaire​
* Improved security for shoppers, who will pass sensitive payment data directly to the 2Checkout platform, thus bypassing the merchant's systems.

## Activation <a href="#activation" id="activation"></a>

2Pay.js can be implemented by merchants via a JavaScript library that allows them to include the payment fields at checkout without the need to handle shoppers' credit card data in any way, as shown by the steps below:

* Merchants include a few lines of code in the interface where they need to collect payment information.​
* Merchants will run a JS library that will replace the input fields with iframes
* The iframes will collect and send shoppers' card data directly to the 2Checkout​ platform

## How it works <a href="#how-it-works" id="how-it-works"></a>

Triggering an order with 2Pay.js will work like any other order placed via API​: the JavaScript library will pass the credit card data to the 2Checkout system and it will return a payment token and the card brand​. The API order is placed using the payment token​.

1. The merchant runs a JavaScript library that will change the billing form by replacing the input fields with iframes. This way the data is sent directly to the 2Checkout system.​
2. In return, the merchant receives a token for the saved credit card information from the 2Checkout platform (valid for 10 minutes) and the card brand used by the client (informative data that you can use it for you own purpose).
3. The merchant submits the billing information and the payment token via the 2Checkout API.​
4. The 2Checkout platform matches the token with the card data, extracts the card data and authorizes the payment, and stores the card in the vault. ​
5. The merchant then redirects the customer to the **Order Confirmation** page​.
6. Once the order is approved, the merchant receives a notification from the 2Checkout platform.
7. Finally, the 2Checkout system sends a notification once the payment is settled.​

## Use cases <a href="#use-cases" id="use-cases"></a>

See [here](/2checkout-apis/2checkout-apis/2pay.js-payments-solution-integration-guide/use-cases.md) some use cases for the 2Pay.js implementation.

## FAQs <a href="#faq" id="faq"></a>

<details>

<summary>What payment methods are available for use with the 2Pay.js library?</summary>

All API version 6 accepted credit cards can be used with the 2Pay.js library.

</details>

<details>

<summary>What integrations does 2Pay.js support?</summary>

2Pay.js was developed for integration within web sites so that it allows full seamless integration with the merchants' checkout flow.

</details>

<details>

<summary>Does 2Pay.js support 3D Secure version 2?</summary>

While 2Pay.js does not need 3D Secure support, the integration for this security check is done via API once the order is placed with the payment token. More information about the 3DS flow in the API can be found [here](/json-rpc-api-reference/json-rpc-api-6.0/3d-secure-flow-for-api-orders.md).

</details>

<details>

<summary>How can I include the N/A value in the required API fields?</summary>

You can easily include the **N/A value** in the required API fields as shown below:

```php
// For US:

"BillingDetails": {
    "Address1": "N/A",
    "City": "n/a",
    "CountryCode": "US",
    "Email": "customer@2Checkout.com",
    "FirstName": "Customer",
    "FiscalCode": null,
    "LastName": "2Checkout",
    "Phone": "N/A",
    "State": "NY",
    "Zip": "10075"
  },


// For the rest of the world:

"BillingDetails": {
    "Address1": "N/A",
    "City": "n/a",
    "CountryCode": "RO",
    "Email": "customer@2Checkout.com",
    "FirstName": "Customer",
    "FiscalCode": null,
    "LastName": "2Checkout",
    "Phone": "N/A",
    "State": "N/a",
    "Zip": "N/A"
  },
```

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.2checkout.com/2checkout-apis/2checkout-apis/2pay.js-payments-solution-integration-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
