[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides integrating a new payment provider on vtex in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-guide)

[Integrating a new payment provider on VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex)

[Payment Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-provider-protocol)

[Payment Provider Protocol for Point of Sale (POS) - VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-ppp-applied-to-pos)

[Implementing a Payment Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-implementing-a-payment-provider)

[Payment Provider Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-provider-framework)

[Purchase Flows](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-purchase-flows)

[Payment App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-app)

[Payment Methods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-methods)

[Payment Provider Homologation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-provider-homologation)

[Antifraud Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/how-the-integration-protocol-between-vtex-and-antifraud-companies-works)

[PCI - DSS Compliance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-pci-dss-compliance)

[Secure Proxy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-secure-proxy)

[Split Payouts on Payment Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/split-payouts-on-payment-provider-protocol)

[Layout Development Guide for payment methods in Smart Checkout VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex)

[Custom Auto Capture Feature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/custom-auto-capture-feature)

[Pix: Instant Payments in Brazil](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-pix-instant-payments-in-brazil)

[PSE Payment Method](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/pse-payment-method)

[Google Pay: processing information for payment providers and anti-fraud](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/google-pay-processing-information-for-payment-providers-and-anti-fraud)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-guide)

[Integrating a new payment provider on VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex)

[Payment Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-provider-protocol)

[Payment Provider Protocol for Point of Sale (POS) - VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-ppp-applied-to-pos)

[Implementing a Payment Provider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-implementing-a-payment-provider)

[Payment Provider Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-provider-framework)

[Purchase Flows](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-purchase-flows)

[Payment App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-app)

[Payment Methods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-methods)

[Payment Provider Homologation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-payment-provider-homologation)

[Antifraud Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/how-the-integration-protocol-between-vtex-and-antifraud-companies-works)

[PCI - DSS Compliance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-pci-dss-compliance)

[Secure Proxy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-secure-proxy)

[Split Payouts on Payment Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/split-payouts-on-payment-provider-protocol)

[Layout Development Guide for payment methods in Smart Checkout VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex)

[Custom Auto Capture Feature](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/custom-auto-capture-feature)

[Pix: Instant Payments in Brazil](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-pix-instant-payments-in-brazil)

[PSE Payment Method](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/pse-payment-method)

[Google Pay: processing information for payment providers and anti-fraud](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/google-pay-processing-information-for-payment-providers-and-anti-fraud)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides)

Integration Guides

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/payments-integration-guide)

[Integrating a new payment provider on VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex)

Integrating a new payment provider on VTEX

This article is divided into steps that explain the integration flow for a new payment provider on VTEX. Before completing each step and moving on, make sure to check and understand the information in the related links, as well as any prerequisites and settings that need to be in place in the current step.

The integration flow of a new payment provider on VTEX has the following steps:

1. [Payment Provider Protocol - Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%231-payment-provider-protocol-overview)
2. [Defining the operation environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%232-defining-the-operation-environment)
3. [Selecting the infrastructure type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%233-selecting-the-infrastructure-type)
4. [Defining the purchase flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%234-defining-the-purchase-flow)
5. [Additional requirements and settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%235-additional-requirements-and-settings)
6. [Connector tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%236-connector-tests)
7. [Homologation and Go-live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%237-homologation-and-go-live)

The following flowchart shows the possible journeys within the integration process.

![](https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Integration-Guides/payments-integration-guide/new-payment-provider-flow.gif)

## 1\. Payment Provider Protocol - Overview

Payment service providers (PSP), or simply payment providers, are companies that support electronic transactions with different payment methods, such as credit cards or digital wallets.

To operate in the VTEX environment, payment providers need to be integrated through the Payment Provider Protocol (PPP). This protocol defines the necessary prerequisites and settings that the payment methods available in your connector need to have in order to work in VTEX stores.

To understand how the Payment Provider Protocol works and the routes used in the payment and authentication flows, see:

* [Payment Provider Protocol - Overview](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/payment-provider-protocol--RdsT2spdq80MMwwOeEq0m)
* [Payment Provider Protocol - API References](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol)

After making sure you meet the PPP implementation [prerequisites](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/payment-provider-protocol--RdsT2spdq80MMwwOeEq0m%23implementation-prerequisites), the next step is defining how your connector will work in the VTEX environment.

## 2\. Defining the operation environment

On VTEX, a payment connector can operate in three different contexts: ecommerce websites, physical stores, or both. Select the option that matches the operating characteristics of your connector.

### Operating payments on the ecommerce website only

A payment connector can handle purchases for all virtual stores within the VTEX ecosystem, whether they be national or international.

> To process sales in countries other than your home country, check if your payment system meets the financial regulations of every country where you wish to operate. In addition, you need to sign a local or global partnership agreement with VTEX. Learn more in [Become a VTEX partner](https://read.calvincode.net/reader?url=https://vtex.com/us-en/partner/).

### Operating payments in the physical stores only

For payment operations in physical stores, VTEX offers the VTEX Sales App solution. This app enables sales associates to offer a complete and customized in-person experience for each customer, tracking the purchase process from selecting the product to delivering the order.

> Connectors developed for VTEX Sales App also use the Payment Provider Protocol (PPP).

To learn more about VTEX Sales App, see:

* [VTEX Sales App - Getting started and setting up](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/instore-getting-started-and-setting-up--zav76TFEZlAjnyBVL5tRc/7fnnVlG3Kv1Tay9iagc5yf)
* [VTEX Sales App - Using the app](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/instore-using-the-app--4BYzQIwyOHvnmnCYQgLzdr/6cq4E1JCmA6vCvBCCtAgIM)
* [VTEX Sales App - Payments](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/instore-payments--43B4Nr7uZva5UdwWEt3PEy/2liigRors32hzqBNs2M1Oa)
* [Payment Provider Protocol applied to payments with POS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-ppp-applied-to-pos)

### Operating payments in both physical stores and ecommerce website

If you want to offer a payment experience in physical stores and on the ecommerce website, you will need to configure settings for both cases.

To learn more about this type of operation, in addition to the documentation references linked in previous sections, see [Unified Commerce Strategies](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/unified-commerce-strategies--3WGDRRhc3vf1MJb9zGncnv/2LGAiUnHES1enjHsfi8fI3).

> You can develop a single connector configured to work in both environments (physical stores and ecommerce websites). You do not have to create a connector for each type of operation.

## 3\. Selecting the infrastructure type

When implementing the payment connector on VTEX, you can use the internal infrastructure of your company or our low-code development platform, [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io).

### Developing with internal infrastructure

You can develop a connector using your internal infrastructure. In this case, you need to make sure that the architecture allows secure communication between you (payment provider) and the VTEX gateway.

To protect sensitive information, like credit card numbers, during transactions, you need to have the [PCI - DSS Compliance](https://read.calvincode.net/reader?url=https://www.pcisecuritystandards.org/document%5Flibrary/?document=pci%5Fdss) security certification or use Secure Proxy, the VTEX solution that replaces confidential information with encrypted tokens.

To learn more about how to develop the integration (middleware) and transfer sensitive payment information, see:

* [Implementing a Payment Provider - Middleware](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-implementing-a-payment-provider)
* [PCI - DSS Compliance - Developer Portal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-pci-dss-compliance)
* [Secure proxy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-secure-proxy)

### Developing with VTEX infrastructure (VTEX IO)

If you want to develop your connector using VTEX infrastructure, you can use our [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io), our proprietary development platform. VTEX IO offers the following advantages:

* Greater integration agility by reusing VTEX templates and clients.
* [Serverless](https://read.calvincode.net/reader?url=https://www.redhat.com/en/topics/cloud-native-apps/what-is-serverless) environment with no need to invest additional financial resources related to infrastructure, reliability, and security management.
* Simplified authentication, authorization, and configuration resources that are integrated with all other VTEX systems.

If you use our infrastructure, you can also use our VTEX IO boilerplate, **Payment Provider Framework (PPF)**, which makes creating the connector faster in comparison to using your own infrastructure. With PPF, you do not have to manually configure the API routes, response and request body default formats, and sensitive information transfer (such as credit card information).

To learn more about development using VTEX IO and how the Payment Provider Framework works, see:

* [What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io)
* [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)
* [Payment Provider Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-payment-provider-framework)

## 4\. Defining the purchase flow

A purchase flow represents the steps or actions that a customer takes to complete the payment of a purchase. On VTEX, the [available purchase flows](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-purchase-flows) are: transparent or custom (Payment App or Redirect). Select the option that matches the operating characteristics of your connector.

### Transparent

In the transparent purchase flow, the customer enters the payment information and places the order directly in the checkout of the VTEX store. This is the most widely used flow type because it allows completing all payment steps in the same environment, which improves the customer purchase experience.

To learn more about the transparent purchase flow, see [What is transparent checkout?](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-transparent-checkout--2Y4ECegUmcYUggmck2GOwe).

### Custom

If you do not want to use the native VTEX purchase flow (transparent), you have two options to create custom payment experiences for your customer: Payment App and Redirect.

#### Payment App

Payment App is an app created in [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io), which enables a payment provider to create a custom payment experience without having to redirect the customer to an external page, unlike the redirect purchase flow.

If your connector is being developed using [VTEX infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%23developing-with-vtex-infrastructure-vtex-io), you can implement Payment App in two different ways:

1. [Create a specific app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-developing-an-app) for Payment App.
2. Use the connector's app. In this case, you have to create a specific React folder for Payment App within the connector app.

> Connectors that only [operate payments in physical stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex%23operating-payments-in-the-physical-stores-only) are required to use Payment App as the default purchase flow.

To learn more, see [Payment App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-payment-app).

#### Redirect

In this flow, the customer selects the payment option in the VTEX store and is redirected to an external page to complete their payment information. After completing the fields and confirming the payment, the customer is redirected back to the order confirmation screen in the VTEX store.

> The redirect flow involves the most friction and the lowest purchase conversion rate, making it the least recommended flow.

To learn more about the redirect purchase flow, see [Purchase Flows - Redirect](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-purchase-flows%23redirect).

#### Layout modification (optional)

When you implement Payment App or Redirect in your connector, you can also create a non-interactive custom layout (using HTML and CSS) that will be displayed on VTEX Checkout.

To learn how to create a custom payment layout, see [Layout Development Guide for payment methods in Smart Checkout VTEX](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex).

### Payment provider and VTEX interactions in the purchase flow

In addition to defining the best purchase flow, you need to know the operation and communication patterns between your connector and the VTEX payment gateway. To learn more, see:

* [Payment flow - Operations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-purchase-flows%23operations-in-the-payment-flow)
* [Payment flow - Communication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-purchase-flows%23communication-in-the-payment-flow)

### Configuration flow information

The [configuration flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-implementing-a-payment-provider%23configuration-flow) has three endpoints ([Create Authorization Token](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/authorization/token), [Provider Authentication](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23get-/authorization/redirect), and [Get Credentials](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23get-/authorization/credentials)), designed to improve merchant experience when enabling your connector on the VTEX Admin.

This flow enables the merchant to authenticate in your connector through the VTEX Admin using the `appKey`, `appToken`, and `applicationId` as credentials. Also, you can use this resource to provide other authentication methods for the merchant, such as login on your platform or even an initial registration.

> Implementing a configuration flow is optional. It can be done during middleware creation when you develop the connector using [your own infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-implementing-a-payment-provider%23developing-with-internal-infrastructure) or with the [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-implementing-a-payment-provider%23developing-with-vtex-infrastructure-vtex-io).

## 5\. Additional requirements and settings

Depending on the payment method or features that your connector offers, you might need to meet specific requirements or configure additional settings.

* **Payment methods (ecommerce website)**
   * **Debit, credit, or co-branded cards**: Make sure that your connector has the [PCI - DSS Compliance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-pci-dss-compliance) certification. If you don't have or don't want to use that certification in your connector, you can implement [Secure Proxy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-secure-proxy).
* **Payment methods (physical store)**
   * **Direct credit sale and direct debit sale**: Make sure that both these payment methods were configured as described in [Payment Provider Protocol applied to payments with POS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-ppp-applied-to-pos%23payment-connector-pre-requisites).
* **Features**
   * **Split Payout**: This solution enables marketplaces to manage order amounts, and it divides your commission and the amount due to the seller. Learn more in:
         * [Split Payouts on Payment Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/split-payouts-on-payment-provider-protocol)
         * [Split Payment](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/split-payment--6k5JidhYRUxileNolY2VLx)
   * **Custom Auto Capture**: This solution enables the merchant to set a window for automatic capture after the payment is completed. Learn more in Custom Auto Capture Feature.
   * **Inbound Request**: URL directly connected between the VTEX gateway and the payment provider. Learn more in 6\. POST Inbound Request (BETA) in [Payment Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-implementing-a-payment-provider%23payment-flow).

## 6\. Connector Tests

After connector development is complete, you can use [Test Suite App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-payment-provider-homologation%23install-the-test-suite-app) to test the following routes:

* [Create Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments)
* [Cancel Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/cancellations)
* [Settle Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/settlements)
* [Refund Payment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payment-provider-protocol%23post-/payments/-paymentId-/refunds)

Learn more about Test Suite App tests in [Testing details](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/payment-provider-protocol--RdsT2spdq80MMwwOeEq0m%234-testing).

You can also access your test store to [simulate payment of an order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-payment-provider-framework%23placing-an-order-with-your-new-connector) before starting the connector homologation process on VTEX.

## 7\. Homologation and Go-live

After completing all the above stages, ensuring that all the necessary requirements and settings are in place, and getting positive test results, you need to request connector homologation by opening a [ticket](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/opening-tickets-to-vtex-support--16yOEqpO32UQYygSmMSSAM?locale=en) with VTEX support.

> The required SLA for homologation is 30 days, which may vary depending on any inconsistencies found in the connector development.

After the homologation process is completed, you will receive a confirmation message and your connector will be available for configuration to VTEX Admin merchants.

> If you want to increase the visibility of your connector in another channel, you can also publish your connector on the [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/). Learn more in [Making your connector available to everyone](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/payments-integration-payment-provider-framework%23making-your-connector-available-to-everyone) and [Submitting your app to the VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F87548049%3Fv%3D4%26w=64%26q=75)](https://github.com/ricardoaerobr)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/payments-integration-guide/integrating-a-new-payment-provider-on-vtex.md)

[Payments« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex//docs/guides/payments-integration-guide)[Payment Provider ProtocolNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex//docs/guides/payments-integration-payment-provider-protocol)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F87548049%3Fv%3D4%26w=64%26q=75)](https://github.com/ricardoaerobr)

ON THIS PAGE

[1\. Payment Provider Protocol - Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%231-payment-provider-protocol-overview)

[2\. Defining the operation environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%232-defining-the-operation-environment)

[Operating payments on the ecommerce website only](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23operating-payments-on-the-ecommerce-website-only)[Operating payments in the physical stores only](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23operating-payments-in-the-physical-stores-only)[Operating payments in both physical stores and ecommerce website](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23operating-payments-in-both-physical-stores-and-ecommerce-website)

[3\. Selecting the infrastructure type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%233-selecting-the-infrastructure-type)

[Developing with internal infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23developing-with-internal-infrastructure)[Developing with VTEX infrastructure (VTEX IO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23developing-with-vtex-infrastructure-vtex-io)

[4\. Defining the purchase flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%234-defining-the-purchase-flow)

[Transparent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23transparent)[Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23custom)[Payment provider and VTEX interactions in the purchase flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23payment-provider-and-vtex-interactions-in-the-purchase-flow)[Configuration flow information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23configuration-flow-information)

[5\. Additional requirements and settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%235-additional-requirements-and-settings)

[6\. Connector Tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%236-connector-tests)

[7\. Homologation and Go-live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%237-homologation-and-go-live)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Integration-Guides/payments-integration-guide/integrating-a-new-payment-provider-on-vtex.md)

Copy page

On this page

ON THIS PAGE

[1\. Payment Provider Protocol - Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%231-payment-provider-protocol-overview)

[2\. Defining the operation environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%232-defining-the-operation-environment)

[Operating payments on the ecommerce website only](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23operating-payments-on-the-ecommerce-website-only)[Operating payments in the physical stores only](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23operating-payments-in-the-physical-stores-only)[Operating payments in both physical stores and ecommerce website](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23operating-payments-in-both-physical-stores-and-ecommerce-website)

[3\. Selecting the infrastructure type](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%233-selecting-the-infrastructure-type)

[Developing with internal infrastructure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23developing-with-internal-infrastructure)[Developing with VTEX infrastructure (VTEX IO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23developing-with-vtex-infrastructure-vtex-io)

[4\. Defining the purchase flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%234-defining-the-purchase-flow)

[Transparent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23transparent)[Custom](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23custom)[Payment provider and VTEX interactions in the purchase flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23payment-provider-and-vtex-interactions-in-the-purchase-flow)[Configuration flow information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%23configuration-flow-information)

[5\. Additional requirements and settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%235-additional-requirements-and-settings)

[6\. Connector Tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%236-connector-tests)

[7\. Homologation and Go-live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/integrating-a-new-payment-provider-on-vtex/docs/guides/integrating-a-new-payment-provider-on-vtex%237-homologation-and-go-live)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex store components shippingsimulator in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/updates/release-notes)

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/updates/release-notes)

Shipping Simulator

The `shipping-simulator` block estimates the shipping fee based on a zip code input.

![{"base64":"  ","img":{"width":2854,"height":1440,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":572087,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-shippingsimulator-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-shippingsimulator-0.png)

## Configuration

1. Import the `vtex.store-components` app to your theme's dependencies in the `manifest.json` file as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `shipping-simulator` block to any child of the `store.product` template (Product Details Page template). For example:

`1

 "store.product": {

2

 "children": [

3

 "flex-layout.row#product",

4

 ]

5

 },

6

 "flex-layout.row#product": {

7

 "children": [

8

+ "shipping-simulator"

9

 ]

10

 },

`

1. Then, declare the `shipping-simulator` block using the props stated in the [Props](#props) table. For example:

`1

 "shipping-simulator": {

2

 "props": {

3

 "skuID": "342"

4

 }

5

 },

`

### Props

| Prop name             | Type    | Description                                                                                | Default value   |
| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| pricingMode           | enum    | If the product has gifts or attachments, for example, you can choose whether the shipping information will be grouped (grouped) by shipping type or showing the shipping prices for each of the items individually (individualItems). | individualItems |
| seller                | String  | ID of the product seller.                                                                                | \-              |
| shouldUpdateOrderForm | Boolean | Whether interacting with the simulator should update the shopper's address in their orderForm.                                                                                | true            |
| skuId                 | String  | ID of the current product SKU.                                                                                | \-              |

## Customization

To apply CSS customizations in this and other blocks, follow the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles                       |
| --------------------------------- |
| shippingContainer                 |
| shippingContainerLoader           |
| shippingCTA                       |
| shippingInputLoader               |
| shippingNoMessage                 |
| shippingTable                     |
| shippingTableBody                 |
| shippingTableCell                 |
| shippingTableCellDeliveryEstimate |
| shippingTableCellDeliveryName     |
| shippingTableCellDeliveryPrice    |
| shippingTableHead                 |
| shippingTableHeadDeliveryEstimate |
| shippingTableHeadDeliveryName     |
| shippingTableHeadDeliveryPrice    |
| shippingTableLabel                |
| shippingTableRadioBtn             |
| shippingTableRow                  |
| shippingZipcodeLabel              |
| shippingZipcodeLabelLoader        |

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/store-components/vtex-store-components-shippingsimulator.md)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides/vtex-store-components-shippingsimulator%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides/vtex-store-components-shippingsimulator%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides/vtex-store-components-shippingsimulator%23customization)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/store-components/vtex-store-components-shippingsimulator.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides/vtex-store-components-shippingsimulator%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides/vtex-store-components-shippingsimulator%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-store-components-shippingsimulator/docs/guides/vtex-store-components-shippingsimulator%23customization)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)