{"section":"tutorials","requestedLocale":"en","requestedSlug":"setting-up-payments-with-stripev2","locale":"en","slug":"setting-up-payments-with-stripev2","path":"docs/en/tutorials/payments/payment-settings/setting-up-payments-with-stripev2.md","branch":"main","content":"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.\n\nFor more information about the VTEX integration with Stripe, you can also access the [Vinneren documentation](https://sites.google.com/vinneren.com.mx/documentacion-publica/documentacion-publica).\n\n## Operation modes\n\nThe StripeV2 provider can process payment transactions in VTEX stores in two different ways:\n\n- **VTEX Native Checkout Experience**: Can be used for credit cards, debit cards, and payment methods developed with the [Payment Provider Framework (PPF)](https://developers.vtex.com/docs/guides/payments-integration-payment-provider-framework). This option is recommended if you want to configure other payment gateways for different card brands or perform transactions using the native VTEX Checkout.\n\n- **VTEX with Stripe Payment Element Experience**: Payment application based on the [Stripe’s Optimized Checkout Suite (OCS)](https://support.stripe.com/questions/what-is-stripe-s-optimized-checkout-suite-(ocs)?locale=en-US). This option is recommended if you plan to use Stripe exclusively to process all card brands or if you want access to [Stripe Link](https://stripe.com/payments/link), a solution that offers one-click access to multiple payment methods.\n\n> ℹ️ The **VTEX with Stripe Payment Element Experience** uses the [Stripe Payment Elements Checkout](https://docs.stripe.com/payments/elements), providing access to current and future payment methods supported by Stripe. In this option, payment methods must be configured directly in the [Stripe Dashboard](https://dashboard.stripe.com/settings/payment_methods).\n\n> ℹ️ For information on the complete payment method list operated by each of the StripeV2's operating modes, please contact the [Vinneren](stripe-support@vinneren.com.mx) or [Stripe](https://support.stripe.com/contact/login) support teams.\n\nAfter determining which mode you want to use for your store, follow the instructions for one of the options below:\n\n- [Configuring VTEX Native Checkout Experience](#configuring-vtex-native-checkout-experience)\n- [Configuring VTEX with Stripe Payment Element Experience](#configuring-vtex-with-stripe-payment-element-experience)\n\n> ⚠️ 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.\n\n## Configuring VTEX Native Checkout Experience\n\n> ⚠️ The Stripe team needs to enable RawPan payments in your account. Please contact your [Stripe advisor](https://support.stripe.com/?locale=en-US). If this option is not enabled in your account, you will not be able to make successful transactions.\n\nPrerequisites:\n- VTEX user with administrator permissions\n- Active Stripe account\n\nTo use __VTEX Native Checkout Experience__ in your store, you need to:\n\n- [Install Stripe apps](#install-stripe-apps)\n- [Configure StripeV2 on VTEX](#configuring-stripev2-on-vtex)\n- [Configure payment conditions](#configuring-payment-conditions)\n\n### Install Stripe apps\n\nTo install the Stripe apps in your store, follow the steps below:\n\n1. Install the [VTEX Native Checkout (Stripe App)](https://marketplace.stripe.com/apps/vtex-native-checkout). During setup, make sure to enter your VTEX account name using only lowercase letters. For example, if your account name is \"MyStore\", enter it as \"mystore\".\n2. Go to [Stripe Dashboard](https://dashboard.stripe.com/login?redirect=%2Fapikeys), copy and save the Publishable and Secret keys. It is important that you copy and save the keys for the mode (test or live) in which you installed the VTEX Native Checkout App on Stripe.\n\n> ⚠️ Before installing the Payment Provider Framework app, check with the [Vinneren](stripe-support@vinneren.com.mx) or [Stripe](https://support.stripe.com/contact/login) support teams for the latest version of the app.\n\n3. In the [VTEX IO CLI](https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), run the following commands to install the Stripe apps:\n\n- **Payment Provider Framework**: `vtex install stripe.stripe-payments-provider`.\n- **Payment App**: `vtex install stripe.stripe-payment-app`.\n\n### Configuring StripeV2 on VTEX\n\nTo configure the StripeV2 integration on VTEX, follow the steps below:\n\n1. In the VTEX Admin, go to __Store Settings > Payments > Providers__, or type __Providers__ in the search bar at the top of the page.\n2. On the provider page, click the `New Provider` button´.\n3. Type __StripeV2__ in the search bar and click the provider's name.\n4. In __App key__, enter the publishable key saved in the previous steps.\n5. In __App token__, enter the secret key saved in the previous steps.\n6. In __Basic Information__, in the __Name__ option, enter __StripeV2NativeCheckout__ to quickly identify the integration.\n7. In __Provider fields__, in the __Mode__ option, select __Float__.\n8. In __Test Mode__, select __False__ if the mode is __Live__ or __True__ if the mode is __Test__.\n9. Click `Save`.\n\n### Configuring anti-fraud script\n\nTo configure the anti-fraud script for StripeV2 on VTEX, follow the steps below:\n\n1. Copy the script available on \"[Integrate script into your VTEX store](https://sites.google.com/vinneren.com.mx/documentacion-publica/native-checkout/english)\" section.\n2. In the VTEX Admin, go to __Store Settings > Storefront > Checkout > Code__.\n3. Click __New__ button and give it a descriptive name.\n4. Paste the content of the script you copied previously.\n5. Replace the \"pk_test\" information with your Stripe public key copied in the previous steps.\n6. Click `Save`.\n\n### Configuring payment conditions\n\nTo configure a payment condition for StripeV2 on VTEX, follow the steps below:\n\n1. In the VTEX Admin, go to __Store Settings > Payment > Settings__, or type __Settings__ in the search bar at the top of the page.\n2. In the __Payment Conditions__ tab, click the `+` button.\n3. Click the new payment method you want to use.\n4. On the configuration page, activate the condition by clicking __Status__.\n5. In __Process with provider__, select the __StripeV2NativeCheckout__ option.\n6. If you want to use an anti-fraud system, check the __Use anti-fraud solution__ option.\n7. If necessary, you can also [configure special payment conditions](/en/docs/tutorials/special-conditions).\n8. Click `Save`.\n\nIf you need more information on how to install the __VTEX Native Checkout Experience__, see the [Stripe documentation available on Vinneren](https://sites.google.com/vinneren.com.mx/documentacion-publica#h.nmryiar6zrqq).\n\n## Configuring VTEX with Stripe Payment Element Experience\n\nPrerequisites:\n- VTEX user with administrator permissions\n- Active Stripe account\n\nTo use __VTEX with Stripe Payment Element Experience__ in your store, you need to:\n\n- [Install Stripe apps](#install-stripe-apps-element-experience)\n- [Configure StripeV2 on VTEX](#configuring-stripev2-on-vtex-element-experience)\n- [Configure payment conditions](#configuring-payment-conditions-element-experience)\n- [Configure webhooks on your Stripe account](#configuring-webhooks-on-your-stripe-account-element-experience)\n\n### Install Stripe apps (Element Experience)\n\nTo install Stripe apps in your store, follow the steps below:\n\n1. Install the [VTEX Elements Checkout (Stripe App)](https://marketplace.stripe.com/apps/vtex-with-stripe-payment-element) to obtain required Stripe keys.\n2. 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.\n\n> ⚠️ Before installing the Payment Provider Framework app, check with the [Vinneren](stripe-support@vinneren.com.mx) or [Stripe](https://support.stripe.com/contact/login) support teams for the latest version of the app.\n\n3. In the [VTEX IO CLI](https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), run the following commands to install the Stripe apps:\n\n- **Payment Provider Framework**: `vtex install stripe.stripe-payments-provider`.\n- **Payment App**: `vtex install stripe.stripe-payment-app`.\n\n### Configuring StripeV2 on VTEX (Element Experience)\n\nTo configure the StripeV2 integration on VTEX, follow the steps below:\n\n1. In the VTEX Admin, go to __Store Settings > Payments > Providers__, or type __Providers__ in the search bar at the top of the page.\n2. On the provider page, click the `New Provider` button.\n3. Type __StripeV2__ in the search bar and click the provider's name.\n4. In __App key__, enter the publishable key that you obtained from the __VTEX Elements Checkout (Stripe App)__.\n5. In __App token__, enter the RAK key you obtained from the __VTEX Elements Checkout (Stripe App)__(restricted API key).\n6. In __Basic Information__, in the __Name__ option, enter __StripeV2Elements__ to quickly identify the integration. \n7. In __Provider fields__, in the __Mode__ option, select __Embedded__.\n8. In __Test Mode__, select __False__ if the mode is __Live__ or __True__ if the mode is __Test__.\n9. Click `Save`.\n10. Add Stripe keys in the Provider App settings, as follows:\na. Go to **Applications > My applications > Stripe Payment Provider**.\nb. Click **Settings**.\nc. In **Publishable Key**, enter your key starting with **pk_**.\nd. In **Secret Key**, enter your key starting with **rk_**.\ne. Click **Save**.\n\n### Configuring payment conditions (Element Experience)\n\nTo configure a payment condition for StripeV2 on VTEX, follow the steps below:\n\n1. In the VTEX Admin, go to __Store Settings > Payment > Settings__, or type __Settings__ in the search bar at the top of the page.\n2. In the __Payment Conditions__ tab, click the `+` button.\n3. Click the new payment method you want to use.\n4. On the configuration page, activate the condition by clicking __Status__.\n5. In __Process with provider__, select the __StripeV2Elements__ option.\n6. If you want to use an anti-fraud system, check the __Use anti-fraud solution__ option.\n7. If necessary, you can also [configure special payment conditions](/en/docs/tutorials/special-conditions).\n8. Click `Save`.\n\nIf you need more information on how to install __VTEX with Stripe Payment Element Experience__, see the [Stripe documentation available on Vinneren](https://sites.google.com/vinneren.com.mx/documentacion-publica#h.nmryiar6zrqq).\n\n### Configuring webhooks on your Stripe account (Element Experience)\n\nTo configure a webhook in your Stripe account, follow the steps below:\n\n1. Access the [dashboard of your Stripe account](https://dashboard.stripe.com/).\n2. Click the __Developers__ button.\n3. Click the __Webhooks__ tab.\n4. Click the __Add a connection point__ button.\n5. 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.\n6. Click __+ Select events__.\n7. Click the categories and select the following events:\n- **payment_intent.payment_failed**\n- **payment_method.canceled**\n- **payment_intent.succeeded**\n- **payment_method.attached**\n\n8. Click __Add events__.\n9. Click the __Add Connection Point__ button.\n\n## Configuring payment with Google Pay on StripeV2 (optional)\n\nThe StripeV2 provider allows you to process payments with Google Pay. To configure Google Pay in your store, follow the steps below:\n\n1. If you have already completed the steps to install [VTEX Elements](#configuring-vtex-with-stripe-payment-element-experience), please proceed to Step 13.\n2. Install the [VTEX Elements Checkout (Stripe App)](https://marketplace.stripe.com/apps/vtex-with-stripe-payment-element) to obtain required Stripe keys.\n3. 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.\n4. In the VTEX Admin, go to __Store Settings > Payments > Providers__, or type __Providers__ in the search bar at the top of the page.\n5. On the provider page, click the `New Provider` button.\n6. Type __StripeV2__ in the search bar and click the provider's name.\n7. In __Basic Information__, in the __Name__ option, enter __StripeV2Elements__ to quickly identify the integration.\n8. In __App key__, enter the publishable key that you obtained from the __VTEX Elements Checkout (Stripe App)__.\n9. In __App token__, enter the RAK key you obtained from the __VTEX Elements Checkout (Stripe App)__(restricted API key).\n10. In __Provider fields__, in the __Mode__ option, select __Embedded__.\n11. In __Test Mode__, select __False__ if the mode is __Live__ or __True__ if the mode is __Test__.\n12. Click `Save`.\n13. In the VTEX Admin, go to __Store Settings > Payment > Settings__, or type __Settings__ in the search bar at the top of the page.\n14. In the __Payment Conditions__ tab, click the `+` button.\n15. Click the __Google Pay__ option.\n16. On the configuration page, activate the condition by clicking __Status__.\n17. In __Process with provider__, select the __StripeV2Elements__ option.\n18. Click `Save`.\n\nAfter completing these steps, Google Pay will display at the store's checkout as one of the available payment methods.\n\n## Configuring payment with Apple Pay on StripeV2 (optional)\n\nThe StripeV2 provider allows you to process payments with Apple Pay. To configure Apple Pay in your store, follow the steps below:\n\n1. If you have already completed the steps to install [VTEX Elements](#configuring-vtex-with-stripe-payment-element-experience), please proceed to Step 13.\n2. Install the [VTEX Elements Checkout (Stripe App)](https://marketplace.stripe.com/apps/vtex-with-stripe-payment-element) to obtain required Stripe keys.\n3. 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.\n4. In the VTEX Admin, go to __Store Settings > Payments > Providers__, or type __Providers__ in the search bar at the top of the page.\n5. On the provider page, click the `New Provider` button.\n6. Type __StripeV2__ in the search bar and click the provider's name.\n7. In __Basic Information__, in the __Name__ option, enter __StripeV2Elements__ to quickly identify the integration.\n8. In __App key__, enter the publishable key that you obtained from the __VTEX Elements Checkout (Stripe App)__.\n9. In __App token__, enter the RAK key you obtained from the __VTEX Elements Checkout (Stripe App)__(restricted API key).\n10. In __Provider fields__, in the __Mode__ option, select __Embedded__.\n11. In __Test Mode__, select __False__ if the mode is __Live__ or __True__ if the mode is __Test__.\n12. Click `Save`.\n13. Access the [dashboard of your Stripe account](https://dashboard.stripe.com/) in the payment settings section.\n14. In __Settings__, click __Payment Methods__.\n15. Click __Apple Pay > Set Up__.\n16. Click __Add to New Domain__ button.\n17. Enter the public domain of your store's website.\n18. Click __Add__.\n19. Perform the actions described in [Stripe documentation](https://docs.stripe.com/payments/payment-methods/pmd-registration?dashboard-or-api=dashboard#verify-domain-with-apple) and then click __Download the domain association file__.\n20. 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.\n21. Enter the previously saved information in the field __Enter your Apple App Key__.\n22. Click `Save`.\n23. In the VTEX Admin, go to __Store Settings > Payment > Settings__, or type __Settings__ in the search bar at the top of the page.\n24. In the __Payment Conditions__ tab, click the `+` button.\n25. Click __Apple Pay__.\n26. On the configuration page, activate the condition by clicking __Status__.\n27. In __Process with provider__, select the __StripeV2__ option.\n28. If you want to use an anti-fraud system, check the __Use anti-fraud solution__ option.\n29. Indicate whether you want to process payments in full or in installments.\n30. If necessary, you can also [configure special payment conditions](/en/docs/tutorials/special-conditions).\n31. Click `Save`.\n\nAfter completing these steps, Apple Pay will display at the store's checkout as one of the available payment methods.\n\n## Configuring installment terms without interest (MSI) (optional)\n\n> ⚠️ The interest-free installment payment condition (**MSI - Meses Sin Intereses**) is only available on Stripe for accounts based in Mexico.  \n\n__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:\n\n### Configuring MSI in VTEX Native Checkout Experience\n\n1. Create a [Stripe](https://stripe.com/) account based in Mexico configured with the MXN currency.\n2. In the VTEX Admin, go to __Store Settings > Payment > Settings__, or type __Settings__ in the search bar at the top of the page.\n3. Click one of the available payment methods that process payments with __MSI__ (Visa, Amex, and Mastercard cards).\n4. On the payment method page, [configure the MSI conditions](/en/docs/tutorials/how-to-configure-payment-conditions#installments-without-interest) as desired.\n5. In your Stripe dashboard, [configure the MSI conditions](https://support.stripe.com/questions/c%C3%B3mo-configurar-meses-sin-intereses-%28msi%29-en-tu-cuenta-stripe?locale=es-419) using the same information as in the VTEX configuration (Step 4).\n\n> ⚠️ If the information entered in steps 4 and 5 differs, the MSI condition may not work correctly.  \n\n### Configuring MSI in VTEX with Stripe Payment Element Experience mode\n\n1. Create a [Stripe](https://stripe.com/) account based in Mexico configured with the MXN currency.\n2. [Configure the MSI conditions](https://support.stripe.com/questions/c%C3%B3mo-configurar-meses-sin-intereses-%28msi%29-en-tu-cuenta-stripe?locale=en-US) in the dashboard of your Stripe account.\n3. Contact your Stripe executive or the [Stripe support](https://stripe.com/mx/contact) team to request activation of this payment condition for your store."}