[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 layout development guide for payment methods in smart checkout 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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-implementing-a-payment-provider)

[Payment Provider Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-provider-framework)

[Purchase Flows](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-purchase-flows)

[Payment App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-app)

[Payment Methods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-methods)

[Payment Provider Homologation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-provider-homologation)

[Antifraud Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-pci-dss-compliance)

[Secure Proxy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/custom-auto-capture-feature)

[Pix: Instant Payments in Brazil](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/headless-commerce)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-implementing-a-payment-provider)

[Payment Provider Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-provider-framework)

[Purchase Flows](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-purchase-flows)

[Payment App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-app)

[Payment Methods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-methods)

[Payment Provider Homologation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-payment-provider-homologation)

[Antifraud Provider Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-pci-dss-compliance)

[Secure Proxy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/custom-auto-capture-feature)

[Pix: Instant Payments in Brazil](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides)

Integration Guides

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/payments-integration-guide)

[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/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex)

Layout Development Guide for payment methods in Smart Checkout VTEX

This is a guide intended for those responsible for integrating new payment methods into VTEX's Smart Checkout. In addition to the integration with PCI Gateway, it is essential that integrators provide a UI that aligns with the visual identity of the payment method being presented.

> All layout updates made through this guide will only apply to Checkout v6.

When a consumer selects their payment method at checkout, they express their interest in using it. Therefore, it is important to communicate, briefly and clearly, how each payment method works and what are the advantages of using each one of them.

As part of a layout, information such as contact details (e.g. phone number or email), can help the consumer to solve any problem or question at the time of purchase.

The following sections show how to create a layout to be used for payment methods in VTEX's Smart Checkout.

> You cannot create a new layout for custom payment methods (those developed by the merchant and that only work in their stores, such as notes payable, co-branded, or private label cards).

## Layout Requirements

### User interface: structure and code

#### Bootstrap Framework

The Smart Checkout code is based on Bootstrap v2.3.2 standards. Classes such as _grid_, _alignment_, and others, can be used to structure the HTML and CSS code.

#### CSS and LESS

The styling code can be written to be interpreted by our CSS preprocessor, LESS. When writing that code, the following rules are _mandatory_:

* Global selectors which can interfere with the structure or other elements of the page are not permitted.
* IDs cannot be used as selectors.
* A maximum of two nested selectors is permitted.
* All classes must be in English, with lowercase letters and words separated by a hyphen. E.g. _.my-payment-method_.

Additionally, it is recommended to use only classes as selectors.

#### Responsiveness

The developed interface must meet the following interfaces:

* **Desktop/Horizontal Tablet**: width greater than or equal to 768 pixels. The container is 462 pixels wide, and its height can vary between 200 and 330 pixels, depending on the content.
* **Vertical/Mobile Tablet**: width less than 768 pixels. The container is 100% wide, with a margin of 30 pixels and padding of 15 pixels.

> Additional breakpoints can be used freely.

### User interface: design and elements

#### Color and images

The use of colors and images can follow the visual identity of the payment method, without restrictions. The images must be optimized and grouped into one, using the technique of _css sprites_.

#### Typography

Following the Bootstrap pattern, the fonts adopted in Smart Checkout are, in this order:

* Helvetica Neue
* Helvetica
* Arial
* Sans Serif

> It is not recommended to use other fonts for texts. If it is extremely necessary, these fonts must be part of the standard system package, as it is not possible to import new fonts.

#### Scripts and links

Scripts and links are not essential for closing the purchase, as they distract the consumer and even take him out of the checkout.

> The use of scripts and links are not permitted.

All content available at the checkout area should be informative only. The _Checkout button_ must be the only _call-to-action_ presented on the screen.

### Internationalization

All texts must be produced in:

* **en-US**: US English (mandatory) and,
* Languages of the countries/regions where you intend to operate (if not in English). See [ISO 639-1 Standard Language Codes](https://read.calvincode.net/reader?url=https://www.andiamo.co.uk/resources/iso-language-codes/).

In addition to localizing the texts, images should be altered to better suit each language.

### Development

> Use [Payment Mocker](https://read.calvincode.net/reader?url=https://github.com/vtex/payment-mocker) to test your layout rendering within VTEX's Smart Checkout to ensure expected behavior.

Follow these steps to create your layout:

1. Download the repository to your local machine (either through the Github clone or by downloading the repository from the download option).
![{"base64":"  ","img":{"width":512,"height":205,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":42811,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/layout-development-guide-for-payment-methods-in-smart-checkout-vtex-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/layout-development-guide-for-payment-methods-in-smart-checkout-vtex-0.png)
2. Install the [NodeJS](https://read.calvincode.net/reader?url=https://nodejs.org/en/).
3. Enter the following commands in the terminal to install Grunt and Sass:
   * **Grunt**: `sudo npm i -g grunt-cli`
   * **Saas**: `sudo npm install -g sass`
4. Still in the terminal, go to the project folder and run the command `npm i` ; wait for the project's dependencies to be installed.
5. Run the command _Grunt_ on the project folder.
6. Open your preferred browser and go to the link `http://localhost:8080`.
7. Modify the following files in accordance with the requirements of the User interface: structure and code section:
   * _src/partials/payment.html_: This file is where you should insert the HTML structure of your layout. When adding information about a new payment method, change the text `newpayment` in the file to the name of the payment method created. For example, when creating the Safety Pay payment method, replace the information `newpayment` with `SafetyPay`.
   * _src/assets/css/less/style.less_: This is where you insert the classes responsible for styles, spacing, fonts, and other CSS customizations in your layout. Remember to follow the guidelines described in the section above.
   * _src/assets/img_: Here you should insert and refer to all the images used in your layout.
   * _src/i18n_: Inside this folder you are going to find four files, each one corresponding to one language (_pt-BR, en-US, es, and fr_). You should change the values for the keys and check if the languages are rendered correctly by clicking on the flags located in the upper left corner in the Payment Mocker, see the example in the section below.
8. Open the file _src/assets/css/less/style.less_, get access to the property _#payment-group-template-PaymentGroup_ _.payment-group-item-text_ and update the attribute background-image, in order to insert the icon referring to your payment method.

> If there is no change in the attribute _background-image_, no icon will be rendered next to the payment method label.

1. Open the file _src/i18n/{language}.json_, and change the value of the _paymentData.paymentGroup.title_ key, in order to customize the label that your payment method will be rendered on checkout.

> If the value of the _paymentData.paymentGroup.title_ key is not changed, the payment method will be rendered with the default label. Likewise, if the name chosen for your new payment method is the same or similar to one of the existing payment method on the VTEX platform, it will not be possible to register it. To check the payment methods already registered, access the VTEX Admin, and go to **Store Settings > Payments > Settings > Payment Conditions**.

### Delivery

To deliver the code (which is a repository of the Payment Mocker containing all modifications related to your payment methods), you must compress it in .zip or .rar extensions, and submit it by opening a ticket on the [VTEX Support Portal](https://read.calvincode.net/reader?url=https://help.vtex.com/support).

> You must delete any additionally files or folders created during the compilation process of the project, such as, the folder _node\_modules_ or file _yarn.lock_ (e.g. for those use yarn package manager).

## Layout Example

See below an example of layout and language switching ([Brastemp](https://read.calvincode.net/reader?url=http://loja.brastemp.com.br/)) for payment methods located in VTEX's Smart Checkout payment methods.

> Any manual language switching is only available in the Payment Mocker for testing purposes. Once the layout is deployed, the language switching is made by the Checkout automatically.

![{"base64":"  ","img":{"width":1156,"height":626,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":220428,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/layout-development-guide-for-payment-methods-in-smart-checkout-vtex-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/layout-development-guide-for-payment-methods-in-smart-checkout-vtex-1.png)

![{"base64":"  ","img":{"width":512,"height":421,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":74931,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/layout-development-guide-for-payment-methods-in-smart-checkout-vtex-2.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/layout-development-guide-for-payment-methods-in-smart-checkout-vtex-2.gif)

### Reference Links

[GitHub - Payment Mocker - HTML](https://read.calvincode.net/reader?url=https://github.com/vtex/payment-mocker/blob/master/src/partials/payment.html)

[GitHub - Payment Mocker - CSS](https://read.calvincode.net/reader?url=https://github.com/vtex/payment-mocker/blob/master/src/assets/css/less/style.less)

[GitHub - Payment Mocker - Internationalization](https://read.calvincode.net/reader?url=https://github.com/vtex/payment-mocker/tree/master/src/i18n)

Contributors

4

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F47991446%3Fv%3D4%26w=64%26q=75)](https://github.com/PedroAntunesCosta)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_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/payments-integration-guide/layout-development-guide-for-payment-methods-in-smart-checkout-vtex.md)

[Split Payouts on Payment Provider Protocol« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex//docs/guides/split-payouts-on-payment-provider-protocol)[Custom Auto Capture FeatureNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex//docs/guides/custom-auto-capture-feature)

Contributors

4

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F47991446%3Fv%3D4%26w=64%26q=75)](https://github.com/PedroAntunesCosta)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F7108339%3Fv%3D4%26w=64%26q=75)](https://github.com/brunoamui)

ON THIS PAGE

[Layout Requirements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23layout-requirements)

[User interface: structure and code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23user-interface-structure-and-code)[User interface: design and elements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23user-interface-design-and-elements)[Internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23internationalization)[Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23development)[Delivery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23delivery)

[Layout Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23layout-example)

[Reference Links](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23reference-links)

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/layout-development-guide-for-payment-methods-in-smart-checkout-vtex.md)

Copy page

On this page

ON THIS PAGE

[Layout Requirements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23layout-requirements)

[User interface: structure and code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23user-interface-structure-and-code)[User interface: design and elements](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23user-interface-design-and-elements)[Internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23internationalization)[Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23development)[Delivery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23delivery)

[Layout Example](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23layout-example)

[Reference Links](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex/docs/guides/layout-development-guide-for-payment-methods-in-smart-checkout-vtex%23reference-links)

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 applicable cases 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/applicable-cases/docs/guides)

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

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

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

Guides

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

---

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

---

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

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

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

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

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

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

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

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/punchout)

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

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

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

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

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

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

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/recaptcha)

[Applicable cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/applicable-cases)

[Implementing reCAPTCHA in integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/implementing-recaptcha-in-integrations)

---

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

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

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

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

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

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

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

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

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/punchout)

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

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

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

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

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

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

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/recaptcha)

[Applicable cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/applicable-cases)

[Implementing reCAPTCHA in integrations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/implementing-recaptcha-in-integrations)

---

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

---

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

---

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

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

Integration Guides

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/recaptcha)

[Applicable cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/docs/guides/applicable-cases)

Applicable cases

When a shopper places an order on your store paying with a credit or debit card, they may or may not be required to perform reCAPTCHA validation according to the criteria set in the [orderForm configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/reference/updateorderformconfiguration).

The `vtexCriteria` option uses an algorithm to determine which sessions are trustworthy. This reduces the application of reCAPTCHA validation, improving security with no impact conversion. This is the recommended option if you are using checkbox validation (equivalent to reCAPTCHA v2).

Regardless of this configuration, reCAPTCHA verification will not be required in some cases:

* Fulfillment orders, meaning orders received through a marketplace, in which your store is responsible only for the fulfillment. In this case, reCAPTCHA validation is applied in the marketplace where the order was made by the shopper according to its own configuration.
* Orders made by authenticated administrator users, including [call center users](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/how-can-i-create-callcenter-user--frequentlyAskedQuestions%5F4227%23).
* Orders made through the private (`/pvt`) placeOrder API endpoint, which is commonly used by integrations and authenticated with appKey and appToken.
* Orders where payment does not include a debit or credit card.

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases/_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/recaptcha/applicable-cases.md)

[reCAPTCHA« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases//docs/guides/recaptcha)[Implementing reCAPTCHA in integrationsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/applicable-cases//docs/guides/implementing-recaptcha-in-integrations)

Contributors

2

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

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

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/recaptcha/applicable-cases.md)

Copy page

On this page

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 faststore search search provider 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/faststore/search-search-provider/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/sdk-overview)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/cart-overview)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-overview)

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-search-provider)

[usePagination](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-use-pagination)

[useSearch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-use-search)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/session-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/sdk-overview)

[Analytics](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/analytics-overview)

[Cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/cart-overview)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-overview)

[SearchProvider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-search-provider)

[usePagination](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-use-pagination)

[useSearch](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-use-search)

[Session](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/session-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/sdk-overview)

[Search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-overview)

SearchProvider

`SearchProvider` is a React component that wraps an entire page, such as a Product Listing Page, to provide the necessary context for the faceted search. Faceted search allows users to filter and refine search results based on specific attributes (such as price, category, brand, etc.).

## Import

`1

import { SearchProvider } from '@faststore/sdk'

`

## Usage

The following example demonstrates how to implement faceted search using `SearchProvider`:

`1

import { SearchProvider, parseSearchState } from '@faststore/sdk'

2

3

function Page () {

4

 const params = useMemo(() => parseSearchState(new URL(window.href)), [])

5

6

 return (

7

 <SearchProvider

8

 onChange={(url: URL) => window.location.href = url.href}

9

 itemsPerPage={12}

10

 {...params}

11

 >

12

 {children}

13

 </SearchProvider>

14

 )

15

}

`

* `SearchProvider`: React component that provides search context.
* `parseSearchState`: Parses the current URL and extracts the search state (such as `sort`, `term`, `page`, etc.).
* `children`: Components wrapped by `SearchProvider`, which will have access to the search context.

## Props

The `SearchProvider` component accepts the following props:

| Prop           | Type                                  | Description                                                                                |
| -------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| onChange       | (url: URL) => void                    | Callback function that handles changes in the facet state. It updates the page URL when search parameters change. |
| itemsPerPage   | number                                | Number of items displayed on a given page.                                                                        |
| sort           | SearchSort                            | Sorting criteria of the search result (such as price\_asc, orders\_desc, discount\_desc, etc.).                   |
| term           | string / null                         | Full-text term used in the search.                                                                                |
| page           | number                                | Current page index in search pagination.                                                                          |
| base           | string                                | Base URL path of the search page. Useful for localization and prefixing paths by locale (such as /en-us/).        |
| selectedFacets | Array<{ key: string, value: string }> | Array of selected facets in the search.                                                                           |
| passThrough    | URLSearchParams                       | Additional URL parameters to preserve when building URLs.                                                         |

> Don't include personalization facets, such as sales channel and price tables, in the `selectedFacets` property. Doing so may result in users having two channels — one from the Session context and another from the URL — which may lead to unexpected behavior.

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/sdk/search/search-provider.mdx)

[Search« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-overview)[usePaginationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-use-pagination)

Contributors

1

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

ON THIS PAGE

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-search-provider%23import)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-search-provider%23usage)

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

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/sdk/search/search-provider.mdx)

Copy page

On this page

ON THIS PAGE

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-search-provider%23import)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/search-search-provider/docs/guides/faststore/search-search-provider%23usage)

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

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 faststore reference icons 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/faststore/reference-icons/docs/guides)

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

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

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/global-tokens-overview)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides)

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

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

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

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/troubleshooting)

---

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

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-overview)

[Themes reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/themes-overview)

[Global tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/global-tokens-overview)

[Iconography](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons)

[Using themes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/using-themes-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-overview)

Iconography

This set of icons uses SVGs from Phosphor icons.

Icons help build web pages by illustrating concepts and improving website navigation.FastStore offers a set of icons that our components use, and you can also use them on your application. This set of icons uses SVGs from [Phosphor icons](https://read.calvincode.net/reader?url=https://phosphoricons.com/).

---

## Import

Import the component from [@faststore/ui](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/components-index)

`1

import { Icon } from '@faststore/ui'

`

You can find more details about the `Icon` component [here](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-icon).

## Usage

`1

<Icon name="X" weight="bold" />

2

<Icon name="MagnifyingGlass" weight="regular" />

3

<Icon name="House" weight="thin" />

`

`1

<Icon name="X" weight="bold" width={16} height={16} />

2

<Icon name="MagnifyingGlass" weight="regular" width={20} height={20} />

3

<Icon name="House" weight="thin" width={32} height={32} />

`

---

### UI Actions

* X
* Plus
* PlusCircle
* Minus
* MinusCircle
* XCircle
* ArrowLeft
* ArrowRight
* ArrowElbowDownRight
* CaretDown
* CaretRight
* CaretLeft
* CaretUp
* Checked
* MagnifyingGlass
* FadersHorizontal

### Payment Flags

* Visa
* Amex
* ApplePay
* EloCard
* Diners
* GooglePay
* Mastercard
* PayPal
* Pix
* Stripe
* GooglePay
* ApplePay
* Visa

### Social

* Facebook
* Instagram
* Twitter
* Pinterest

### Others

* House
* Star
* Heart
* DotsThree
* Ruler
* ShoppingCart
* Tag
* BellRinging
* Bell
* MapPin
* ArrowSquareOut
* Envelop

Contributors

1

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

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/styling/icons.mdx)

[Typography« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/global-tokens-typography)[Using themesNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/using-themes-overview)

Contributors

1

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

ON THIS PAGE

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23import)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23usage)

[UI Actions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23ui-actions)[Payment Flags](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23payment-flags)[Social](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23social)[Others](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23others)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/styling/icons.mdx)

Copy page

On this page

ON THIS PAGE

[Import](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23import)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23usage)

[UI Actions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23ui-actions)[Payment Flags](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23payment-flags)[Social](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23social)[Others](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/reference-icons/docs/guides/faststore/styling-icons%23others)

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