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 or generate a hosted payment page authentication token. |
countryCode | Will add the country code the merchant is in: a) AU, b) NZ, c) SG, d) PH, e) TH, f) MY |
paymentMethods | Depending on what is allowed in the region. Example for SG and MY, this regions can only accept Credit Card transactions. Below is the payment method type possible: a) BANK b) VISA c) MASTERCARD d) AMEX NOTE: By Default, if the "paymentMethods" were not provided, it will automatically load the hosted payment page with the payment method type available for that region. |
Integrator will add this page into an in their front-end code.
The page URL added into <Iframe>
will be:
https://vault-sandbox.ezypay.com/paymentmethod/embed?token={{HostedPaymentToken}}&countryCode={AU,NZ,SG,PH,TH,MY}&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 almost 3 years ago