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.
[Highly Suggested] merchantId	[Update as of 15th of June 2022] Providing the merchant id, what is agreed between the merchant and Ezypay (regarding what payment method options is available), the hosted payment page will reflex the agreement. Example: If merchant A choose not to allow AMEX card transactions, providing the merchant Id as part of the condition will remove the option to add AMEX card as part of the payment option. Merchant ID. example : 81d62b7c-e7d4-11ec-8fea-0242ac120002
[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 example : ba3039d6-e7d4-11ec-8fea-0242ac120002

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

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

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

1. Create a Hosted Payment Page

📘PayTO Integration (Only available in Australia)

2. Submit the form once it has been filled up

📘
PayTO Integration (Only available in Australia)