Click to Pay

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_path option 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.
• JavaScript SDK -- this embeds the iframe in a page for you and provides features to hook into those events.

Both methods support Mastercard and Visa payment methods.

Testing

Best Practices

Visa, Mastercard, and AMEX have strict fraud and velocity rules – running up agains them can cause failed transactions and 500 errors.
Using a new email address is strongly recommended when repeating your tests. Repeating with the same emails will likely result in errors

Sandbox Testing

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.

Test Credit Card Numbers

For a full list of test numbers that work with Click to Pay, please visit this page.

Variable response credit card numbers

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:

• 5120350100064545
• 5120350100064552
• 5186001700008876
• 5120350100064578
• 5186001700001434

Token Data cards:

• 5120350100064537
• 5120350100064545
• 5120350100064552
• 5120350100064560
• 5120350100064578

Mastercard Click-To-Pay Action Sheet

Installation:

CDN:

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:

https://github.com/Mastercard/action-sheet-reference-app