Hosted Payment Page

❗️
Important Note:
When using iFrame to load Ezypay's Hosted Payment Page, ensure that the code is tested using a hosted server. Using your local HTML file to test the iFrame will not guarantee the window listener would be able to return the payment method token in a timely manner.
The Hosted Payment Page is not applicable for South Korea - Please refer to the Korean Hosted Payment Page for more details.

1. Create a Hosted Payment Page

What each field means when building the hosted payment page address:

Parameter	Description	Notes
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	Below are the payment method types possible: a) BANK b) VISA c) MASTERCARD d) AMEX e) PAYTO (AU ONLY) Each region has their own support payment methods. Here is a list of the support payment methods for each country.	If both the merchantId and paymentMethods are specified, it will validate and display only the payment methods accepted by the merchant. For example, if the selected paymentMethods are VISA and MASTERCARD, but the merchant accepted payment methods only include BANK, VISA and MASTERCARD, then only VISA and MASTERCARD will be displayed. If the paymentMethods is specified, but one or more of those payment methods are not accepted by the merchant, then those payment methods will not be displayed. For example, if the selected paymentMethods are BANK and MASTERCARD, but the merchant accepted payment methods only include BANK and VISA, then only BANK will be displayed. If neither the merchantId or the paymentMethods are specified then by default, it will automatically load the hosted payment page with the payment method type available for that region.
mandateTypeId	This is applicable to PayTo only. Currently this value is applicable to PayTo users only. However, this may change in the future. Mandate Type ID example : ba3039d6-e7d4-11ec-8fea-0242ac120002	If this value is not specified or if an invalid value is submitted (e.g. mandate type ID belonging to a different merchant), the default mandate type for the merchant ID submitted will be applied.

📘
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.
Understand how to retrieve the default mandateTypeId with this link.

Integrator will add this page into an in their front-end code.

The page URL added into <Iframe> will be:

All parameters the Hosted Payment Page URL can accept:

https://vault-sandbox.ezypay.com/paymentmethod/embed?token={{HostedPaymentToken}}&countryCode={AU,NZ,SG,PH,TH,MY}&paymentMethods={BANK,VISA,MASTERCARD,AMEX,PAYTO}&mandateTypeId={MandateTypeId}

**Javascript code sample**

<script type="text/javascript">

//Without PayTo enabled
$("iframe").attr("src", "https://vault-sandbox.ezypay.com/paymentmethod/embed?token=" + authenticationTok + "&countryCode=" + region + "&pageType=customer"); 

//OR with PayTo enabled (Only in AU)
$("iframe").attr("src", "https://vault-sandbox.ezypay.com/paymentmethod/embed?token=" + authenticationTok + "countyCode=AU&mandateTypeId=" + mandateTypeId); 

</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

Integrators will need to create the "submit" button on their end to POST the payment information collected from the Hosted Payment Page (in the Iframe) and setup a window listener to retrieve the Payment Method Token returned.

An example of how the hosted payment page will be delivered 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>