Hosted Payment Page
The hosted payment page allows integrators to create customers payment method in a secure manner.
1. Create a Hosted Payment Page
What each field means when building the hosted payment page address:
Parameter | Description |
---|---|
token | Can either be the "Authentication Token" (used when calling the API's |
countryCode | Will add the country code the merchant is in: |
paymentMethods | Depending on what is allowed in the region. Example for SG and MY, this regions can only accept Credit Card transactions. |
[Highly Suggested] merchantId | [Update as of 15th of June 2022] Example: Merchant ID. |
[Optional] mandateTypeId | Integrators do not need to provide the "mandateTypeId" for now, however this is schedule for change in the near future. Mandate Type ID |
PayTO Integration (Only available in Australia)
merchantId and mandateTypeId are newly introduced fields to support PayTo Payment Methods. In order to support the PayTo payment methods, it is mandatory to provide the merchantId in the URL.
Integrator will add this page into an in their front-end code.
The page URL added into <Iframe>
will be:
[Update as of the 15th of June 2022]
https://vault-sandbox.ezypay.com/paymentmethod/embed?token={{HostedPaymentToken}}&countryCode={AU,NZ,SG,PH,TH,MY}&merchantId={merchantId}&paymentMethods={BANK,VISA,MASTERCARD,AMEX}
**Javascript code sample**
<script type="text/javascript">
$("iframe").attr("src", "https://vault-sandbox.ezypay.com/paymentmethod/embed?token=" + authenticationTok + "&countryCode=" + region + "&pageType=customer");
</script>
HTML code sample
<iframe id="payment-frame" style="border: 0; width: 800px; height:620px"></iframe>
Sample on how the hosted payment page looks like:


2. Submit the form once it has been filled up
Ezypay will return the newly created Payment Method Token data once the hosted payment page is submitted back to Ezypay.
<script type="text/javascript">
//Triggered by the button
function sendPayment(e, type)
{
var hostedpage = "https://vault-sandbox.ezypay.com";
var receiver = document.getElementById('payment-frame').contentWindow;
receiver.postMessage({ actionType: type }, hostedpage);
retrivePaymentTokenCreated(e);
}
$("#PostPaymentMethod").click(function (e) {
sendPayment(e, 'create');
});
function retrivePaymentTokenCreated(e) {
window.addEventListener('message', function (e) {
var response = JSON.parse(e.data);
if (response.data.type) {
$("#PaymentMethodResponse").text("Payment Method Token: " + response.data.paymentMethodToken + " with Type Account: " + response.data.type);
}
if (response.error) {
$("#PaymentMethodResponse").text("Error occured");
}
});
}
</script>
Updated 16 days ago