[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 io documentation displaying asynchronous prices 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-io-documentation-displaying-asynchronous-prices/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/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-io-documentation-displaying-asynchronous-prices/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/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-io-documentation-displaying-asynchronous-prices/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/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-io-documentation-displaying-asynchronous-prices/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-managing-performance)

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

[Getting started with Lighthouse performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-getting-started-with-lighthouse)

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-optimizing-image-rendering)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-dealing-with-events)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-managing-performance)

[Deactivating the VTEX IO native service worker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-deactivating-the-vtex-io-native-service-worker)

[Debugging performance issues](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-debugging-performance-issues)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

[Enabling the Order Form optimization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-enabling-order-form-optimization)

[Getting started with Lighthouse performance audit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-getting-started-with-lighthouse)

[Enabling performance settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-enabling-performance-settings)

[Tracking changes in Lighthouse performance score](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-tracking-changes-in-lighthouse-performance-score)

[Lazy loading components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-using-the-fold-blocks)

[Optimizing image rendering](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-optimizing-image-rendering)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/store-framework-managing-performance)

[Displaying asynchronous prices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-displaying-asynchronous-prices)

Displaying asynchronous prices

When aiming to improve user experience, displaying the most up-to-date product prices is essential. However, fetching the latest prices from your store’s database for every product rendered on the page can significantly increase response time.

A more efficient solution is to fetch product prices asynchronously on the client side. This approach reduces page load times while still ensuring that users see accurate prices.

> Asynchronous prices do not mean outdated. They are product prices stored in the browser cache according to the user navigation. If your store does not routinely update product prices, it is strongly recommended to display asynchronous prices instead.

![{"base64":"  ","img":{"width":250,"height":511,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":36523,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-displaying-asynchronous-prices-0.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-displaying-asynchronous-prices-0.gif)

Follow the steps below to configure asynchronous prices and improve your store's performance.

## Instructions

1. Set the `simulationBehavior` prop (from the [Search Result](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-search-result/) app) to `skip` to ensure that your store is not fetching the price data on the server side:
`1
"store.search": {
2
 "blocks": [
3
 "search-result-layout"
4
 ],
5
 "props": {
6
 "context": {
7
+ "simulationBehavior": "skip"
8
 }
9
 }
10
},
`
2. Add the [Product Summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary/) and the [Product Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-price/) apps as dependencies in your theme's `manifest.json` file:
manifest.json
`1
"dependencies": {
2
 "vtex.product-summary": "2.x",
3
 "vtex.product-price": "1.x"
4
}
`
3. Add the `priceBehavior` prop to the [product-summary.shelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary-productsummaryshelf) block and set its value to `async`:
`1
"product-summary.shelf": {
2
 "props": {
3
+ "priceBehavior": "async"
4
 },
5
 "children": [
6
 // other children
7
 "product-list-price#summary",
8
 "flex-layout.row#selling-price-savings",
9
 "product-installments#summary",
10
 "add-to-cart-button",
11
 ]
12
}
`
4. Wrap the all price blocks under the `product-price-suspense` block (from the [Product Prices app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-price/)):
`1
{
2
 "product-summary.shelf": {
3
 "props": {
4
 "priceBehavior": "async"
5
 },
6
 "children": [
7
 // other children
8
- "product-list-price#summary",
9
- "flex-layout.row#selling-price-savings",
10
- "product-installments#summary",
11
- "add-to-cart-button",
12
+ "product-price-suspense"
13
 ]
14
 },
15
+ "product-price-suspense": {
16
+ "children": [
17
+ "product-list-price#summary",
18
+ "flex-layout.row#selling-price-savings",
19
+ "product-installments#summary",
20
+ "add-to-cart-button"
21
+ ]
22
+ }
23
}
`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/_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/Storefront-Guides/boosting-performance/vtex-io-documentation-displaying-asynchronous-prices.md)

[Debugging performance issues« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices//docs/guides/vtex-io-documentation-debugging-performance-issues)[Enabling the Order Form optimizationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices//docs/guides/vtex-io-documentation-enabling-order-form-optimization)

Contributors

1

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

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-displaying-asynchronous-prices%23instructions)

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/Storefront-Guides/boosting-performance/vtex-io-documentation-displaying-asynchronous-prices.md)

Copy page

On this page

ON THIS PAGE

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-displaying-asynchronous-prices/docs/guides/vtex-io-documentation-displaying-asynchronous-prices%23instructions)

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] How do I use the VTEX product kit app? Provide documentation and configuration details.

[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/apps/vtex.product-kit/docs/guides)

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/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/apps/vtex.product-kit/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/guides/vtex-io-deprecated-apps)

---

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

VTEX Product Kit

Official extension

Version: 1.10.2

Latest version: 1.10.2

![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNoYGD6v3v+/6ask37WACanBhm9KoMJAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Deprecated-red","width":73,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Deprecated-red)

> _**The Product Kit app has been deprecated.** Although support for this app is still granted by VTEX, we strongly recommend you to update your store theme in order to keep up with the framework's evolution!_

[![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

## Description

The VTEX product kit app shows two or more products as a kit. Usually these products are sold together and offer a discount. This app is used by store theme.

:loudspeaker: **Disclaimer:** Don't fork this project, use, contribute, or open issue with your feature request.

## Release schedule

| Release | Status              | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
| ------- | ------------------- | --------------- | --------------------- | ----------- | ------------------- |
| \[1.x\] | **Current Release** | 2018-11-05      | 2.x                   |             |                     |
| \[0.x\] | **Maintenance LTS** | 2018-07-06      | 2018-11-05            | March 2019  | 1.x                 |

See our [LTS policy](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/awesome-io%23lts-policy) for more information.

## Table of Contents

* [Usage](#usage)
   * [Blocks API](#blocks-api)
         * [Configuration](#configuration)
   * [Styles API](#styles-api)
         * [CSS namespaces](#css-namespaces)
* [Troubleshooting](#troubleshooting)
* [Contributing](#contributing)
* [Tests](#tests)

## Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder [click here.](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/understanding-storebuilder-and-stylesbuilder%23structuring-and-configuring-our-store-with-object-object)

We add the product-kit as a block in our [Store](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store/blob/master/store/interfaces.json).

To configure or customize this app, you need to import it in your dependencies in `manifest.json`.

`1

 dependencies: {

2

 "vtex.product-kit": "1.x"

3

 }

`

Then, add `product-kit` block into our app theme as we do in our [Store theme app](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme/blob/master/store/blocks.json).

Now, you can change the behavior of the `product-kit` block. See an example of how to configure:

`1

"product-kit": {

2

 "blocks": [

3

 "product-summary"

4

 ],

5

 "props":{

6

 "showArrows": true,

7

 "nextArrow": "next",

8

 "prevArrow": "prev",

9

 "showDots": true,

10

 "dots": "dots",

11

 "showListPrice": true,

12

 "showLabel": true,

13

 "showInstallments": true,

14

 "showBadge": true,

15

 "badgeText": "badge",

16

 "showCollections": true,

17

 "allowSwap": true,

18

 "allowRemoval": true,

19

 }

20

 }

`

### Blocks API

This app has an interface that describes what rules must be implemented by a block when you want to use the product kit.

`1

 "product-kit": {

2

 "required": [

3

 "product-summary"

4

 ],

5

 "component": "index"

6

 }

7

}

`

The product kit has as a required block the `product-summary`. So, any product kit block implementation created must add a product-summary as a block that is inside of product kit. (Similarly, `product-summary` has its own inner block structure that can be configured. There is a link to its API in the next section.)

### Configuration

Through the Storefront you can change the behavior and interface of `ProductKit`. But, you can also make adjusts in your theme app, like Store does.

| Prop name        | Type    | Description                            | Default Value                            |
| ---------------- | ------- | -------------------------------------- | ---------------------------------------- |
| showArrows       | Boolean | Show or not the arrows                 | true                                     |
| nextArrow        | String  | Next arrow icon                        | ''                                       |
| prevArrow        | String  | Previous arrow icon                    | ''                                       |
| showDots         | Boolean | Show or not the slider dots            | true                                     |
| dots             | String  | Slider dots icon                       | ''                                       |
| showListPrice    | Boolean | Show or not the list price             | true                                     |
| showLabels       | Boolean | Show or not the labels "from" and "to" | false                                    |
| showInstallments | Boolean | Show or not the installments           | false                                    |
| showBadge        | Boolean | Show or not the discount badge         | false                                    |
| badgeText        | String  | Text of the discount badge             | Badge Text/Texto de badge/Texto da badge |
| showCollections  | Boolean | Show or not the collections badges     | true                                     |
| allowSwap        | Boolean | Allow or not the item swap             | true                                     |
| allowRemoval     | Boolean | Allow or not the item removal          | true                                     |

Also, you can configure the product summary that is defined on product-kit. See [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/product-summary/blob/master/README.md%23configuration) the Product Summary API.

### Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the `styles` builder and create an app styling CSS file.

1. Add the `styles` builder to your `manifest.json`:

`1

 "builders": {

2

 "styles": "1.x"

3

 }

`

1. Create a file called `vtex.product-kit.css` inside the `styles/css` folder. Add your custom styles:

`1

.container {

2

 margin-top: 10px;

3

}

`

#### CSS namespaces

Below, we describe the namespaces that are define in the `ProductKit`.

| Class name    | Description                                                                                | Component Source                                            |
| ------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| container     | A wrapper that envolves all the elements of the product kit, responsible for the main margins and paddings | [ProductKitContent](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/react/components/ProductKitContent.js) |
| listContainer | The container for the products and final prices                                                            | [index](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/react/index.js)                                    |
| listDetails   | The container for the total price of the kit                                                               | [ListDetails](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/react/components/ProductKitDetails.js)       |
| item          | The container of one product                                                                               | [ProductKitItem](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/react/components/ProductKitItem.js)       |

## Troubleshooting

You can check if others are passing through similar issues [here](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/product-kit/issues). Also feel free to [open issues](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/product-kit/issues/new) or contribute with pull requests.

## Contributing

Check it out [how to contribute](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/awesome-io%23contributing) with this project.

## Tests

To execute our tests go to `react/` folder and run `yarn test`

### Travis CI

[![{"base64":"  ","img":{"width":98,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":730,"url":"https://api.travis-ci.com/vtex-apps/product-kit.svg?branch=master"}}](https://read.calvincode.net/reader?url=https://travis-ci.org/vtex-apps/product-kit.svg?branch=master)](https://travis-ci.org/vtex-apps/product-kit) [![{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGMQERKSVFaZHxv4//RaABF7BF2mRdqxAAAAAElFTkSuQmCC","img":{"src":"https://coveralls.io/repos/github/vtex-apps/product-kit/badge.svg?branch=master","width":99,"height":20,"type":"svg"}}](https://read.calvincode.net/reader?url=https://coveralls.io/repos/github/vtex-apps/product-kit/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/product-kit?branch=master)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23description)

[Release schedule](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23release-schedule)

[Table of Contents](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23table-of-contents)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23usage)

[Blocks API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23blocks-api)[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23configuration)[Styles API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23styles-api)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23troubleshooting)

[Contributing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23contributing)

[Tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23tests)

[Travis CI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-kit/docs/apps/vtex.product-kit%23travis-ci)

Was this helpful?

[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 external seller processing payments 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/external-seller-processing-payments/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/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/external-seller-processing-payments/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/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/external-seller-processing-payments/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/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/external-seller-processing-payments/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/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/external-seller-processing-payments/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-guide)

[Marketplace / Seller architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-architecture)

[Store setup for VTEX Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-vtex-marketplace-setup)

[External seller processing payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments)

[External seller connector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-connector)

[Catalog management for VTEX Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-vtex-marketplace-operation)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/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/external-seller-processing-payments/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/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/external-seller-processing-payments/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-guide)

[Marketplace / Seller architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-architecture)

[Store setup for VTEX Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-vtex-marketplace-setup)

[External seller processing payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments)

[External seller connector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-connector)

[Catalog management for VTEX Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-vtex-marketplace-operation)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/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/external-seller-processing-payments/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides)

Integration Guides

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-integration-guide)

[External seller processing payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments)

External seller processing payments

Although in our [marketplace / seller architecture](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-marketplace-integration-architecture) payments are usually processed by the marketplace, this can also be done by the seller. This decision of where to process payments depends on the commercial conditions they have negotiated with the payment provider. Therefore, there are two possibilities for processing payments:

* **Marketplace processing payments:** no development is needed from the seller.
* **External seller processing payments:** seller should follow the instructions below.

## Split Payments

Marketplace orders can often contain items from multiple sellers, which are paid for in a unified checkout experience at the marketplace’s storefront. If external sellers process payments, they are tied to the conditions determined in our [Transaction Split](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/split-payment--6k5JidhYRUxileNolY2VLx%23transaction-split). If marketplaces decide to process payments, they can either transfer seller's purchase amount outside of VTEX, or fall under the [Payout split](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/split-payment--6k5JidhYRUxileNolY2VLx%23payout-split) flow. We suggest that you read our [Split Payment](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/split-payment--6k5JidhYRUxileNolY2VLx) article to better inform the decision of who processes payments.

## Seller setup

The following steps are required to enable external sellers to process payments:

### Create Gateway Account

For sellers to process payments received from an order, it is necessary to create a VTEX [Gateway](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/what-is-a-payment-gateway--2KH9Wdi7F6swOU4amECSOk) account, even though their stores are not hosted in VTEX.

VTEX marketplaces can request Gateway accounts to be created for their sellers for a fixed monthly fee. For this type of account, no variable billing is applied.

The marketplace should send an email to one of the addresses below, depending on their region, requesting the additional Gateway account for their external seller. Make sure to include the following information in your email request:

* Account name, included in the VTEX environment url `{accountname}.myvtex.com/admin`
* Name of the user responsible for the account
* Email of the user responsible for the account

Example:

_Account Name: sellerstore_ _User: Carol Danvers_ _Email:_ `caroldanvers@sellerstore.com`

| Region                  | Email                     | Monthly Fee |
| ----------------------- | ------------------------- | ----------- |
| Brazil                  | sales-ops-br@vtex.com.br  | R$750,00    |
| Europe                  | sales-operations@vtex.com | EUR 250     |
| United States and LatAm | sales-operations@vtex.com | 250 USD     |

### Configure payment settings

The seller’s Gateway account created will be used to set up the [payments’ architecture](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/payments--6GAS7ZzGAm7AGoEAwDbwJG) on the seller's side. Some steps are only executed through the VTEX Admin of the Gateway account, while others can be done by API integration. Follow the steps below to configure your payment settings.

#### Set up gateway affiliations

A gateway affiliation is a set of configurations that represent your contract with a payment gateway of your choice. VTEX has a number of gateway affiliations already working natively in our environment that you can plug into your account.

You can view all the affiliations natively connected to VTEX through your VTEX Admin so you can decide which one suits your payment settings, and then register it through the VTEX Admin by following the steps below.

> In case the affiliations natively connected to VTEX do not suit your needs, you can develop your own by following the Payment Provider Protocol.

1. Access the **VTEX Admin** through your Gateway Account.
2. On the left navigation menu, click on the **Payments** tab.
3. Click on the **Settings** page.
4. Click on `+` to see available affiliations.
5. Give your affiliation a name.
6. Enter the contract data sent by the chosen Gateway.
7. Click on `Save`.

> The full list of affiliations is only visible through the VTEX Admin, by following the steps above from steps 1-4\. Once you choose the affiliation that will be implemented, you can use our [Insert affiliation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payments-gateway-api%23post-/api/pvt/affiliations) endpoint to configure it to your account, instead of following steps 5-7\. You can check all affiliations implemented to your store through the [Get Affiliations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payments-gateway-api%23get-/api/pvt/affiliations) endpoint.

#### Set up Payment Conditions and Anti-fraud

To finalize Payment settings on the seller's side, it is necessary to set up Payment Conditions, or Rules, and an Anti-fraud for transactions.

It is possible to set up payment conditions through your gateway account’s VTEX Admin. Check [Set up the payment options](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-to-configure-payment-conditions) to know how.

If you wish to realize this step through API calls, use [Get Rules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payments-gateway-api%23get-/api/pvt/rules) \> [Insert Rule](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payments-gateway-api%23post-/api/pvt/rules) calls.

The Anti-fraud can be set up through your gateway account’s VTEX Admin. Check [Set up the Anti-fraud](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-to-configure-the-anti-fraud--tutorials%5F446) to know how.

To configure it through API, fill in the `antifraud` object in the [Insert Rule](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payments-gateway-api%23post-/api/pvt/rules) endpoint.

## Wrapping up

Once these steps are done, you can move on to the External Seller Connector section of this guide. To finalize the process it is necessary to [send your Gateway account name to the marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-integration-connector%23seller-processing-payments).

Contributors

4

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

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

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

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/external-seller-integration-guide/external-seller-processing-payments.md)

[Store setup for VTEX Marketplace« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments//docs/guides/external-seller-integration-vtex-marketplace-setup)[External seller connectorNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments//docs/guides/external-seller-integration-connector)

Contributors

4

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F77292838%3Fv%3D4%26w=64%26q=75)](https://github.com/julia-rabello)

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

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

ON THIS PAGE

[Split Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23split-payments)

[Seller setup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23seller-setup)

[Create Gateway Account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23create-gateway-account)[Configure payment settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23configure-payment-settings)

[Wrapping up](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23wrapping-up)

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/external-seller-integration-guide/external-seller-processing-payments.md)

Copy page

On this page

ON THIS PAGE

[Split Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23split-payments)

[Seller setup](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23seller-setup)

[Create Gateway Account](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23create-gateway-account)[Configure payment settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23configure-payment-settings)

[Wrapping up](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/external-seller-processing-payments/docs/guides/external-seller-processing-payments%23wrapping-up)

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] How do I use the VTEX iframe app? Provide documentation and configuration details.

[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/apps/vtex.iframe/docs/guides)

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/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/apps/vtex.iframe/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/advanced-components)

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-newsletter)

[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-video)

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.shipping-option-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.my-account)

---

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

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/troubleshooting)

---

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

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/advanced-components)

[Availability Notify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.availability-notify)

[Category Menu](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.category-menu)

[Kit Look](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexbr.kitlook)

[Icon Pack list](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-icons/iconpack)

[Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.iframe)

[Live Shopping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexventures.livestreaming)

[PayPal Checkout with Smart Payment Buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.connector-paypal-commerce-platform)

[Personal Shopper](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexventures.personal-shopper-free)

[Product Availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-availability)

[Product Comparison](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-comparison)

[Product Gifts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-gifts)

[Product Highlight by VTEX Segment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexarg.product-highlight-by-vtex-segment)

[Product Specification Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.product-specification-badges)

[Quantity On Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexarg.quantity-on-cart)

[Reviews and Ratings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.reviews-and-ratings)

[Querying personal MasterData Information with SafeData](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.safedata)

[Seller Selector](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.seller-selector)

[Similar Products Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.similar-products-variants)

[Store Drawer](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-drawer)

[Store Locator](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-locator)

[Store Form](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-form)

[Store Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-link)

[Store Media](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-media)

[Store Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-newsletter)

[Video](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-video)

[VTEX IO Sandbox Component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.sandbox)

[Shipping Option Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.shipping-option-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.my-account)

---

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

---

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

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/guides/advanced-components)

Iframe

Official extension

Version: 0.8.0

Latest version: 0.8.0

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

An app that makes it possible to render external iframes on a store.

![{"base64":"  ","img":{"width":354,"height":636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":184249,"url":"https://user-images.githubusercontent.com/18701182/67055752-abcb0500-f11f-11e9-8c24-50234214d474.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/18701182/67055752-abcb0500-f11f-11e9-8c24-50234214d474.png)

## Configuration - standard Iframe

1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`

`1

"dependencies": {

2

 "vtex.iframe": "0.x"

3

}

`

1. Add the interface `iframe` to any **custom page** (Iframes are not allowed outside custom pages).

`1

{

2

 "store.custom#about-us": {

3

 "blocks": ["flex-layout.row#about-us", "iframe"]

4

 },

5

6

 "iframe": {

7

 "props": {

8

 "src": ""

9

 }

10

 }

11

}

`

| Prop name | Type   | Description                             | Default value |
| --------- | ------ | --------------------------------------- | ------------- |
| src       | String | Source address the iframe should render | null          |
| width     | Number | Width attribute of the iframe           | null          |
| height    | Number | Height attribute of the iframe          | null          |
| allow     | String | allow attribute of the iframe           | null          |

## Configuration - dynamic Iframe

1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`

`1

"dependencies": {

2

 "vtex.iframe": "0.x"

3

}

`

1. Add the dynamicIframe block and its properties to the blocks.json file

`1

{

2

 "store.custom#locationPage": {

3

 "children": ["iframe.dynamic-src"]

4

 },

5

 "iframe.dynamic-src": {

6

 "props": {

7

 "dynamicSrc": "https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName",

8

 "width": "1920",

9

 "height": "1000",

10

 "title": "exampleStaticPageName iframe wrapper for {account}",

11

 "allow": "geolocation"

12

 }

13

 }

14

}

`

1. register your new page in routes.json with appropriate parameters passed into the page url

`1

{

2

 "store.custom#locationPage": {

3

 "path": "/:param1/:param2/pagename"

4

 }

5

}

`

| Prop name  | Type   | Description                                                       | Default value |
| ---------- | ------ | ----------------------------------------------------------------- | ------------- |
| dynamicSrc | String | iframe src with dynamic parameters from page URL enclosed in '{}' | null          |
| width      | Number | Width attribute of the iframe                                     | null          |
| height     | Number | Height attribute of the iframe                                    | null          |
| title      | String | title attribute of the iframe                                     | null          |
| allow      | String | allow attribute of the iframe                                     | null          |
| id         | String | ID attribute of the iframe                                        | null          |
| className  | String | class attribute of the iframe                                     | null          |
| onLoad     | String | onLoad attribute of the iframe                                    | null          |
| srcAccount | Object | Object with account name and src                                  | null          |

### srcAccount

Using srcAccount

`1

 "iframe#logout": {

2

 "props": {

3

 "src": "//www.mywebsiteprod.com/logout",

4

 "srcAccount": {

5

 "mywebsiteprod": "//www.mywebsite.com/logout",

6

 "mywebsiteqa": "//qa.mywebsite.com/logout"

7

 },

8

 "onLoad": "setTimeout(() => {window.location.href='/'}, 5000)",

9

 "className": "iframeLogout",

10

 "id": "iframeLogout"

11

 }

12

 },

`

## Customization

There is a `.container` handle that wraps the iframe, it's also possible to use `blockClass`.

[Icon Pack list« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.store-icons/iconpack)[Live ShoppingNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtexventures.livestreaming)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration - standard Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.iframe%23configuration-standard-iframe)

[Configuration - dynamic Iframe](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.iframe%23configuration-dynamic-iframe)

[srcAccount](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.iframe%23srcaccount)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.iframe/docs/apps/vtex.iframe%23customization)

Was this helpful?

[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=)