Click to Pay
Introduction
Built on EMV® Secure Remote Commerce standard, Click To Pay provides the consumers a simple, secure and consistent way to check out. Brands supported by this solution include Mastercard, Visa, Diners and Amex.
There are different checkout scenarios available:
| User Scenario | Description |
|---|---|
| First Time User | Consumers who are using Click To Pay for the first time. Consumers need to enter their payment card details and provide consent to share the card details with the payment scheme. Billing information, consumers' email address and mobile number are required to create a new Click To Pay profile. |
| Users recognised through their device | Consumers with a Click to Pay profile who selected “Remember me” on their device during a previous checkout. The consumer then will be redirected to a list of cards which are associated with Click to Pay, and allowed to chose a card to pay in a password-free experience. |
| Users recognised through their email/mobile lookup | Consumers with a Click to Pay profile checking out using an unrecognised device; consumers need to enter the email address associated with their Click to Pay profile and verify their identity with a one-time-passcode (OTP) |
Prerequisites and Conditions
In order to process Click to Pay transactions, you must integrate with Mastercard's Unified Checkout Solution JavaScript SDK following Mastercard's implementation guidelines:
Mastercard Click to Pay
Tutorials
JavaScript Methods
Only after you have completed JS SDK part and your account has been configured with a respective service, you can proceed with the implementation with our Gateway.
Please note, that Click to Pay solution works only when you are using Fiserv's as your 3-D Secure provider.
First Time User
In the first step you submit an WalletSaleTransaction request including encryptedClickToPayobject.
| Attribute | Mandatory/ Optional/ Conditional | Description |
|---|---|---|
checkoutResponseEncrypted | M | A complex JSON Web Token wrapper object returned from Click to Pay JS response containing data generated as result of checkout operation. Contains a JWE payload signed by the SRC system. |
merchantTransactionId | M | Identifies the specific transaction in the subsequent API calls. |
xSrcCxFlowId | M | This identifier helps with routing and session affinity. You should use this attribute in subsequent API call related to this transaction, to ensure these requests are directed to the same server where the transaction credentials were generated (on Mastercard's SRC system) |
The following JSON documents represent the examples of an API request and response:
{
"requestType": "WalletSaleTransaction",
"storeId": "1101062019005",
"walletPaymentMethod": {
"walletType": "EncryptedClickToPayWalletPaymentMethod",
"encryptedClickToPay": {
"checkoutResponseEncrypted": "eyJpc3MiOiJodHRwczpcL1wvbWFzdGVyY2FyZC5jb20iLCJpYXQiOjE3MjkyNTk2NDQsImFsZyI6IlJTMjU2IiwianRpIjoiMWI0YzhkM2QtMTY5Zi00YzU2LThmZWQtMTg4OTE2YjgzOTA0Iiwia2lkIjoiMjAyMzAyMDcxNjQ2MTMtc2FuZGJveC1wYXlsb2FkLXZlcmlmaWNhdGlvbi1zcmMtbWFzdGVyY2FyZC1pbnQifQ.eyJzcmNDb3JyZWxhdGlvbklkIjoiNGYzMzliZTcuYzJkNjE2ZTMtYzBjZS00MWJlLTg4NjktNTFmNzczMzFiOWExIiwic3JjaVRyYW5zYWN0aW9uSWQiOiJjNjJmMGY3Zi1iNDY2LTQ5YTgtOTZmYy05YTJlYjE4ZWY2YmIiLCJtYXNrZWRDYXJkIjp7InNyY0RpZ2l0YWxDYXJkSWQiOiJKVVkwTHJwUVR3aWp2MWFjMDZubXdRMDAwMDAwMDAwMDAwVVMiLCJwYW5CaW4iOiI1MTg2MDAiLCJwYW5MYXN0Rm91ciI6Ijg3ODUiLCJkaWdpdGFsQ2FyZERhdGEiOnsic3RhdHVzIjoiQUNUSVZFIiwiYXJ0VXJpIjoiaHR0cHM6Ly9zYnguYXNzZXRzLm1hc3RlcmNhcmQuY29tL2NhcmQtYXJ0L2NvbWJpbmVkLWltYWdlLWFzc2V0L0hJR0gtTUFTSy0zeC5wbmcifSwicGFuRXhwaXJhdGlvbk1vbnRoIjoiMDIiLCJwYW5FeHBpcmF0aW9uWWVhciI6IjIwMjciLCJwYXltZW50Q2FyZERlc2NyaXB0b3IiOiJtYXN0ZXJjYXJkIiwicGF5bWVudENhcmRUeXBlIjoiUFJFUEFJRCIsInNlcnZpY2VJZCI6IlNSQyIsImRhdGVPZkNhcmRDcmVhdGVkIjoiMjAyNC0wOS0yNVQxNTowNjoyMS4yNjFaIiwiZGF0ZU9mQ2FyZExhc3RVc2VkIjoiMjAyNC0xMC0xOFQxMzoxMDo1OS43MzFaIn0sIm1hc2tlZENvbnN1bWVyIjp7InNyY0NvbnN1bWVySWQiOiI0ZjE5MjY1Ny0zYTFjLTQ0NzktODU0Yy1lZWE5ZjAzM2IxMWQiLCJtYXNrZWRDb25zdW1lcklkZW50aXR5Ijp7ImlkZW50aXR5UHJvdmlkZXIiOiJTUkMiLCJpZGVudGl0eVR5cGUiOiJFTUFJTF9BRERSRVNTIiwibWFza2VkSWRlbnRpdHlWYWx1ZSI6InQqKioqKm5AZmlzZXJ2LmNvbSJ9LCJtYXNrZWRFbWFpbEFkZHJlc3MiOiJ0KioqKipuQGZpc2Vydi5jb20iLCJtYXNrZWRNb2JpbGVOdW1iZXIiOnsiY291bnRyeUNvZGUiOiI0OSIsInBob25lTnVtYmVyIjoiKioqKioqKioyMDEifSwiY291bnRyeUNvZGUiOiJVUyIsImxhbmd1YWdlQ29kZSI6ImVuIiwic3RhdHVzIjoiQUNUSVZFIiwibWFza2VkRmlyc3ROYW1lIjoiYyoqIiwibWFza2VkTGFzdE5hbWUiOiJuKioqKioiLCJtYXNrZWRGdWxsTmFtZSI6ImMqKiBuKioqKioiLCJkYXRlQ29uc3VtZXJBZGRlZCI6IjIwMjQtMDctMTFUMTQ6MjY6MDkuMjc2WiIsImRhdGVDb25zdW1lckxhc3RVc2VkIjoiMjAyNC0xMC0xOFQxMzo1Mzo0NS42ODVaIn0sImFzc3VyYW5jZURhdGEiOnsiY2FyZFZlcmlmaWNhdGlvbkVudGl0eSI6IjAyIiwiY2FyZFZlcmlmaWNhdGlvbk1ldGhvZCI6IjAzIiwiY2FyZFZlcmlmaWNhdGlvblJlc3VsdHMiOiIwMSJ9fQ.MAt0tRazDCKDCgA4eZQ83f41gfjeXjCOsIVkOpe0qfeRO3CBMoNjlGKeKGxBjTcn-d0jyqe9xXEmb4DrCjoPIu-3jkQOhRxLEuSx15-p8J7_thgGAFBlrlJRr46MJguIXBPHaL3wg-ZYACqYe9HXHyVQvsBQDUpf_R6buTfjiodr7BR5Btsd9vJY2cBHOPwBkD1TL2J1p2JRXfssSU-eV3WDLKyI9ITSB6to888iknw-jL3DxmTuU5VN6blfHzFOuumuGpBslKQA60qRGZOpk4gyBP3YZAlESIqMFJ0yuA0_8SC-NPzPr3AHc7F6Ua1ikoznDcw0Qo96x7Qt2_JYMw",
"merchantTransactionId": "0a4e0d3.4f339be7.5dfc61d192c032e0ccc879124c1bcdcc9d4ffef5",
"xSrcCxFlowId": "4f339be7.c2d616e3-c0ce-41be-8869-51f77331b9a1.1729260546"
}
},
"transactionAmount": {
"total": "110",
"currency": "EUR"
}
}
{
"type": "transactionResponse",
"clientRequestId": "2838649",
"ipgTransactionId": "85025679571",
"orderId": "R-ca6f6db9-c8d7-4de6-ae7c-88ad61d075b8",
"transactionType": "SALE",
"paymentToken": {
"reusable": true,
"declineDuplicates": false,
"brand": "MASTERCARD",
"type": "PAYMENT_CARD"
},
"transactionOrigin": "ECOM",
"paymentMethodDetails": {
"paymentCard": {
"expiryDate": {
"month": "02",
"year": "2027"
},
"bin": "518600",
"last4": "8785",
"brand": "MASTERCARD"
},
"paymentMethodType": "PAYMENT_CARD",
"paymentMethodBrand": "MASTERCARD"
},
"country": "Belgium",
"transactionTime": 1736958009,
"transactionAmount": {
"total": 110.00,
"currency": "EUR",
"components": {
"subtotal": 110.00
}
},
"approvalCode": "?:waiting initiate 3dsecure",
"additionalDetails": {
"walletProvider": "CLICK_TO_PAY"
}
}
Strong customer authentication process (3-D Secure)
In cases you have received approvalCode: "?:waiting initiate 3dsecure", you must initiate a Strong Customer Authentication (SCA=3DS) to obtain consumer's consent for creating a new Click to Pay profile.
For initiating a 3DS call, please use authenticationType: "Secure3DInitiateRequest" with submitting 3DS related parameters. 3-D Secure principle and processing is described in details here: 3-D Secure
| Attribute | Description |
|---|---|
authenticationType | the value Secure3DInitiateRequest to be used for Click to Pay 3DS initiation |
termURL | Indicates the callback URL where the results of the authentication process should be posted by the ACS server (this is the issuer's Access Control Server that executes the cardholder authentication). |
methodNotifictionURL | In order to be notified about the 3DSMethod form display completion, you must also submit this element in your transaction request. The URL should be uniquely identifiable, so when there is a notification received on this URL, you should be able to map it with the corresponding transaction. This eliminates any dependency on the Secure3dTransId which you will receive with the 3DSMethod form response. An easy way to ensure correct transaction mapping is to pass a transaction reference as a query string. |
challengeIndicator | In case you would like to influence which authentication flow should be used, you can submit this optional element with the value="04" Challenge Mandated. In case the Challenge Indicator is not sent within your transaction request, the Gateway will populate the default value “01” – No preference. |
The following JSON document represents an example of a 3DS initiation call with the minimum set of elements, where you are required to use "PATCH" endpoint with referenced ipgTransactionIDyou received in previous API response, e.g. PATCH /payments/{{ipgTransactionId}}
{
"authenticationType": "Secure3DInitiateRequest",
"storeId": "1101062019005",
"authenticationRequest": {
"authenticationType": "Secure3DAuthenticationRequest",
"termURL": "https://test3.ipg-online.com/webshop/simulator/secure3d/return",
"methodNotificationURL": "https://test.test/notify",
"challengeIndicator": "04"
}
}
The following JSON document represents an example of a response:
{
"type": "transactionResponse",
"clientRequestId": "2838649",
"ipgTransactionId": "85025679571",
"orderId": "R-ca6f6db9-c8d7-4de6-ae7c-88ad61d075b8",
"transactionType": "SALE",
"paymentToken": {
"reusable": true,
"declineDuplicates": false,
"brand": "MASTERCARD",
"type": "PAYMENT_CARD"
},
"transactionOrigin": "ECOM",
"paymentMethodDetails": {
"paymentCard": {
"expiryDate": {
"month": "02",
"year": "2027"
},
"bin": "518600",
"last4": "8785",
"brand": "MASTERCARD"
},
"paymentMethodType": "PAYMENT_CARD",
"paymentMethodBrand": "MASTERCARD"
},
"country": "Belgium",
"transactionTime": 1736958009,
"transactionAmount": {
"total": 110,
"currency": "EUR",
"components": {
"subtotal": 110
}
},
"transactionStatus": "WAITING",
"approvalCode": "?:waiting 3dsecure",
"authenticationResponse": {
"type": "3D_SECURE",
"version": "2.2",
"params": {
"termURL": "https://test3.ipg-online.com/webshop/simulator/secure3d/return",
"acsURL": "https://test3.3ds.firstdata.com/fs3ds-dsacs/acs/creq",
"cReq": "ewogICAgImFjc1RyYW5zSUQiOiAiMmM4NmNiMTUtODA3NC00NDJmLWEyNjYtNGY0YTRiMTdjMDMwIiwKICAgICJjaGFsbGVuZ2VXaW5kb3dTaXplIjogIjAzIiwKICAgICJtZXNzYWdlVHlwZSI6ICJDUmVxIiwKICAgICJtZXNzYWdlVmVyc2lvbiI6ICIyLjEuMCIsCiAgICAidGhyZWVEU1NlcnZlclRyYW5zSUQiOiAiZDQ0Y2ZlODYtNGE4YS01NDU3LTgwMDAtMDAwMDAzM2VmOWVmIgp9"
}
}
}
As soon as the transactionStatus is "WAITING" and approvalCode= "?:waiting 3dsecure", you should continue with the 3DS challenge flow as described here: 3DS Challenge Flow
Recognised User
The REST API flow for recognised user (via device or login credentials) is identical with First Time User flow, it means you must use the same parameters and requestType as described above.
The only difference might occur during the cardholder's authentication process, as soon as the end users got their Click to Pay profile created, SCA is no longer required and for subsequent transactions. In such cases you should submit the value "01" for parameter challengeIndicator as shown on the example below.
{
"authenticationType": "Secure3DInitiateRequest",
"storeId": "1101062019005",
"authenticationRequest": {
"authenticationType": "Secure3DAuthenticationRequest",
"termURL": "https://test3.ipg-online.com/webshop/simulator/secure3d/return",
"methodNotificationURL": "https://test.test/notify",
"challengeIndicator": "01"
}
}
In the majority of the cases there will be no 3DS challenge required and the 3DS processing will end with the final API response as described here: Frictionless Flow
In cases where a challenge flow will be requested, please proceed as explained above in First Time User section.
Updated 14 days ago
