Click to Pay
Click to Pay is an intelligent, password-free online checkout option that provides a quick and easy checkout experience designed to make checkout faster and easier across all devices. Click to Pay provides a single checkout button and a standardized checkout flow for all participating card schemes, including Mastercard, Visa, American Express, and Discover. Click to Pay is built off EMVCo's Secure Remote Commerce (SRC) specification and replaces Masterpass, Visa Checkout, and Amex Express Checkout.
The following integration methods are supported:
| Integration methods | Transactions |
|---|---|
|
*For instructions on adding Click to Pay to the Direct Payment integration, contact your payment service provider. |
All |
About the method
When a payer signs up for Click to Pay, they use their email address and add their payment cards to their Click to Pay profile.
During checkout on your web site:
- The payer provides their email address.
- The payer performs an additional verification step with a one-time passcode (OTP).
- The payer’s card details are retrieved from their Click to Pay profile and displayed.
- The payer can select which card to use for the payment.
- Click to Pay displays a Digital Card Facilitator user interface (DCF) component with the payment details. The payer accepts the details and confirms the payment.
To avoid the OTP verification step in the future, the payer can choose the Remember me option to subsequently skip the verification when using the same browser in a subsequent checkout.
The payer can store multiple credit, debit, or prepaid cards, the associated billing addresses, and multiple shipping addresses in their Click to Pay profile. Card details are securely stored, and additional security is provided by offering network tokenization where possible provided network tokenization is enabled in the payer’s market. Click to Pay allows the payer to select the payment details to be used for the payment; however, the payment itself is processed using the acquirer configured for your merchant profile in the Spring by Citi Payment Gateway
If the payer does not have an existing Click to Pay profile, they can create it during the checkout process by providing their email address and card details and selecting to proceed with Click to Pay. Click to Pay displays the DCF component where the payer can add their contact details and create their Click to Pay profile before confirming the payment. If the payer does not want to use Click to Pay, they provide their card details for a normal credit or debit card payment and select to proceed with guest checkout.
Click to Pay offers the following benefits:
- Intelligent payer recognition, ‘embedded’ into the checkout flow, to initiate faster guest checkout across all devices with no passwords to remember.
- Reduction in clicks and manual card entries to ultimately increase conversion and create frictionless experiences.
- Potential for higher authorization approval rates via network tokenization, assisting in the reduction of preventable declines.
- Built on EMVCo SRC standards to create a consistent user experience and lower fraud rates in eCommerce guest checkout payment moments.
- Secure exchange of payment data including card details, billing, and shipping address details.
Click to Pay is currently only available in some countries. Check with your payment service provider for availability in your country.
Main supported features
When using Click to Pay as a payment method, you can:
- Perform payments using a single-action pay or the two-step authorization and capture transactions.
- Make refunds, voids, and disbursements.
- Add supplementary data to your requests to make the payment more user-friendly for the payer or ease its processing in the payment system.
Merchant-initiated transactions (MIT) are not currently supported for Click to Pay. If you want to use the same payment details after the first cardholder-initiated transaction (CIT) to handle a series of recurring or installment payments, do not offer Click to Pay as a payment method option.
To empower you with flexibility and control over the Click to Pay experience, the Spring by Citi Payment Gateway provides the implementation option of Embedded flow within the Hosted Checkout.
Returned payment details
Click to Pay returns different types of payment details to the gateway and consequently to you based on what the gateway requested, your configuration in the Click to Pay system, and the used card scheme. Typically, Click to Pay returns a network token, token expiry, full cryptogram where supported by the card scheme, and masked card details.
If the used card does not support network tokenization, for example, the issuer is not participating, Click to Pay returns the card details, such as card number and card expiry, instead of the network token details.
If you are located in the US and have indicated that you want to make use of your rights under the Durbin amendment, C2P provides the card details such as card number and card expiry for debit cards.
The payment details provided by the payer during the C2P interaction are stored in the session and returned in the transaction response for all API requests performed using the session:
Network token details
If the response contains network token details, the sourceOfFunds.type field is set to SCHEME_TOKEN. In addition:
- The masked card details are returned in the following fields:
sourceOfFunds.provided.card.numbersourceOfFunds.provided.card.expiry.yearsourceOfFunds.provided.card.expiry.month
- The network token details are returned in the following fields:
sourceOfFunds.provided.card.deviceSpecificNumbersourceOfFunds.provided.card.deviceSpecificExpiry.monthsourceOfFunds.provided.card.deviceSpecificExpiry.year
- American Express does not support this type of network token.
- The full network token cryptogram is only returned in the UPDATE SESSION FROM WALLET response, not in any of the payment transaction responses.
Card details
If network tokenization is not supported and card details are returned instead, the sourceOfFunds.type field is set to CARD. In addition, the following masked card details are returned:
- sourceOfFunds.provided.card.number
- sourceOfFunds.provided.card.expiry.year
- sourceOfFunds.provided.card.expiry.month
Payer details
The payer's name and phone number are provided within the customer object. The payer's email address is provided in the customer.email field, if you have set consumerEmailAddressRequested to true in your request.
Billing address
The billing address associated with the card is provided within the billing.address object fields.
Shipping address
If you have set collectShippingAddress to true in your request, the shipping address is provided within the shipping.address object fields.
Prerequisites
To use Click to Pay as a payment method:
- Contact your payment service provider to ensure that Click to Pay is available to you and to enable the required privilege to use it.
- Onboard to SRC and activate SRC for your merchant account in the Merchant Administration (MA). Go to Admin > SRC Configuration and follow the instructions.
Adding the method to your integration
Follow the instructions for the integration methods you want to use.
For examples of Click to Pay transaction requests, download the Postman collection.
Hosted Checkout
If you are using the Hosted Checkout implementation method, Click to Pay is supported on the gateway from API v63 onwards for Mastercard, Visa, and American Express cards.
If your merchant profile has been enabled to use Click to Pay, that option is automatically provided to your payers on the hosted payment page within credit and debit card payment options:
- If the payer has an existing Click to Pay profile and enters their email address or you provide it in the
INITIATE CHECKOUTrequest, the payer must enter an OTP and then the cards stored in their Click to Pay profile are shown for selection. - If the payer has an existing Click to Pay profile and is recognized from cookies, the cards stored in their Click to Pay profile are shown for selection.
- If the payer does not have an existing Click to Pay profile, the hosted payment page allows them to create one and store card details for it.
To allow the payer to use Click to Pay in your Hosted Checkout integration, implement your generic Hosted Checkout integration with the following considerations:
- Shipping address: Payers cannot select a shipping address during the Click to Pay interaction. If you need a shipping address for the order, gather those details before sending the
INITIATE CHECKOUTrequest. - Billing address: Billing address is always collected from the payer during the Click to Pay interaction.
- 3D Secure (3DS) authentication: If you are configured for 3DS, the Hosted Checkout automatically performs 3DS authentication after the Click to Pay interaction.
- Important fields in the
INITIATE CHECKOUTrequest: Add the fields in the following table to your request, if possible.
Table: Important Click to Pay fields in the INITIATE CHECKOUT request
| Field | Description | Required |
|---|---|---|
| interaction.country | For the DCF component, the interaction country determines country-specific content presented to the payer during the Click to Pay interaction, such as Terms and Conditions. The value you have configured against your merchant profile in the gateway is used by default. Add this field to your request if you want to override the value in your merchant profile for this interaction. | Optional |
| interaction.locale | For the DCF component, the interaction locale determines the display language. By default, the language configured in the payer's browser is used. If the payer's language cannot be determined or is not supported, en_US is used. If you want to override the value, add this field to your request. Currently, the supported languages are UK English (en_UK), Spanish (es_ES), Canadian French (fr_CA), Brazilian Portuguese (pt_BR), and Hong Kong Chinese (zh_HK). | Optional |
| merchant.name | Provide your trading name, such as the name known to your payer. The name may be displayed during the Click to Pay interaction. | Required |
| merchant.url | Provide the URL of your web site that the payer is using. The URL may be displayed during the Click to Pay interaction. | Required |
| customer.email | Payer's email address is always collected during the Click to Pay interaction. If you already know the payer's email address, add the customer.email field to your request to allow the payer to bypass entering their email address during the Click to Pay interaction. | Required |
Hosted Session
If you are using the Hosted Session implementation method with your own payment page, the Click to Pay "Embedded Experience" is supported through a Click to Pay SDK and JavaScript (JS) API. The embedded experience is supported on the gateway from API v62 onwards for Mastercard, Visa, and American Express cards.
If you allow the payer to use Click to Pay in your Hosted Session integration, you must support three different payer scenarios for submitting a payment:
- New user: when a payer is using Click to Pay for the first time or wants to provide a new card.
- Returning user: with cookie when a returning payer is recognized from cookies.
- Returning user: with email when a returning payer is recognized from their email address.
The following figures illustrate the flows related to the three scenarios. For more information on how to implement them, see Click to Pay Hosted Session Integration.
Figure: New user flow
Figure: Returning user with cookie flow
Figure: Returning user with email flow
Testing the method
The following tables describes the supported test setups.
Table: Supported test setups
| Environment | Merchant Profile | Card Type Used | Purpose |
|---|---|---|---|
| Test (MTF) | Live | Sandbox test card from Click to Pay | Testing through the Click to Pay sandbox portion of the payment flow only. |
| Test (MTF) | Test | your payment service provider provided test card | Testing the merchant’s integration with the gateway only, the Click to Pay part of the flow is simulated |
| Production | Live | Live Cards owned by the merchant | Full end to end testing with the gateway and Click to Pay |
| Production | Test | Test cards from the gateway | Testing the merchant’s integration with the gateway only, the Click to Pay part of the flow is simulated) |
The above test cards may not work with 3DS or test the final payment processing step of the payment flow. In that case, test those features separately using the standard test instructions provided for 3DS or the applicable integration method.
Static testing
When you have completed your integration with the gateway for Click to Pay, you can test it by using your test merchant profile, that is, your merchant ID prefixed with TEST. When using the test merchant profile the gateway provides a simulator for the Click to Pay interaction. The Click to Pay simulator uses a set of pre-defined payment details that cannot be modified. Based on the pre-defined payment details, you can trigger and test different scenarios, as described below.
The second column in the tables below indicates the last four digits of FPAN selected by the payer during the Click to Pay interaction. To trigger a scenario, select the corresponding FPAN on the simulator during the payer's Click to Pay interaction.
Scenario 1: Click to Pay returns a network token and full cryptogram
| Scheme | Last 4 digits of FPAN | SRC Correlation ID | Response from UPDATE SESSION FROM WALLET Operation | Response from AUTHORIZE or PAY Operation |
|---|---|---|---|---|
| Mastercard | xxx0007 | 783a935d-c6a9-4289-b19d-c3336f998b57 |
Shipping Address
Customer Details
Billing Address
|
Shipping Address
Customer Details
Billing Address
|
| Visa | xxx4198 | 12345671-visaTAVV-expiry1232-colShiptrue |
Shipping Address
Customer Details
Billing Address
|
Shipping Address
Customer Details
Billing Address
|
Scenario 2: Click to Pay returns a network token and a dynamic CSC
| Scheme | Last 4 digits of FPAN | SRC Correlation ID | Response from UPDATE SESSION FROM WALLET Operation | Response from AUTHORIZE or PAY Operation |
|---|---|---|---|---|
| Mastercard | xxx0008 | 261af700-e576-43bf-af92-bd0f6810e8fb |
Shipping Address
Customer Details
Billing Address
|
Shipping Address
Customer Details
Billing Address
|
| Visa | xxx3333 | 12345671-visaDTVV-expiry1232-colShiptrue |
Shipping Address
Customer Details
Billing Address
|
Shipping Address
Customer Details
Billing Address
|
| American Express | xxx0017 | 4c26bae3-0638-4766-9539-58ae12844333 |
Shipping Address
Customer Details
Billing Address
|
Shipping Address
Customer Details
Billing Address
|
Scenario 3: Click to Pay returns the card number and expiry Date, where Network Tokenization is not supported
| Scheme | Last 4 digits of FPAN | SRC Correlation ID | Response from UPDATE SESSION FROM WALLET Operation | Response from AUTHORIZE or PAY Operation |
|---|---|---|---|---|
| Mastercard | xxx0305 | 8e455e8b-4e52-46cf-a3da-83aa3cf9a76e |
Shipping Address
Customer Details
Billing Address
|
Shipping Address
Customer Details
Billing Address
|
| Visa | xxx4821 | 12345671-visa1-expiry1232 |
Customer Details
Billing Address
|
Customer Details
Billing Address
|
| American Express | xxx4564 | 86584dcc-280f-4b57-8da4-49cd1067a2eb |
Shipping Address
Customer Details
Billing Address
|
Shipping Address
Customer Details
Billing Address
|
Testing SRC with 3D Secure authentication
If your merchant profile is enabled for 3-D Secure Authentication (3DS) you can use the in the following tables to trigger either a frictionless flow or a challenge flow.
Scenario 4: 3DS2 Challenge Flow
| Scheme | Last 4 digits of FPAN | SRC Correlation ID | Response from the API |
|---|---|---|---|
| Mastercard | xxx0009 | 1049624e-cc67-45f6-bd5f-c625eb4c6cc1 |
|
| Visa | xxx4222 | 12345671-SRC3DSChallenge-expiry1232-colShiptrue |
|
| American Express | xxx4570 | 20e051bc-bd25-46db-a7d3-d2944fbb05cf |
|
Scenario 5: 3DS2 frictionless flow
| Scheme | Last 4 digits of FPAN | SRC Correlation ID | Response from the API |
|---|---|---|---|
| Mastercard | 0010 | 16e051bc-bd25-46db-a7d3-d2944fbb05cf |
|
| Visa | xxx4180 | 12345671-SRC3DSFrictionless-expiry1232-colShiptrue |
|
| American Express | 4571 | 17e051bc-bd25-46db-a7d3-d2944fbb05cf |
|
Frequently asked questions
As a payer, I've added a card to my Click To Pay wallet, why does it not appear on the checkout page?
While your payer's Click to Pay profile itself can contain cards for any supported card schemes, they can only use Click to Pay for those cards where:
- The card scheme has been activated for Click to Pay on your merchant profile.
- Your merchant profile is configured to process cards with this scheme and the transaction currency.
Is end-to-end testing available with Click to Pay?
Currently, end-to-end testing is not supported with Click to Pay. You can use your live merchant account in the test environment (MTF) to test the process only up to the Click to Pay interaction or by using the Click to Pay sandbox for the actual interaction process.