Click to Pay is a simple, secure, and consistent way to checkout.
It is built on Industry standards on EMV specifications and smart security powered by Mastercard and is supported by major card schemes, such as Mastercard, Visa, and others.
With millions of customers already enrolled in Click to Pay, leverage this capability to provide your customers a faster, secure, and best in class payment experience.
We integrate to Click to Pay for all participating networks (including Mastercard and Visa) via Mastercard SRCi system providing an embedded checkout experience and currently support three methods of integration:
- Hosted Page (i.e. redirection from the merchants website to the payment page) -- we host the whole checkout flow for you and redirect back to your site (when the
return_pathoption is provided).
- IFrame embed -- you embed the Click to Pay iframe within your own checkout flow, and we send events from the frame back to the parent page.
Both methods support Mastercard and Visa payment methods.
First, enroll with Mastercard's Sandbox by entering your details here: https://sandbox.src.mastercard.com/profile/enroll. Once you have a Click to Pay account you can then start using it.
The credit card numbers are different from the Fat Zebra test card numbers, as these are Mastercard or Visa specific test card numbers.
These numbers will all result in an "Approved" purchase when used with Click to Pay:
You can find out more information about these cards here: https://developer.mastercard.com/unified-checkout-solutions/documentation/testing/test_cases/click_to_pay_case/#test-cards
To test "variable response" card numbers, use the cents value of a purchase's price to specify which Response Code you would like. For example, a purchase with a price of $123.05 and any of the following cards would result in an 05 - Declined response.
PAN Data cards:
Token Data cards:
These are the classes and id's required to display MasterCard's recommended action sheet for click-to-pay.
<main class="main-container" id="mainContent"> <div class="checkout-button-wrapper"> <button type="button" id="checkoutButton">checkout</button> </div> <div class="iframe-container slide-in" id="iframeContainer"> <div class="iframe-foreground"> <iframe class="iframe-checkout" id="checkoutIframe" name="checkout-iframe"></iframe> </div> <div class="iframe-background" id="iframeBackground" /> </div> </main>
This will render:
on Desktop an animated side bar:
on Mobile an animated action sheet:
For further reference: