Pay Components

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.

Setup guide
Hosted Checkout

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. Copy your API key from your Pay Dashboard

The API key will be used to authenticate you to Pay.com backend.

2. Build your own checkout route to create a new checkout session using the/checkout/sessions endpoint

3. Send the returned client_secret to your frontend.

4. To keep your system up to date with payment statuses, make sure to subscribe to webhooks through the Developers section in your Pay Dashboard. If you prefer to keep the integration clean, then only subscribe to these webhooks:

payment_session.completed
This event is sent when the user successfully completes payment flow.
charge.succeeded
To see full details of the completed payment use the charge.succeeded webhook.
payment_session.expired
This event is triggered if the payment processing fails for any reason.

1. To use our pre-built SDK, choose your preferred client-side installation:

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

2. Initialize the client session using your <Merchant ID> as it appears in your Pay Portal

const pay = await Pay.com({ identifier: '' })

3. Use your own checkout route, as described in  Server Side ,to initiate a new checkout session.

const checkout = pay.checkout({
  token: async () => {
    const response = await fetch(``, {
      method: 'POST',
      body: JSON.stringify(paymentDetails)
    })

    const {
      token
    } = await response.json()

    return token
  }
})

4. Render the Pay Checkout frame on your web page.
Get the selector of the element you want to render the checkout element into.

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

5. Subscribe to the communication events generated by the Pay Checkout iframe.

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.

6. To gain even more control over the checkout process, you can subscribe to the webhooks.

 
pre[class*="language-"]::selection,
code[class*="language-"]::selection,
pre[class*="language-"]::mozselection,
code[class*="language-"]::mozselection {
  text-shadow: none;
  background: #b3d4fc;
}
@media print {
  pre[class*="language-"],
  code[class*="language-"] {
    text-shadow: none;
  }
}

document.querySelectorAll('.w-tab-menu').forEach(tabList => {
  tabList.querySelectorAll('a').forEach(tab => {
    tab.onclick = () => {
      window.keepScroll = document.body.scrollTop
      location.hash = tab.id
    }
  })
})

1. Integrate the SDK using CocoaPods

    • Add pod ‘PayCom’ to your project Podfile

    • Run pod install

2. Initialize the SDK

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

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

3. Start the checkout process

 pay.checkout(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.) { 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:' }

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

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.) { 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.

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