Click To Pay

Your customers can store their cards during an initial Hosted Checkout Page transaction and reuse them for future payments. Instead of manual re-entering the card, Click To Pay allows your customers to select these stored cards on our Hosted Checkout Page.

Hence, this feature greatly enhances your customers' payment experience:

• Allows seamless guest checkouts without the need to store card data on your end.
• Reduces the checkout process to as little as one click, even skipping the CVC check.
• Enhance trust through tokenisation and authentication by the card scheme.

As a merchant, you also enjoy numerous benefits:

• Click To Pay transactions are tokenised on the scheme's side, enhancing fraud protection.
• Click To Pay relieves you from managing a token database for Card On File transactions.
• You will see an increased conversion rate and higher transaction volume due to a smoother checkout process and access to a global customer base.

Payment flow

1. Your customers go to your check-out page and finalises the order
2. You send this CreateHostedCheckout request to our platform, including clickToPay=true and your customer's emailAddress.
3. You redirect your customer to the redirectionUrl. Your customer selects "Cards" on the Hosted Checkout Page. Depending on your customer's Click To Pay registration status, differences apply:
   a) Your customer has at least one MasterCard registered as Click To Pay already. The flow continues at step 4).
   b) Your customer does not have a MasterCard registered as Click To Pay yet. The flow continues at step 6).
   c) Your customer has at least one MasterCard registered as Click To Pay already and wants to register another one. The flow continues at step 7).
4. The customer receives a One-Time-Password (OTP) on her/his mobile device or in her/his Email inbox. S/he enters the OTP on the Hosted Checkout Page.
5. The Hosted Checkout Page displays all registered cards. Your customer selects the preferred card and confirms the payment. The flow continues at step 8).
6. Your customer enters her/his card in the payment form and flags "Save my detail with Mastercard Click To Pay for fast secure checkout". Your customer completes the registration by filling in the additional personal data appearing in the payment form. The customer receives a One-Time-Password (OTP) on her/his mobile device or in her/his Email inbox. S/he enters the OTP on the Hosted Checkout Page. Your customer confirms the payment. The flow continues at step 8).
7. The Hosted Checkout Page displays all registered cards. Your customer clicks on "MANUAL CARD ENTRY", enters the card data in the payment form and flags "Save my detail with Mastercard Click To Pay for fast secure checkout". The customer receives a One-Time-Password (OTP) on her/his mobile device or in her/his Email inbox. S/he enters the OTP on the Hosted Checkout Page. Your customer confirms the payment.
8. We redirect the customer to her/his issuing bank for 3-D Secure authentication. The customer identifies herself/himself.
9. We process the transaction and receive the result from the acquirer.
10. We redirect your customer to your returnUrl.
11. You request the transaction result from our platform via GetPaymentDetails /GetHostedCheckout or receive the result via webhooks.

Integration

To offer Click To Pay on the Hosted Checkout Page, add the following properties to your CreateHostedCheckout request:

{
   "order":{
      "amountOfMoney":{
         "currencyCode":"EUR",
         "amount":2980
      },
      "customer":{
         "contactDetails":{
            "emailAddress":"yourEmail@address"
         }
      }
   },
     "hostedCheckoutSpecificInput":{
      "locale":"en_GB",
      "cardPaymentMethodSpecificInput":{
         "clickToPay":true
      }
   }
}

Properties	Description
hostedCheckoutSpecificInput.cardPaymentMethodSpecificInput. clickToPay	Set to true to enable the Click To Pay feature.
customer.contactDetails.emailAddress	Your customer's e-mail address, pointing to her/his Click To Pay profile in the card scheme's database. By sending the e-mail address, we retrieve all stored cards linked to this address and display them on the Hosted Checkout Page. If left empty, your customers need to fill in the email address manually to retrieve the stored cards.
hostedCheckoutSpecificInput.locale	Just like the Hosted Checkout Page, Click To Pay is available in various languages. Populate it accordingly to display the user interface on our Hosted Checkout Page. The value is a combination of ISO 639-1 (language) and ISO 3166-1 (country): English UK/US: en_UK / en_US French: fr_FR German AT/CH/DE: de_AT/ de_CH/ de_DE Italian: it_IT Spanish: es_ES

Sending this request will group all available card payment methods into one item "Cards".

Upon clicking on "Cards", the Hosted Checkout Page will display all Click To Pay cards linked to your customer’s profile. Your customers can also click on "MANUAL CARD ENTRY" to pay with any other card (regardless of the scheme) or register another card for Click To Pay.

You can further streamline the checkout process by adding hostedCheckoutSpecificInput.paymentProductFilters.restrictTo=3 to your request, skipping the payment method selection screen. Learn more about preselecting payment methods in our Hosted Checkout Page guide.