Our Click to Pay feature is offered as part of your VISA and Mastercard credit card acceptance with PAYONE and is embedded in the New Hosted Tokenization Form.

Enrolled customers can select stored cards in their Click to Pay wallet instead of manually re-entering the card details. To use Click to Pay, customers can create profiles using their email address either with card schemes, Visa and Mastercard or enable Click to Pay directly with their issuing bank.
The cardholder data and the card details are securely stored with the card schemes Click to Pay solutions. Cardholders may choose to store multiple cards with their Click to Pay profile.

Enrolled customers with Click to Pay can be recognized when email address or mobile phone number is provided during checkout and can select their preferred card from Click to Pay profile to complete the payment.  The payment information is delivered to you by the card schemes Click to Pay solution in an encrypted format, in similar way as other digital wallets encrypted payment data and passed to PAYONE for completing the payment.

PREREQUISITEs 

Click to Pay registration 

To begin with Click to Pay processing in Production environment you will have to be onboarded against Card Schemes. This will be done on Payone side after requesting the product.

Credentials are fetched automatically by the Hosted tokenization application during loading.

Technical prerequisites 

In order to Implement Click to Pay you have to complete the  New Hosted tokenization Page implementation. 

It can be done by following our New Hosted Tokenization integration guide.

Checkout and User journey

• You have completed the prerequisites and enabled Click to Pay.
• During checkout, PAYONE recognizes an enrolled customer with Click to Pay either email address provided or by their device.
• One time password (OTP) is being delivered via email or phone to the recognized customer to authenticate. For recognized devices, the OTP is skipped during checkout.
• Recognized customers with a valid Click to Pay profile are presented with the list of their cards stored in the Click to Pay profile.
• Customer may choose one of their stored cards or decide pay with another card by manually entering the card details in the form and completes/confirms the payment.
• You will get the encrypted payment information when an enrolled card in Click to Pay is used or get a PAYONE pseudo card number when manual card is used.
• You will request pre/authorization to PAYONE to complete the payment.
   

enable Click to Pay in the new hosted tokenization form

Once you integrate the New Hosted Tokenization it is fairly simple to enable Click to Pay.

To configure Click to Pay, you have to include the Click to Pay configuration within the config parameter when invoking the getPaymentPage() method. 

             CTPConfig: {
                enableCTP: true,
                enableCustomerOnboarding: true,
                schemeConfig: {
                    merchantPresentationName: "PayoneC2P-00004"
                },
                transactionAmount: {
                    amount: "3123",
                    currencyCode: "USD"
                },
                uiConfig: {
                    buttonAndBadgeColor: "#000000",
                    buttonFilledHoverColor: "#464646",
                    buttonOutlinedHoverColor: "#f8f8f8",
                    buttonDisabledColor: "#909090",
                    cardItemActiveColor: "#f8f8f8",
                    buttonAndBadgeTextColor: "#ffffff",
                    linkTextColor: "#0054b6",
                    accentColor: "#0054b6",
                    fontFamily: "Nunito, sans-serif",
                    buttonAndInputRadius: "0.25rem",
                    cardItemRadius: "0.5rem",
                    buttonTextCase: "uppercase"
                },
            }
            }
     

Click to Pay configuration parameters

The parameters are defined in CTP Config section of the Hosted Tokenization configuration.  This section encompasses all configurations related to Click to Pay for various card schemes, including Mastercard and Visa. 

 Click to Pay Specific UI configuration

Example uiConfig object: Under this object we can only change the values of the properties.

{
    "buttonStyle": "FILLED",
    "buttonTextCase": "capitalize",
    "buttonAndBadgeColor": "#A16207",
    "buttonFilledHoverColor": "#854D0E",
    "buttonOutlinedHoverColor": "#D97706",
    "buttonDisabledColor": "#C4A264",
    "cardItemActiveColor": "#854D0E",
    "buttonAndBadgeTextColor": "#FFFFFF",
    "linkTextColor": "#7C4A32",
    "accentColor": "#854D0E",
    "fontFamily": "Tinos",
    "buttonAndInputRadius": "1rem",
    "cardItemRadius": "2rem"
}

Handling the Payment Token information

Once the Hosted Tokenization process is completed you will have to send the Payment Request to Server API containing token information. You will have to identify what payment clearing type to use based on the cardInputMode.  For the Click to Pay integration you need to supported cardInputmode parameter that is specific for Click to Pay. Depending on the cardInputmode you will request payment authorization either as Click to Pay or as standard card payment.

Please follow this decision making matrix: 

Sample responses for each mode: 

cardInputMode : ClickToPay 

Status code: 201, token: "string", cardDetails: {"cardholderName":"go***d ka**e","cardNumber":"518600XXXXXX1434","expiryDate":"1225","cardType":"MASTERCARD"}, cardInputMode: clickToPay 

cardInputMode : Manual

Status code: 201, token: "string", cardDetails: {"cardholderName":"govind","cardNumber":"439584XXXXXX0011","expiryDate":"1228","cardType":"VISA"}, cardInputMode: manual

cardInputMode : Register 

Status code: 201, token: "string", cardDetails: {"cardholderName":"govind","cardNumber":"439584XXXXXX0110","expiryDate":"1227","cardType":"VISA"}, cardInputMode: register

There is no big deviation between similar API Requests against PAYONE Server API.  Additionally the following parameter to be added to a typical payment request :  add_paydata[paymentcheckout_data] 

POST Request Pre- /Authorization

Host: api.pay1.de
Content-Type: application/x-www-form-urlencoded    

Payload

add_paydata[paymentcheckout_data]=FpFyA6zSGkZC[...]xi8xeXCNbpGBpvlNXfcang==
aid=12345
amount=1000
clearingtype=wlt
country=DE
currency=EUR
encoding=UTF-8
firstname=Demo
key=123456789abcdefghij
lastname=Dude
mid=12345
mode=live
portalid=123456
reference=013265464564654
request=preauthorization
wallettype=CTP

RESPONSE

status=REDIRECT
txid=123456789
userid=987654321

Payment flow for Click to Pay relies heavily on the standard Credit Card payment flow once the Click to Pay checkout session is complete and you received the encrypted payment information to be passed in a pre/authorization request to PAYONE.