{"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-%28ocs%29?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](mailto: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\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](mailto: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_1/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\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](mailto: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\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=es-419) 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."}