Pay Components

Pay Components are ready-to-use PCI DSS compliant payment fields you can embed into your checkout page through simple code. Your branding and styling remain untouched, and you don’t have to worry about storing card data.

A Payment Session includes all events involved in the process of collecting a payment from your customer, including 3DS2 verification. It allows them to select their preferred payment method depending on your configuration.
Setup guide
Hosted Checkout

Learn how to embed hosted payment fields in your web or mobile application. The client-side and server-side code use the hosted fields to create a checkout form, allowing your customers to choose their preferred payment methods and complete payments.

Start by incorporating the Pay Components into your server-side code by using a dedicated API endpoint. Then, proceed to initiate the checkout elements in your frontend. Don’t forget to subscribe to webhooks as recommended below.

1. On your server, create a payment session with POST /v1/sessions/payment

2. Render the Pay.com Pay Components checkout page

  Example HTML for loading Pay Components SDK in sandbox environment:

 
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
​
   <script type="text/javascript" src="https://js.dev.pay.com/v1"></script>
​
   <title>Pay.com checkout example</title>
 </head>
 <body>
   <div id="card_frame"></div>
​
   <script type="text/javascript">
​
     const pay = Pay.com({
       identifier: "{merchant_identifer}",
     });
​
     const checkout = pay.checkout({
       token: '{token}',
     });
​
     checkout.universal({
       container: "#card_frame",
     });
   </script>
 </body>
</html>

3. Utilize the payment events and Webhooks to control each payment session & keep your system up to date with the payment statuses

By using communication events between the Pay Checkout iframe and your parent page, you improve user experience and create better control over the checkout session. Each event returns an object with the appropriate message and relevant payload (transaction info, error details, etc.).

Payment processing events

The CONTENT_READY event is triggered when the iframe is fully loaded.
The PAYMENT_PROCESSING event is sent during the processing of the payment (after the user clicks "Pay")
The PAYMENT_SUCCESS event is sent when the user successfully completes payment flow.
The PAYMENT_FAILURE event is triggered if the payment processing fails for any reason.

3D Secure check events

The THREE_DS_INIT event is triggered when our system initiates a 3D Secure check process.
The THREE_DS_CHALLENGE event is triggered when our system detects that a 3D Secure check is required and it results in a challenge.
The THREE_DS_DONE event triggers when the 3DS challenge is completed.

Example of how to use the PAYMENT_SUCCESS event: 

 
const pay = Pay.com({
  identifier: "{merchant_identifer}",
});

const checkout = pay.checkout({
  token: '{token}',
});

checkout.on(checkout.EVENT_TYPES.PAYMENT_SUCCESS, data => {
  // data is an object containing data about the transaction
  
  showSuccessUI()
})

checkout.universal({
  container: "#card_frame",
});

1. Organise your API key
Copy your API key from your Pay Dashboard account as this will be used to authenticate you in the Pay.com backend

2. Create a payment session (https://pay.com/docs/api)
The Create Payment Session request response will include a ‘Client Secret’ token that you will need to send to your frontend

3. Render the Pay.com Universal element using our Components SDK after choosing your preferred client-side installation initialize the payment session

Choose your preferred client-side installation:

$ npm install --save @pay-com/js
 <script type="text/javascript" src="https://js.pay.com/v1" />

Please note that the CDN script will need to be amended depending on the environment:
Staging: <script type="text/javascript" src="js.dev.pay.com/v1.js" />

Production:<script type="text/javascript" src="https://js.pay.com/v1" />

Initialize the payment session remembering to include your client_secret token:

const checkout = pay.checkout({ token: client_secret })

4. Utilize the container element

checkout.universal({ container: '#pay_universal_container'})

Please note the endpoint for the sandbox environment is: http://api.staging.pay.com/

1. Integrate the SDK using CocoaPods

    • Add pod ‘PayCom’ to your project Podfile

    • Run pod install

2. Initialize the SDK

 
Pay().com(
identifier: identifier,
vc: navigation_controller,
customization: customization_obj)

This method will return the ‘Pay’ object you can use for checkout and registration to events.

3. Start the checkout process

 pay.checkout(token: pay_com_token)

The above method will initiate and present the pre-built UI for collecting payment details.

Token should be retrieved from Pay.com API for each transaction.

4. Subscribe to communication events

 pay.addEventListener(eventName: PayEvents.event_enum) { message in … }
By registering to the events below you improve user experience and create better control over the checkout session. Each event returns an object with appropriate message and relevant payload (transaction info, error details, etc.).

SDK events

The CONTENT_READYevent is sent when the drawer opens
The PAYMENT_PROCESSING event is sent during the processing of the payment (after the user clicks "Pay")
The PAYMENT_SUCCESS event is sent when the user successfully completes payment flow.
The PAYMENT_FAILURE event is triggered when the payment processing fails for any reason.

3D Secure check events

The THREE_DS_INIT event is triggered when our system initiates a 3D Secure check process.
The THREE_DS_CHALLENGE event is triggered when our system detects that a 3D Secure check is required and it results in a challenge.
The THREE_DS_DONE event triggers when the 3DS challenge is completed.

1. Integrate the SDK using JitPack

    • Add pod ‘PayCom’ to your project Podfile

allprojects { repositories { maven { url 'https://jitpack.io' } } }

    • Add the SDK dependency

 dependencies { implementation 'com.pay.sdk:Android-SDK:version' }

2. Initialize the SDK

Pay().com(context: Context, identifier: String )

This method will return the ‘Pay’ object you can use for checkout and registration to events.

3. Start the checkout process

 pay.checkout(token: pay_com_token)

The above method will initiate and present the pre-built UI for collecting payment details.

Token should be retrieved from Pay.com API for each transaction.

4. Subscribe to communication events

pay.addEventListener(eventName: PayEvents.event_enum) { message in … }
By registering to the events below you improve user experience and create better control over the checkout session. Each event returns an object with appropriate message and relevant payload (transaction info, error details, etc.).

SDK events

The PAYMENT_PROCESSING event is sent during the processing of the payment (after the user clicks "Pay")
The PAYMENT_SUCCESS event is sent when the user successfully completes payment flow.
The PAYMENT_FAILURE event is triggered when the payment processing fails for any reason.
The CONTENT_READYevent is sent when the drawer opens

3D Secure check events

The THREE_DS_INIT event is triggered when our system initiates a 3D Secure check process.
The THREE_DS_CHALLENGE event is triggered when our system detects that a 3D Secure check is required and it results in a challenge.
The THREE_DS_DONE event triggers when the 3DS challenge is completed.

You’re able to fully customise the design of the Pay Components SDK. Custom CSS can be added to a whole host of fields including saved payment methods, express checkout and all card data fields.
Customisation should be supplied to the universal function as a root level object (same level as container) when rendering the Pay Checkout Frame on your web page detailed in step 4 of the Pay Components prerequisites.

Example:


style: {
  cardForm: {
    base: CSS.Properties
    number: CSS.Properties
    cvv: CSS.Properties
    expiry: CSS.Properties
    name: CSS.Properties
  }
  base: CSS.Properties
  savedPaymentMethods: CSS.Properties
  expressCheckout: CSS.Properties
}

Please note that ‘CSS.Properties’ is a placeholder for a CSS JS object

The staging URL to use during testing is: https://api.staging.pay.com/

Explore all webhooks

Setup guide
Pre build checkout page
TBD

Learn how to embed hosted payment fields in your web or mobile applications, The client side and server side code builds a checkout form with the hosted fields to complete a payment using various payment methods.

On this page
Integration