Ezypay’s Payment Capture Page let you easily embed and customise the payment method capture step in your onboarding flow. With flexible configuration options, you can tailor the experience to match your brand and user journey — all while reducing the complexity of handling sensitive payment data.

For existing partner that are using the Hosted Payment Page, please find the comparison between Payment Capture Page and Hosted Payment Page here

Prerequisites

Customer creation

A customer must be created before collecting payment method because it cannot be used for billing before linking to a customer. Please refer to Customer Creation on creating customers in Ezypay.

Get started

1. Displaying the Payment Capture Page

Integrate the Hosted Payment Page into your HTML iframe element using the following URL format:

https://hosted-global-sandbox.ezypay.com/paymentmethod/embed?token={{AuthenticationToken}}&customerId={{CustomerId}}&submitbutton=true

Each parameter is detailed below:

Example script:

...
<iframe id="payment-frame" style="border: 0; width: 800px; height:620px"></iframe>
<script type="text/javascript">

document.getElementById("payment-frame").setAttribute(
    "src",
    "https://hosted-global-sandbox.ezypay.com/paymentmethod/embed?token=" + authenticationTok + "&customerId=" + customerId + "&submitbutton=true"
);
</script>
...

🚧

Important

The token have a time to live of 60 minutes only. Payment Capture Page URL need to be regenerated once it expired.

2. Submitting and Retrieving Payment Method Token

Submit the payment information from the Payment Capture Pageo nce customer complete the form. Set up a HTTP listener to retrieve the Payment Method Token returned from the Payment Capture Page and store it in your database. The response with customerId and link_status is true show the payment method token is sucessfully linked to the specific customer.

Example script.

...
<script type="text/javascript">

  window.addEventListener('message', function (e) {
    var response = JSON.parse(e.data);

    if (response.data.paymentMethodToken && response.link_status) {
        //Store the token 
    }

    if (!response.link_status) {
        //Handle token linking failed
    }    

    if (response.error) {
        //Handle the error
    }    

	});
</script>
...

{
  "type": "CARD",
  "paymentMethodToken": "c50c3335-1d9e-45d8-83d9-091264323a9f",
  "card": {
    "accountHolderName": "test",
    "expiryYear": "31",
    "expiryMonth": "12",
    "type": "VISA",
    "last4": "1111",
    "first6": "411111",
    "countryCode": "AU",
    "tokenDetails": null,
    "origin": null,
    "accountType": null,
    "tokenized": false
  },
  "bank": null,
  "payTo": null,
  "wallet": null,
  "purpose": "PAYMENT_METHOD_TOKEN",
  "customerID": "5354a7e1-89d6-4ae9-98b5-632a9a23bce7",
  "link_status": true
}

You are now ready to bill your customer.

Best practices

Integrate all payment methods

Ensure your integration is compatible with all payment methods for your region. Kind refer to Supported Payment Methods for full list of available payment methods.

Display payment method data

Show customers the linked payment methods data within your platform for transparency and ease of identification. Different payment methods have distinct objects storing their data. Refer to Payment Methods Payloads Guide for more information.

Remind customers to approve PayTo agreements

PayTo is relatively new in Australia and customer might not aware they need to approve the PayTo agreement. Show a pop up reminder or send an email reminder after customer successfully added PayTo.

Test for different payment scenarios

To assist integrators in testing their integration with Ezypay, we provide a sandbox environment along with pre-configured test payment data. This allows thorough testing of various payment scenarios without triggering actual transactions.

How does it looks like?