Search

Are you looking for test card numbers?

Would you like to contact support?

Payment-method icon

Visa Click to Pay

Learn how to accept Visa Click to Pay payments.

This is the icon for Visa Click to Pay.   Read more

Check out Visa Click to Pay's website to learn how shoppers pay with this wallet.

Visa Click to Pay (formerly Visa Checkout) is a wallet solution from Visa, where shoppers can add their card of choice if their issuer supports this payment method. They can then pay online or in-app without the need to fill out their card number or billing address information.

To integrate your website or app with Visa Click to Pay, follow the steps outlined in the Visa Click to Pay integration documentation. You can also follow a PDF version of the Visa Click to Pay documentation. When you register with Visa, they will also provide you with sandbox and production URLs.

Payment type Payment flow Countries Currencies Recurring Refunds Chargebacks
Wallet Redirect AU, BR, FR, GB, HK, IE, PL, SG, SP Multiple -white_check_mark- -white_check_mark- -white_check_mark-

Compatibility

For more information on Visa Click to Pay availability, see:

Before you begin

These instructions explain how to add Visa Click to Pay to your existing API-only integration. The API-only integration works the same way for all payment methods. If you haven't done this integration yet, refer to our API-only integration guide.

Before starting your Visa Click to Pay integration:

  1. Make sure that you have set up your back end implementation.
  2. Create a partner relationship with Adyen to process payments through Visa Click to Pay.
  3. Add Visa Click to Pay in your test Customer Area.

Build your payment form for Visa Click to Pay

Include Visa Click to Pay in the list of available payment methods. You don't need to collect any information from the shopper in your payment form.

If you are using the /paymentMethods to show available payment methods to the shopper, specify the following:

  • countryCode: Any country where Visa Click to Pay is available, for example, GB.
  • amount.currency: Currency of selected country, for example, GBP.

The response contains paymentMethod.type: visacheckout.

We provide logos for Visa Click to Pay which you can use on your payment form. For more information, refer to Downloading logos.

To integrate your website or app with the Visa Click to Pay SDK, follow the steps outlined in the Visa Click to Pay integration documentation.

Follow the Visa documentation to:

  1. Create a partner relationship with Adyen. You must create a partner relationship to process payments via the Visa Click to Pay SDK.
  2. Add the Visa Click to Pay button image.
  3. Add the Visa Click to Pay SDK.
  4. Initialise Visa Click to Pay using the onVisaCheckoutReady V.init function, using your API key.
  5. Configure the V.on event handler for receiving a payment.success response containing a Visa Click to Pay Call ID.
  6. Implement anti-clickjacking security requirements.
  7. Follow the user interface and branding guidelines for displaying the Visa Click to Pay button and acceptance marks.

When a user selects a payment and/or a shipping address from Visa Click to Pay, your server will receive a Visa Click to Pay Call ID. You need this value to make a payment. 

Make a payment

In your /payments request, specify:

  • paymentMethod.type: visacheckout
  • paymentMethod.visaCheckoutCallId: The Visa Click to Pay Call ID value. When your shopper selects a payment and/or a shipping address from Visa Click to Pay, you will receive a Visa Click to Pay Call ID.
curl https://checkout-test.adyen.com/v66/payments \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
     "amount": {
       "currency": "EUR",
       "value": 1000
     },
     "reference": "YOUR_ORDER_NUMBER",
     "paymentMethod": {
       "type": "visacheckout",
       "visaCheckoutCallId":"2413905121171559101"
     },
     "merchantAccount": "YOUR_MERCHANT_ACCOUNT"
}'
# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"
 
response = adyen.checkout.payments({
  :amount => {
    :currency => "EUR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "visacheckout",
    :visaCheckoutCallId => "2413905121171559101"
  },
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
})
// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "EUR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "visacheckout",
    "visaCheckoutCallId" => "2413905121171559101"
  ),
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);
#Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'EUR'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'visacheckout',
      'visaCheckoutCallId': '2413905121171559101'
   },
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
})
// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "EUR", value: 1000 },
    paymentMethod: {
        type: 'visacheckout',
        visaCheckoutCallId: '2413905121171559101'
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount
}).then(res => res);

The /payments response contains:

  • pspReference: Adyen's unique payment reference number.
  • resultCode: Authorised
/payments response
{
    "pspReference": "882573482151437A",
    "resultCode": "Authorised",
    "merchantReference": "YOUR_UNIQUE_REFERENCE"
}

Present the payment result

Use the resultCode from the /payments response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a notification webhook.

For Visa Click to Pay payments, you can receive the following resultCode values:

resultCode Description Action to take
Authorised The payment was successful. Inform the shopper that the payment has been successful.
If you are using manual capture, you also need to capture the payment.
Cancelled The shopper cancelled the payment. Ask the shopper whether they want to continue with the order, or ask them to select a different payment method.
Error There was an error when the payment was being processed. For more information, check the refusalReason field. Inform the shopper that there was an error processing their payment.
Refused The payment was refused. For more information, check the refusalReason field. Ask the shopper to try the payment again using a different payment method.
Additional resultCode values are possible in case of the 3D Secure authentication flow. For more information, refer to Result codes.

Recurring payments

To make recurring Visa Click to Pay payments, you first need to create a shopper token and then make subsequent recurring transactions with the token.

Refer to Tokenization for more information and detailed instructions.

Test and go live

You can only board real credit cards on Visa Click to Pay. If you send a test payment to the Adyen test platform, you will receive the following message: Refused (This is not a testCard).

See also