2Pay.js - Payments Solution

Overview

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

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. 

Requirements

To benefit from the 2Pay.js solution, merchants need to be integrated with the 2Checkout API and use the latest version - API 6.0. 

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.

Benefits

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

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

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​. 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.​ The token is valid for 10 minutes. 
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

See here some use cases for the 2Pay.js implementation.

FAQ

1. What payment methods are available for use with the 2Pay.js library?

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

2. What integrations does 2Pay.js support?

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

3. Does 2Pay.js support 3D Secure version 2?

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.

4. How can I include the N/A value in the required API fields?

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

// 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"
  },