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