Menu
Feedback
Start here
Tutorials


Tutorials
Payment Settings
Setting up payments with StripeV2
11 min read

At VTEX, you can integrate with the payment provider StripeV2. Through this provider, your store can offer several payment methods, such as Visa, American Express, Diners, Elo, Hipercard, Mastercard, BankInvoice, Stripe, Google Pay, Apple Pay, OXXO, Discover, Affirm, Klarna, ZIP, BLIK, Ideal, SPEI, Multibanco, Afterpay, Bancontact, EPS, FPX, Giropay, and P24.

For more information about the VTEX integration with Stripe, you can also access the Vinneren documentation.

Operation modes

The StripeV2 provider can process payment transactions in VTEX stores in two different ways:

  • VTEX Native Checkout Experience: Can be used for credit cards, debit cards, and payment methods developed with the Payment Provider Framework (PPF). This option is recommended if you want to configure other payment gateways for different card brands or perform transactions using the native VTEX Checkout.

  • VTEX with Stripe Payment Element Experience: Payment application based on the Stripe’s Optimized Checkout Suite (OCS). This option is recommended if you plan to use Stripe exclusively to process all card brands or if you want access to Stripe Link, a solution that offers one-click access to multiple payment methods.

The VTEX with Stripe Payment Element Experience uses the Stripe Payment Elements Checkout, providing access to current and future payment methods supported by Stripe. In this option, payment methods must be configured directly in the Stripe Dashboard.

For information on the complete payment method list operated by each of the StripeV2's operating modes, please contact the Vinneren or Stripe support teams.

After determining which mode you want to use for your store, follow the instructions for one of the options below:

Settings configured in an environment external to VTEX may be discontinued or modified without prior notice. Please check your Stripe account for the latest information.

Configuring VTEX Native Checkout Experience

The Stripe team needs to enable RawPan payments in your account. Please contact your Stripe advisor. If this option is not enabled in your account, you will not be able to make successful transactions.

Prerequisites:

  • VTEX user with administrator permissions
  • Active Stripe account

To use VTEX Native Checkout Experience in your store, you need to:

Install Stripe apps

To install the Stripe apps in your store, follow the steps below:

Configuring StripeV2 on VTEX

To configure the StripeV2 integration on VTEX, follow the steps below:

  1. In the VTEX Admin, go to Store Settings > Payments > Providers, or type Providers in the search bar at the top of the page.
  2. On the provider page, click the New Provider button´.
  3. Type StripeV2 in the search bar and click the provider's name.
  4. In App key, enter the publishable key saved in the previous steps.
  5. In App token, enter the secret key saved in the previous steps.
  6. In Basic Information, in the Name option, enter StripeV2NativeCheckout to quickly identify the integration.
  7. In Provider fields, in the Mode option, select Float.
  8. In Test Mode, select False if the mode is Live or True if the mode is Test.
  9. Click Save.

Configuring anti-fraud script

To configure the anti-fraud script for StripeV2 on VTEX, follow the steps below:

  1. Copy the script available on "Integrate script into your VTEX store" section.
  2. In the VTEX Admin, go to Store Settings > Storefront > Checkout > Code.
  3. Click New button and give it a descriptive name.
  4. Paste the content of the script you copied previously.
  5. Replace the "pk_test" information with your Stripe public key copied in the previous steps.
  6. Click Save.

Configuring payment conditions

To configure a payment condition for StripeV2 on VTEX, follow the steps below:

  1. In the VTEX Admin, go to Store Settings > Payment > Settings, or type Settings in the search bar at the top of the page.
  2. In the Payment Conditions tab, click the + button.
  3. Click the new payment method you want to use.
  4. On the configuration page, activate the condition by clicking Status.
  5. In Process with provider, select the StripeV2NativeCheckout option.
  6. If you want to use an anti-fraud system, check the Use anti-fraud solution option.
  7. If necessary, you can also configure special payment conditions.
  8. Click Save.

If you need more information on how to install the VTEX Native Checkout Experience, see the Stripe documentation available on Vinneren.

Configuring VTEX with Stripe Payment Element Experience

Prerequisites:

  • VTEX user with administrator permissions
  • Active Stripe account

To use VTEX with Stripe Payment Element Experience in your store, you need to:

Install Stripe apps

To install Stripe apps in your store, follow the steps below:

Configuring StripeV2 on VTEX

To configure the StripeV2 integration on VTEX, follow the steps below:

  1. In the VTEX Admin, go to Store Settings > Payments > Providers, or type Providers in the search bar at the top of the page.
  2. On the provider page, click the New Provider button.
  3. Type StripeV2 in the search bar and click the provider's name.
  4. In App key, enter the publishable key that you obtained from the VTEX Elements Checkout (Stripe App).
  5. In App token, enter the RAK key you obtained from the VTEX Elements Checkout (Stripe App)(restricted API key).
  6. In Basic Information, in the Name option, enter StripeV2Elements to quickly identify the integration.
  7. In Provider fields, in the Mode option, select Embedded.
  8. In Test Mode, select False if the mode is Live or True if the mode is Test.
  9. Click Save.
  10. Add Stripe keys in the Provider App settings, as follows:

Configuring payment conditions

To configure a payment condition for StripeV2 on VTEX, follow the steps below:

  1. In the VTEX Admin, go to Store Settings > Payment > Settings, or type Settings in the search bar at the top of the page.
  2. In the Payment Conditions tab, click the + button.
  3. Click the new payment method you want to use.
  4. On the configuration page, activate the condition by clicking Status.
  5. In Process with provider, select the StripeV2Elements option.
  6. If you want to use an anti-fraud system, check the Use anti-fraud solution option.
  7. If necessary, you can also configure special payment conditions.
  8. Click Save.

If you need more information on how to install VTEX with Stripe Payment Element Experience, see the Stripe documentation available on Vinneren.

Configuring webhooks on your Stripe account

To configure a webhook in your Stripe account, follow the steps below:

  1. Access the dashboard of your Stripe account.
  2. Click the Developers button.
  3. Click the Webhooks tab.
  4. Click the Add a connection point button.
  5. In the Connection point URL field, enter the URL of your VTEX store endpoint in the following format: https://{{account}}.myvtex.com/_v/stripe.payment-provider-connector/v0/webhook. Replace {{account}} with the name of your VTEX account name.
  6. Click + Select events.
  7. Click the categories and select the following events:
  1. Click Add events.
  2. Click the Add Connection Point button.

Configuring payment with Google Pay on StripeV2 (optional)

The StripeV2 provider allows you to process payments with Google Pay. To configure Google Pay in your store, follow the steps below:

  1. If you have already completed the steps to install VTEX Elements, please proceed to Step 13.
  2. Install the VTEX Elements Checkout (Stripe App) to obtain required Stripe keys.
  3. Once the installation is complete, the Publishable Key (pk) and Restricted Key (rk) will be displayed. Copy and save them, as they will be used later.
  4. In the VTEX Admin, go to Store Settings > Payments > Providers, or type Providers in the search bar at the top of the page.
  5. On the provider page, click the New Provider button.
  6. Type StripeV2 in the search bar and click the provider's name.
  7. In Basic Information, in the Name option, enter StripeV2Elements to quickly identify the integration.
  8. In App key, enter the publishable key that you obtained from the VTEX Elements Checkout (Stripe App).
  9. In App token, enter the RAK key you obtained from the VTEX Elements Checkout (Stripe App)(restricted API key).
  10. In Provider fields, in the Mode option, select Embedded.
  11. In Test Mode, select False if the mode is Live or True if the mode is Test.
  12. Click Save.
  13. In the VTEX Admin, go to Store Settings > Payment > Settings, or type Settings in the search bar at the top of the page.
  14. In the Payment Conditions tab, click the + button.
  15. Click the Google Pay option.
  16. On the configuration page, activate the condition by clicking Status.
  17. In Process with provider, select the StripeV2Elements option.
  18. Click Save.

After completing these steps, Google Pay will display at the store's checkout as one of the available payment methods.

Configuring payment with Apple Pay on StripeV2 (optional)

The StripeV2 provider allows you to process payments with Apple Pay. To configure Apple Pay in your store, follow the steps below:

  1. If you have already completed the steps to install VTEX Elements, please proceed to Step 13.
  2. Install the VTEX Elements Checkout (Stripe App) to obtain required Stripe keys.
  3. Once the installation is complete, the Publishable Key (pk) and Restricted Key (rk) will be displayed. Copy and save them, as they will be used later.
  4. In the VTEX Admin, go to Store Settings > Payments > Providers, or type Providers in the search bar at the top of the page.
  5. On the provider page, click the New Provider button.
  6. Type StripeV2 in the search bar and click the provider's name.
  7. In Basic Information, in the Name option, enter StripeV2Elements to quickly identify the integration.
  8. In App key, enter the publishable key that you obtained from the VTEX Elements Checkout (Stripe App).
  9. In App token, enter the RAK key you obtained from the VTEX Elements Checkout (Stripe App)(restricted API key).
  10. In Provider fields, in the Mode option, select Embedded.
  11. In Test Mode, select False if the mode is Live or True if the mode is Test.
  12. Click Save.
  13. Access the dashboard of your Stripe account in the payment settings section.
  14. In Settings, click Payment Methods.
  15. Click Apple Pay > Set Up.
  16. Click Add to New Domain button.
  17. Enter the public domain of your store's website.
  18. Click Add.
  19. Perform the actions described in Stripe documentation and then click Download the domain association file.
  20. After getting the file, save the information and access the following URL https://{{account}}.myvtex.com/_v/stripe.paid-provider/v0/registerApplePay. Replace {{account}} with the name of your VTEX account.
  21. Enter the previously saved information in the field Enter your Apple App Key.
  22. Click Save.
  23. In the VTEX Admin, go to Store Settings > Payment > Settings, or type Settings in the search bar at the top of the page.
  24. In the Payment Conditions tab, click the + button.
  25. Click Apple Pay.
  26. On the configuration page, activate the condition by clicking Status.
  27. In Process with provider, select the StripeV2 option.
  28. If you want to use an anti-fraud system, check the Use anti-fraud solution option.
  29. Indicate whether you want to process payments in full or in installments.
  30. If necessary, you can also configure special payment conditions.
  31. Click Save.

After completing these steps, Apple Pay will display at the store's checkout as one of the available payment methods.

Configuring installment terms without interest (MSI) (optional)

The interest-free installment payment condition (MSI - Meses Sin Intereses) is only available on Stripe for accounts based in Mexico.

MSI can be configured for both VTEX Native Checkout experience and VTEX with Stripe Payment Element Experience. To configure it, follow the steps below based on the operating mode used in your store:

Configuring MSI in VTEX Native Checkout Experience

  1. Create a Stripe account based in Mexico configured with the MXN currency.
  2. In the VTEX Admin, go to Store Settings > Payment > Settings, or type Settings in the search bar at the top of the page.
  3. Click one of the available payment methods that process payments with MSI (Visa, Amex, and Mastercard cards).
  4. On the payment method page, configure the MSI conditions as desired.
  5. In your Stripe dashboard, configure the MSI conditions using the same information as in the VTEX configuration (Step 4).

If the information entered in steps 4 and 5 differs, the MSI condition may not work correctly.

Configuring MSI in VTEX with Stripe Payment Element Experience mode

  1. Create a Stripe account based in Mexico configured with the MXN currency.
  2. Configure the MSI conditions in the dashboard of your Stripe account.
  3. Contact your Stripe executive or the Stripe support team to request activation of this payment condition for your store.
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Setting up payments with Store Card (cobranded)
« Previous
Setting up payments with TiendaCrypto
Next »
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX Community
Join our community
Request VTEX support
For personalized assistance, contact our experts
Open a support ticket
GitHubDeveloper PortalCommunityFeedback