Visa Checkout Guide

    Accept payments via Visa Checkout in your existing Stripe integration.

    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 use Visa Checkout on your website, add the following script tag to the end of your document's body tag:

    <script type="text/javascript" src="https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"></script>

    To display the Visa Checkout button, use the following image:

    <img alt="Visa Checkout" class="v-button" role="button" src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png">

    To use Visa Checkout on your website, add the following script tag to the end of your document's body tag:

    <script type="text/javascript" src="https://assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"></script>

    To display the Visa Checkout button, use the following image:

    <img alt="Visa Checkout" class="v-button" role="button" src="https://secure.checkout.visa.com/wallet-services-web/xo/button.png">

    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.

    Creating the charge

    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 event and send the received payment information back to your application:

    V.on("payment.success", async payment => {
      let response = await fetch("/charge", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(payment)
      });
    
      // Perform logic for payment completion here
    });
    

    In the /charge route handler, extract the ID from the request body and use it to create a source. Next, create a charge with the ID of the returned source. The following code example demonstrates how to create a Visa Checkout charge in Node.js with the Koa framework:

    router.post("/charge", koaBody(), async ctx => {
      let amount = 1000;
      let currency = "usd";
    
      let result = await stripe.sources.create({
        type: "card", currency, amount,
        card: {
          visa_checkout: {callid: ctx.request.body.callid}
        }
      });
    
      let charge = await stripe.charges.create({
        amount, currency,
        source: result.source.id
      });
    
      ctx.body = {success: true};
    });
    

    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 one of the test cards from the Visa documentation. 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.

    Questions?

    We're always happy to help with code or other questions you might have! Search our documentation, contact support, or connect with our sales team. You can also chat live with other developers in #stripe on freenode.

    Was this page helpful? Yes No

    Send

    Thank you for helping improve Stripe's documentation. If you need help or have any questions, please consider contacting support.