Stripe payments with Visa Checkout
Warning
Visa plans to deprecate Visa Checkout in favor of Secure Remote Commerce, which delivers a unified online checkout experience that supports a number of card brands. There is no hard deadline for the migration at the moment; however, users of Visa Checkout should migrate their integrations as soon as possible and new merchants should not integrate Visa Checkout.
Visa Checkout is a third-party service that stores payment and shipping information for its users in order to streamline the checkout process. Instead of entering payment information on your checkout page, users can click the Visa Checkout button instead. Your Stripe integration receives a unique ID that it can use to create a charge against the payment information stored in the user’s Visa Checkout account.
Integrating the Visa Checkout button
To get started, generate your Visa Checkout API key in the Dashboard. There are two keys, a sandbox key that you can use in test mode, and a production key that works in live mode.
To initialize the button, add an onVisaCheckoutReady
function that invokes V.init
:
function onVisaCheckoutReady() { V.init({ apikey: '{{VISA_CHECKOUT_ID}}', paymentRequest:{ subtotal: '10.00', currencyCode: 'USD' }, settings: { displayName: 'My Website' } }); }
The Visa Checkout JavaScript SDK automatically invokes the onVisaCheckoutReady
function when it finishes loading. The paymentRequest
property accepted by V.init
requires the following parameters:
Parameter | Description |
---|---|
subtotal | The amount of the transaction, expressed in decimal format |
currencyCode | The currency in which to perform the transaction |
By default, American Express, MasterCard, Visa and Discover card brands are accepted, all shipping and billing countries are also enabled.
For more details about the V.init
function and the parameters that it accepts, refer to Visa’s documentation. There are optional paymentRequest
properties that support a range of other features, including promotions, discounts, and taxes. There are also optional settings
properties that allow you to control the shipping information options.
Completing the payment
When the user clicks the Visa Checkout button on your checkout page, it opens a lightbox where they can select an existing payment method from their account or input a new one. When the user completes the process, the Visa Checkout JavaScript SDK in the browser emits a payment.success
event with a unique ID that your application can use to complete the transaction.
The following code shows how to handle the payment.success
event and confirm the PaymentIntent you created at the beginning of the checkout flow. See accept a payment to learn how to manage your checkout flow using Payment Intents.
// PaymentIntent client secret passed from server-side. // See: https://stripe.com/docs/payments/accept-a-payment?platform=web // for more information on how to do this. const clientSecret = '{{CLIENT_SECRET}}'; V.on('payment.success', async (payment) => { const intent = await stripe.confirmCardPayment(clientSecret, { payment_method: { card: { visa_checkout: { callid: payment.callid, }, }, }, }); // Perform logic for payment completion here });
Testing Visa Checkout
To test your integration against Visa Checkout’s sandbox, create a new Visa Checkout user account during the checkout process on your website. Configure the account to use the test card number 4242 4242 4242 4242, a random three-digit CVC number, and any expiration date in the future. Complete the checkout process as normal. If everything worked correctly, Visa Checkout will redirect you back to your application, which should create the charge as expected.