> For the complete documentation index, see [llms.txt](https://propps.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://propps.gitbook.io/docs/our-templates/vibe-checkouts-tm.md).
# Vibe Checkouts™
## Template Access
[Template Link on Bubble Marketplace](https://bubble.io/template/1747873158065x615203253177811000)
[Template Preview Link](https://vibecheckouts.bubbleapps.io/)
### Ideal for
Entrepreneurs, digital product creators, e-commerce stores, and any project that requires a smooth, customizable payment flow.
### What it solves
* Quick creation of responsive checkout pages
* Variety of styles for different audiences and product types
* Modular and customizable structure
### Requirements
* This template can be used on a free Bubble plan.
* Some plugins may be required ([check plugin list](#required-plugins)).
{% hint style="danger" %} This model is not a final product. Its structure is 100% developed to meet front-end needs. Any part of the application can be modified and changed to integrate back-ends and workflows with data.
{% endhint %}
***
## Images
{% tabs %}
{% tab title="1" %}
{% endtab %}
{% tab title="2" %}
{% endtab %}
{% tab title="3" %}
{% endtab %}
{% tab title="4" %}
{% endtab %}
{% endtabs %}
***
## Required Plugins Elemium - Icon
A powerful and flexible icon element.\
\
More advanced than the native Bubble Icon, offering:\
\
\- Access to the Iconify Library with 200,000+ icons\
\- Support for colored icons, animations, brands, logos, smileys, flags, and more\
\- Flip and rotate icons with custom delay and style\
\- Smooth transitions for dynamic effects\
\
When used with the Elemium Chrome Extension, unlock:\
\
\- Pixel-perfect previews directly in the editor\
\- An integrated icon picker for a seamless workflow\
\
Upgrade your design possibilities with Elemium - Icon!
The elements used in this template are free, but you can get a PRO version.\
[Get Elemium PRO](https://elemium.io/?ref=rafael)
*Enter coupon code "LAUNCH10 and get 10% off on Elemium Pro*Hide Page Scrollbars on page
Hide all Scrollbars on page.
Sometimes you only want to hide all scrollbars and it should be an easy task. By adding this element to your page, all scrollbars on the page no matter what element will be hidden. No additional work required, no element ID setup, just add the element.
If you require your entire App to be without Scrollbars, simply add it to your app Menu or a reusable item that is on all pages.
Done! no more scrollbar.
PS. This is not to customise any scrollbar, this plugin will just hide it all. no mess no fuss. Applies to Horizontal and Vertical Scrollbars.
[Open Plugin Page](https://bubble.io/plugin/hide-page-scrollbars-1602415840132x368402390479011840)
International Phone Input
A fully featured customizable phone input
Features:
* Phone formatting
* Phone validation
* Country auto-detection
* Customizable appearance
[Open Plugin Page](https://bubble.io/plugin/international-phone-input-1670930264864x445277063097352200)
Times / Stopwatch / Countdown
Create timers, chronometers, stopwatches and countdowns on your Bubble App.
[Open Plugin Page](https://bubble.io/plugin/timer--stopwatch--countdown-1633100358403x239657077467774980)
***
## Template Pages Structures
### 404
404 Summary
The "404" page in Vibe Checkouts™ serves as the default error page displayed when a user attempts to access a URL within the application that does not correspond to an existing page. Its primary function is to inform the user that the requested page was not found and provide a brief explanation. It is a standard boilerplate page intended to be replaced or customized by the Bubble developer. It does not support any user interactions or workflows beyond displaying static text content.
#### UI
* **Group text content** `This group acts as a container for the text elements on the 404 page. It is centered horizontally on the page and uses a column layout with a 20px row gap to stack its child elements vertically. It has fixed margins of 100px top/bottom and 20px left/right, and a maximum width of 992px.`
* **Text A** `Displays the main heading for the 404 error page. The text content is static: "Oops! 404 error". It is left-aligned within its container.`
* **Text B** `Provides a descriptive message explaining that the requested page was not found and offers guidance to the developer regarding customization. The text content is static and includes line breaks. It is left-aligned within its container and has a maximum width of 600px.`
***
### Index
Index Summary
The `index` page of the VibeCheckouts™ application serves as the main landing page, introducing users (Bubble developers) to the product and showcasing the available checkout templates. It features a hero section highlighting the product's value proposition and a section detailing the four distinct checkout templates: Vibe Stripe™, Vibe Hotmart™, Vibe Ecommerce™, and Vibe Checkout Mobile™. Each template is presented with a descriptive text, a banner image, and a button to view the specific model. The page aims to inform potential users about the benefits of using VibeCheckouts™ and guide them towards exploring the different template options.
#### UI
* hero `Group element serving as the main hero section of the page. Contains the logo, title, and description of Vibe Checkouts™. Configured as a column layout with vertical centering.`
* hero-description `Group element containing the title, description, and logo for the hero section. Configured as a column layout with vertical centering and a row gap of 20px.`
* logo-business `Image element displaying the Vibe Checkouts™ logo. Source is a static image URL. Horizontally centered within its parent group.`
* title-hero `Text element displaying the main title of the page: "Build faster Bubble checkouts with our templates". Horizontally centered within its parent group.`
* description-hero `Text element providing a brief description of Vibe Checkouts™: "Introducing Vibe Checkouts™ with ready-made front-end infrastructure to integrate with your app." Horizontally centered within its parent group.`
* section-template `Group element acting as a container for the template showcase section. Configured as a column layout with vertical centering.`
* section-template-description `Group element containing the main description text for the template section. Configured as a column layout.`
* T: Content `Text element describing the purpose of the templates: "No more building front-ends for checkouts. That’s where Vibe Checkouts™ comes in..." Horizontally centered within its parent group.`
* section-template-01 `Group element arranging the Vibe Stripe™ and Vibe Hotmart™ template sections side-by-side. Configured as a row layout with space-between horizontal alignment.`
* section-template-stripe `Group element containing the details for the Vibe Stripe™ template. Configured as a column layout with stretch vertical alignment and a row gap of 10px.`
* banner-vibe-stripe `Image element displaying a banner image for the Vibe Stripe™ template. Source is a static image URL. Horizontally aligned to the flex-start within its parent group.`
* T: Title stripe `Text element displaying the title "Vibe Stripe™". Horizontally centered within its parent group.`
* T: Content stripe `Text element describing the Vibe Stripe™ template: "A model inspired by Stripe’s ultra-optimized, high-converting checkout experience." Horizontally centered within its parent group.`
* btn-vibe-stripe `Button element with the text "Ver modelo". When clicked, navigates the user to the 'vibe-stripe-addons' page.`
* section-template-hotmart `Group element containing the details for the Vibe Hotmart™ template. Configured as a column layout with stretch vertical alignment and a row gap of 10px.`
* banner-vibe-hotmart `Image element displaying a banner image for the Vibe Hotmart™ template. Source is a static image URL. Horizontally aligned to the flex-start within its parent group.`
* T: Title hotmart `Text element displaying the title "Vibe Hotmart™". Horizontally centered within its parent group.`
* T: Content hotmart `Text element describing the Vibe Hotmart™ template: "A model inspired by Hotmart’s highly effective and conversion-focused checkout flow." Horizontally centered within its parent group.`
* btn-vibe-hotmart `Button element with the text "Ver modelo". When clicked, navigates the user to the 'vibe-hotmart-addons' page.`
* section-template-02 `Group element arranging the Vibe Ecommerce™ and Vibe Checkout Mobile™ template sections side-by-side. Configured as a row layout with space-between horizontal alignment.`
* section-template-ecommerce `Group element containing the details for the Vibe Ecommerce™ template. Configured as a column layout with stretch vertical alignment and a row gap of 10px.`
* banner-vibe-ecommerce `Image element displaying a banner image for the Vibe Ecommerce™ template. Source is a static image URL. Horizontally aligned to the flex-start within its parent group.`
* T: Title ecommerce `Text element displaying the title "Vibe Ecommerce™". Horizontally centered within its parent group.`
* T: Content ecommerce `Text element describing the Vibe Ecommerce™ template: "A model inspired by the classic 3-step ecommerce checkout used by top-performing online stores." Horizontally centered within its parent group.`
* btn-vibe-ecommerce `Button element with the text "Ver modelo". When clicked, navigates the user to the 'vibe-ecommerce-addons' page.`
* section-template-checkout-mobile `Group element containing the details for the Vibe Checkout Mobile™ template. Configured as a column layout with stretch vertical alignment and a row gap of 10px.`
* banner-vibe-checkout-mobile `Image element displaying a banner image for the Vibe Checkout Mobile™ template. Source is a static image URL. Horizontally aligned to the flex-start within its parent group.`
* T: Title checkout mobile `Text element displaying the title "Vibe Checkout Mobile™". Horizontally centered within its parent group.`
* T: Content checkout mobile `Text element describing the Vibe Checkout Mobile™ template: "A model designed with mobile-first responsiveness, inspired by the highest-converting mobile checkouts." Horizontally centered within its parent group.`
* btn-vibe-checkout-mobile `Button element with the text "Ver modelo". When clicked, navigates the user to the 'vibe-checkout-mobile-addons' page.`
* footer `Group element serving as the footer section of the page. Configured as a column layout with vertical centering.`
* T: Content footer `Group element containing the logo and description text for the footer. Configured as a column layout with vertical centering and a row gap of 65px.`
* text descriptiom `Text element providing additional information about the template versions: "All templates are available in: Brazil, Global, and Addons versions..." Horizontally centered within its parent group.`
* logo-business `Image element displaying the Vibe Checkouts™ logo in the footer. Source is a static image URL. Horizontally centered within its parent group.`
When btn-vibe-stripe is clicked
### Summary
This workflow navigates the user to the 'vibe-stripe-addons' page when the 'btn-vibe-stripe' element is clicked. This is likely part of a navigation or selection process within the VibeCheckouts™ application, allowing users to access the Stripe-inspired checkout template with addon features.
### Documentation
This workflow is triggered when the Bubble element identified as 'btn-vibe-stripe' is clicked by the user. Upon this click event, the workflow executes a single action: navigating the user to a different page within the application. The target page is specifically identified as 'vibe-stripe-addons'. This action facilitates user navigation, directing them to the section of the application that likely showcases or utilizes the Vibe Stripe™ checkout template with addon functionalities, as described in the application context.
### Actions
#### Step 1: Go to page
This action directs the user's browser to a different page within the Bubble application. The destination page is set to 'vibe-stripe-addons'. This step is the core function of the workflow, enabling navigation to the specific checkout template page.
When btn-vibe-checkout-mobile is clicked
### Summary
This workflow is triggered when the 'btn-vibe-checkout-mobile' element is clicked. Its primary purpose is to navigate the user to the 'vibe-checkout-mobile-addons' page, likely initiating a mobile-optimized checkout process with addon options.
### Documentation
This workflow is initiated by a user interaction: clicking the element named 'btn-vibe-checkout-mobile'. Upon this click event, the workflow executes a single action. This action directs the user's browser to a different page within the application, specifically the page named 'vibe-checkout-mobile-addons'. This navigation is intended to transition the user from their current location to a dedicated mobile-first checkout page that includes options for adding extra items or services to their purchase.
### Actions
#### Step 1: Go to page
This action navigates the user to a different page within the application. The destination page is specified as 'vibe-checkout-mobile-addons'. This suggests the workflow is moving the user to a dedicated checkout interface designed for mobile devices and potentially offering addon selections.
When btn-vibe-hotmart is clicked
### Summary
This workflow is triggered when the 'btn-vibe-hotmart' button is clicked. Its primary purpose is to navigate the user to the 'vibe-hotmart-addons' page within the application.
### Documentation
This workflow is initiated by the 'An element is clicked' event, specifically when the button element named 'btn-vibe-hotmart' is interacted with by the user. Upon this click event, the workflow executes a single action. This action directs the user's browser to a different page within the application, specifically the page named 'vibe-hotmart-addons'. This suggests that clicking this button is intended to take the user to a checkout page or section related to the 'Vibe Hotmart™' template with 'Addons', as described in the application context.
### Actions
#### Step 1: Go to page
This action navigates the user to a different page within the application. The destination page is specified as 'vibe-hotmart-addons'. This step is unconditional and will execute every time the workflow is triggered.
When btn-vibe-ecommerce is clicked
### Summary
This workflow is triggered when the 'btn-vibe-ecommerce' button is clicked. Its primary purpose is to navigate the user to the 'vibe-ecommerce-addons' page, likely to initiate a checkout process using the Vibe Ecommerce template with addon options.
### Documentation
This workflow is initiated by a user clicking on the element named 'btn-vibe-ecommerce'. Upon this click event, the workflow executes a single action: navigating the user to a different page within the application. The target page is specifically identified as 'vibe-ecommerce-addons'. This action is unconditional and will always occur when the 'btn-vibe-ecommerce' element is clicked.
### Actions
#### Step 1: Go to page
This action directs the user's browser to a new page within the application. The destination page is set to 'vibe-ecommerce-addons'. This suggests that clicking the 'btn-vibe-ecommerce' button is intended to take the user to a checkout page configured with the Vibe Ecommerce template and potentially including options for adding extra items or services.
***
### Vibe Stripe Clean BRL (Brazil)
Page Summary
The `vibe-stripe-clean-brl` page is a checkout page designed for the Brazilian market, mimicking the Stripe checkout experience. It allows users to enter their customer information, select a payment method (Pix, Boleto/Barcode, or Credit Card), and proceed with the payment. The page displays product details, including name, description, price, and plan. It also includes sections for customer information (name, email, phone, address) and payment method selection. The page dynamically shows input fields and payment buttons based on the selected payment method. It calculates and displays the subtotal and total amount due. The page is part of the VibeCheckouts™ suite, aiming to provide a high-converting checkout experience for Bubble developers.
#### UI
* main `Group element, serves as the main container for the page content. Arranged in a row layout, centered horizontally, with a maximum width of 1200px.`
* box-info-product `Group element, contains information about the product being purchased. Arranged in a column layout, aligned to the start horizontally, with padding. Visible by default.`
* box-info-product-header `Group element, contains the back icon, business logo, and business name. Arranged in a row layout, aligned to the start horizontally, with a column gap of 10px.`
* box-info-product-icon-back `Icon element, displays a left arrow icon. Purpose is likely to navigate back to the previous page or product details.`
* logo-ico-your-business `Image element, displays the business logo. Has a fixed aspect ratio and rounded corners.`
* name-your-business `Text element, displays the name of the business ('Propps'). Font weight is 600.`
* box-info-product-content `Group element, contains the product details and cart summary. Arranged in a column layout, aligned to the start horizontally, with a row gap of 70px.`
* box-info-product-database `Group element, contains the product name, price, plan, and description. Arranged in a column layout, aligned to the start horizontally, with a row gap of -5px.`
* name-your-product `Text element, displays the product name ('Template Bubble Example '). Font size is 16px, font weight is 600.`
* box-info-product-description-price-plan `Group element, contains the product price and plan. Arranged in a row layout, aligned to the start horizontally, with a column gap of 20px.`
* price `Text element, displays the product price ('R$ 3.600'). Font size is 46px, font weight is 700, letter spacing is -2.6px.`
* plan `Text element, displays the product plan ('Plano Anual'). Has a background color and border, font size is 12px, font weight is 600.`
* description-product `Text element, displays a placeholder product description. Font size is 14px, font weight is 400, line height is 1.3.`
* box-info-product-cart `Group element, contains the subtotal and total amount. Arranged in a column layout, aligned to the start horizontally, with a row gap of 20px.`
* Subtotal `Text element, displays the label 'Subtotal'. Font size is 14px, font weight is 600.`
* box-price-product `Group element, displays the product name and price in a row. Arranged in a row layout, aligned to the start horizontally, with space between items. Has a bottom border.`
* name-your-product `Text element, displays the product name ('Template Bubble Example '). Font size is 14px, font weight is 500.`
* price-your-product `Text element, displays the product price ('R$ 197'). Font size is 14px, font weight is 500.`
* box-sum-your-cart `Group element, displays the total label and total price in a row. Arranged in a row layout, aligned to the start horizontally, with space between items. Has no bottom border.`
* Text A `Text element, displays the label 'Total à pagar'. Font size is 14px, font weight is 600.`
* Text A `Text element, displays the total price ('R$ 197'). Font size is 14px, font weight is 600.`
* box-info-payments `Group element, contains the payment information and forms. Arranged in a column layout, aligned to the stretch vertically, with padding. Has a left box shadow.`
* box-info-payments-content `Group element, contains the payment method selection, customer information, address, and payment buttons. Arranged in a column layout, aligned to the start horizontally, with a row gap of 10px. Collapses when hidden.`
* box-info-payments-action `Group element, contains the title for payment method selection. Arranged in a column layout, aligned to the start horizontally, with a row gap of 15px. Collapses when hidden.`
* title-box-payments `Text element, displays the title 'Selecione a Forma de Pagamento'. Font size is 14px, font weight is 600.`
* box-info-payments-selection-types `Group element, contains the selectable payment method options (Pix, Boleto, Card). Arranged in a column layout, aligned to the start horizontally, with a border.`
* box-info-payments-type-pix `Group element, represents the Pix payment option. Arranged in a row layout, aligned to the start horizontally, with a column gap of 6px. Has a bottom border. Visible by default. When clicked, sets the custom state 'tabs_' of 'vibe-stripe-clean-brl' to 1.`
* check-type-pix `Icon element, displays a circle icon. Likely indicates the selection status of the Pix payment method.`
* logo-pix `Icon element, displays the Pix logo. Icon color is green.`
* Pix (à vista) `Text element, displays the text 'Pix (à vista)'. Font size is 14px, font weight is 500.`
* box-info-payments-type-barcode `Group element, represents the Boleto/Barcode payment option. Arranged in a row layout, aligned to the start horizontally, with a column gap of 6px. Has a bottom border. Visible by default. When clicked, sets the custom state 'tabs_' of 'vibe-stripe-clean-brl' to 2.`
* check-barcode `Icon element, displays a circle icon. Likely indicates the selection status of the Boleto payment method.`
* logo-barcode `Icon element, displays a barcode icon.`
* Barcode (à vista) `Text element, displays the text 'Boleto (à vista)'. Font size is 14px, font weight is 500.`
* box-info-payments-type-card `Group element, represents the Credit Card payment option. Arranged in a column layout, aligned to the start horizontally, with a column gap of 6px. Has rounded corners. Collapses when hidden.`
* box-info-payments-type-card-ID `Group element, contains the card selection icon, logo, and text. Arranged in a row layout, aligned to the start horizontally, with a column gap of 6px.`
* check-card `Icon element, displays a circle icon. Likely indicates the selection status of the Credit Card payment method.`
* logo-card `Icon element, displays a credit card icon. Icon color is blue.`
* Card (em até 12x) `Text element, displays the text 'Cartão de Crédito (em até 12x)'. Font size is 14px, font weight is 500. When clicked, sets the custom state 'tabs_' of 'vibe-stripe-clean-brl' to 3.`
* box-info-payments-type-card-action `Group element, contains the credit card input fields and installments dropdown. Arranged in a column layout, aligned to the start horizontally. Not visible by default. Collapses when hidden.`
* box-info-payments-number-card `Group element, contains the card number input and card logos. Arranged in a relative layout. Has top and right rounded corners.`
* info-number-card `Input element, for entering the credit card number. Placeholder is '0000 0000 0000 0000'. Has top and right rounded corners.`
* logo-visa `Icon element, displays the Visa logo. Positioned absolutely within its parent group.`
* logo-mastercard `Icon element, displays the Mastercard logo. Positioned absolutely within its parent group.`
* c190558f-1e3b-486a-97d9-2562863e27c4 `Group element, contains the card valid date and CCV inputs, and the installments dropdown. Arranged in a row layout, aligned to the start horizontally.`
* info-valid-date `Input element, for entering the card's valid date. Placeholder is '00/0000'. Has left rounded corners.`
* info-valid-CCV `Group element, contains the CCV input and card icon. Arranged in a relative layout. Has bottom rounded corners.`
* numer-CCV `Input element, for entering the card's CCV. Placeholder is 'CVV'. Has bottom rounded corners.`
* logo-card-CCV `Icon element, displays a credit card icon. Positioned absolutely within its parent group.`
* dropdown-info-payments-installments `Dropdown element, for selecting the number of installments. Data source is the 'parcelas' option set. Default value is '1x de R$ 197'. Not visible by default. Collapses when hidden.`
* box-info-payments-customer `Group element, contains the customer information input fields. Arranged in a column layout, aligned to the start horizontally, with a row gap of 15px. Collapses when hidden.`
* title-info-customer `Text element, displays the title 'Informações do Comprador'. Font size is 14px, font weight is 600.`
* info-customer-name `Input element, for entering the customer's full name. Placeholder is 'Seu nome completo'. Has rounded corners and an outset box shadow.`
* info-customer-id `Input element, for entering the customer's CPF/CNPJ. Placeholder is 'CPF/CNPJ'. Has rounded corners and an outset box shadow.`
* info-customer-email `Input element, for entering the customer's email address. Placeholder is 'Seu email'. Has rounded corners and an outset box shadow.`
* info-customer-phone `InternationalPhoneInput element, for entering the customer's phone number. Placeholder is '00000-0000'. Default country is 'BR'. Has rounded corners and a box shadow.`
* css-info-customer-phone `HTML element, contains CSS to style the phone input element with ID 'phone-add', adding a box shadow and border radius.`
* box-info-payments-address `Group element, contains the address information input fields. Arranged in a column layout, aligned to the start horizontally, with padding at the bottom. Collapses when hidden.`
* title-info-customer-address `Text element, displays the title 'Endereço Fiscal'. Font size is 14px, font weight is 600.`
* box-info-payments-address-inputs `Group element, contains the address input fields. Arranged in a column layout, aligned to the start horizontally. Has an outset box shadow. Margin top is 15px.`
* info-customer-road `Input element, for entering the street address. Placeholder is 'Rua'. Has top and right rounded corners.`
* info-customer-number-and-district `Group element, contains the number and district input fields. Arranged in a row layout, aligned to the start horizontally.`
* info-customer-number `Input element, for entering the building number. Placeholder is 'Número'.`
* info-customer-district `Input element, for entering the district/neighborhood. Placeholder is 'Bairro'. Has top and right rounded corners.`
* ad0a3655-77a6-479f-9aff-9fb39189e557 `Group element, contains the zipcode and city input fields. Arranged in a row layout, aligned to the start horizontally.`
* info-customer-zipcode `Input element, for entering the zip code (CEP). Placeholder is 'CEP'.`
* dropdown-info-customer-city `Dropdown element, for selecting the city. Placeholder is 'Cidade'. Static choices are listed.`
* ee006202-0610-40e3-b8a4-c56f2b35d95b `Input element, for entering address complement. Placeholder is 'Complemento'. Has bottom and left rounded corners.`
* btn-pix `Button element, for initiating payment via Pix. Text is 'Pagar R$ 197 agora' with an arrow icon. Background color is primary default. Not visible by default. Collapses when hidden.`
* btn-barcode `Button element, for initiating payment via Boleto/Barcode. Text is 'Pagar R$ 197 agora' with an arrow icon. Background color is primary default. Not visible by default. Collapses when hidden.`
* btn-card `Button element, for initiating payment via Credit Card. Text is 'Pagar [dropdown-info-payments-installments's value]'. Background color is rgba(var(--color_text_default_rgb), 0.2). Not visible by default. Disabled by default. Collapses when hidden.`
* box-info-business `Group element, contains the business logo and terms/privacy text. Arranged in a row layout, aligned to the start horizontally, with a column gap of 10px.`
* your-logo `Image element, displays the business logo. Has a fixed aspect ratio and rounded corners.`
* terms-and-privacy `Text element, displays 'Termos de uso | Privacidade'. Font size is 10px, font weight is 500. Likely links to terms and privacy policies.`
When box-info-payments-type-pix is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-pix' element is clicked. Its primary purpose is to update the state of the 'vibe-stripe-clean-brl' element, likely controlling which payment method tab is currently active or displayed within the checkout interface.
### Documentation
This workflow is initiated by a user clicking on the element named 'box-info-payments-type-pix'. This element is likely a visual representation or button associated with the Pix payment method within the Vibe Stripe™ checkout template for Brazil (indicated by 'vibe-stripe-clean-brl'). Upon being clicked, the workflow proceeds to a single action: setting a custom state on another element. This action is designed to change the visual or functional state of the checkout interface, specifically related to the payment method selection.
### Actions
#### Step 1: Set state of an element
This step sets the custom state named 'tabs\_' on the element 'vibe-stripe-clean-brl'. The value assigned to this state is '1'. This action likely corresponds to selecting or activating the tab or section associated with the Pix payment method within the checkout flow managed by the 'vibe-stripe-clean-brl' element. Setting this state to '1' would typically trigger conditional visibility or data display logic elsewhere in the application to show the Pix payment input fields or information.
box-info-payments-type-barcode is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-barcode' element is clicked. Its primary purpose is to update the 'tabs\_' custom state of the 'vibe-stripe-clean-brl' element to the value '2', likely controlling which tab or section is currently visible or active within the checkout interface.
### Documentation
This workflow executes when a user clicks on the element named 'box-info-payments-type-barcode'. This element is likely a visual component, such as a button or a container, representing a payment option like a barcode payment method within the VibeCheckouts™ interface. Upon being clicked, the workflow proceeds to a single action:
1. **Set state of an element:** It targets the element named 'vibe-stripe-clean-brl' and updates its custom state named 'tabs\_'. The value of this custom state is set to '2'. This action is commonly used in Bubble applications to manage the visibility or active status of different sections or tabs within a user interface, suggesting that clicking the barcode payment option should switch the view to a section corresponding to the value '2'.
### Actions
#### Step 1: Set state
This action sets the custom state 'tabs\_' of the element 'vibe-stripe-clean-brl' to the static numeric value '2'. This is typically used to control the display of different content sections or tabs within the 'vibe-stripe-clean-brl' element, likely revealing the content related to barcode payments.
box-info-payments-type-card-ID is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-card-ID' element is clicked. Its primary purpose is to update the custom state 'tabs\_' on the 'vibe-stripe-clean-brl' element, likely controlling which tab or section is currently visible or active within the UI, specifically setting it to the value '3'. This suggests the user has selected a payment method or information type associated with the value '3', potentially related to card payments based on the element name.
### Documentation
This workflow executes when the user clicks on the element identified as 'box-info-payments-type-card-ID'. This element is likely a visual component, such as a button, group, or icon, that represents a specific payment option or information category within the VibeCheckouts™ interface. Upon clicking, the workflow proceeds to a single action: setting a custom state on another element. This action is designed to change the application's state, which in turn can dynamically update the user interface, such as showing or hiding specific groups or elements based on the new state value. The value '3' assigned to the 'tabs\_' state likely corresponds to a particular view or set of information within the checkout flow, potentially related to entering card details or viewing card-specific information.
### Actions
#### Step 1: Set state of an element
This step sets the value of a custom state on the element named 'vibe-stripe-clean-brl'. The custom state being modified is 'tabs\_'. The value assigned to this state is the number '3'. This action is typically used to control the visibility or content of other elements on the page based on the current value of the 'tabs\_' state, effectively switching between different views or sections within the 'vibe-stripe-clean-brl' element, which is likely a container for the checkout interface.
***
### Vibe Stripe Clean GLOBAL
Page Summary
The `vibe-stripe-clean-global` page is a checkout page designed for processing payments using the Stripe method within the VibeCheckouts™ application. It provides a user interface for collecting buyer information, displaying product details, and handling card payment inputs. The page is structured into two main sections: one for displaying product information and a business logo, and another for collecting payment and customer details. It includes fields for customer name, tax ID, email, phone number, and fiscal address details (street, number, district, zip code, city, complement). The payment section allows users to input card number, expiry date, and CVV. The page also displays the product name, description, price, and the total amount to be paid. A 'Pay' button is included to initiate the payment process. The page is designed with a responsive layout, adapting to different screen sizes, and incorporates visual elements like icons and logos to enhance the user experience. The workflow data indicates that clicking the `box-info-payments-type-card-ID` element triggers a workflow to set a custom state on the `vibe-stripe-clean-global` page, likely controlling the visibility or state of payment-related elements.
#### UI
* main `Group element, serves as the main container for the page content. Arranges its children in a row and centers them horizontally. Has a max width of 1200px.`
* box-info-product `Group element, displays product information. Arranges its children in a column with 60px row gap. Occupies 50% of the main container width and is vertically stretched. Collapses when hidden.`
* box-info-product-header `Group element, contains the back icon, business logo, and business name. Arranges its children in a row with 10px column gap. Fits height to content.`
* box-info-product-icon-back `Icon element, displays a left arrow icon. Likely used to navigate back to a previous page or step in the checkout process. Has a fixed size of 30x30px.`
* logo-ico-your-business `Image element, displays the business logo. Source is a static image URL. Has a fixed size of 240x240px but fits height to content and has a min width/height of 40px. Has a 1:1 aspect ratio.`
* name-your-business `Text element, displays the business name 'Propps'. Font size 14, weight 600. Fits width and height to content.`
* box-info-product-content `Group element, contains product details and pricing. Arranges its children in a column with 70px row gap. Fits height to content.`
* box-info-product-database `Group element, contains the product name, price, and plan details. Arranges its children in a column with -5px row gap. Fits height to content.`
* name-your-product `Text element, displays the product name 'Template Bubble Example'. Font size 16, color rgba(var(--color_text_default_rgb), 0.6), weight 600. Fits width and height to content.`
* box-info-product-description-price-plan `Group element, contains the product price and plan. Arranges its children in a row with 20px column gap. Fits height to content.`
* price `Text element, displays the product price 'R$ 3.600'. Font size 46, weight 700. Fits width and height to content. Has 5px right padding.`
* plan `Text element, displays the plan 'Plano Anual'. Font size 12, weight 600. Has a background color and border. Fits width and height to content. Has 5px padding on all sides. Border roundness 8.`
* description-product `Text element, displays a placeholder product description. Font size 14, weight 400. Fits width and height to content. Has a min width of 30%. Has 15px top margin.`
* box-info-product-cart `Group element, contains the subtotal and total price. Arranges its children in a column with 20px row gap. Fits height to content.`
* Subtotal `Text element, displays the label 'Subtotal'. Font size 14, weight 600. Fits width and height to content.`
* box-price-product `Group element, displays the product name and price in a row. Arranges its children in a row and spaces them between. Fits height to content. Has a solid bottom border with color rgba(var(--color_text_default_rgb), 0.2).`
* name-your-product `Text element, displays the product name 'Template Bubble Example'. Font size 14, color rgba(var(--color_text_default_rgb), 0.6), weight 500. Fits width and height to content.`
* price-your-product `Text element, displays the product price 'R$ 197'. Font size 14, color rgba(var(--color_text_default_rgb), 0.6), weight 500. Fits width and height to content.`
* box-sum-your-cart `Group element, displays the total label and total price in a row. Arranges its children in a row and spaces them between. Fits height to content. Has no bottom border.`
* Text Total à pagar `Text element, displays the label 'To pay'. Font size 14, weight 600. Fits width and height to content.`
* Text A `Text element, displays the total price 'R$ 197'. Font size 14, weight 600. Fits width and height to content.`
* box-info-business `Group element, contains the business logo and terms/privacy text. Arranges its children in a row with 10px column gap. Fits height to content.`
* your-logo `Image element, displays a logo. Source is a static image URL. Has a fixed width of 160px and fits height to content with a min height of 15px. Has a 2309:721 aspect ratio.`
* terms-and-privacy `Text element, displays 'Terms of Use | Privacy'. Font size 10, color rgba(var(--color_text_default_rgb), 0.6), weight 500. Fits width and height to content. Has a min width of 30%.`
* box-info-payments `Group element, displays payment and customer information. Arranges its children in a column and spaces them between. Occupies 50% of the main container width and is vertically stretched. Has padding on all sides and a box shadow. Collapses when hidden.`
* box-info-payments-content `Group element, contains customer and address information. Arranges its children in a column with 10px row gap. Fits height to content. Has padding on all sides. Collapses when hidden.`
* box-info-payments-customer `Group element, contains customer information inputs. Arranges its children in a column with 15px row gap. Fits height to content. Collapses when hidden.`
* title-info-customer `Text element, displays the title 'Buyer Information'. Font size 14, weight 600. Fits width and height to content.`
* info-customer-name `Input element, for entering the customer's full name. Placeholder 'Full name'. Font size 14. Has padding and a rounded border with box shadow.`
* info-customer-id `Input element, for entering the customer's tax ID. Placeholder 'ID Tax'. Font size 14. Has padding and a rounded border with box shadow.`
* info-customer-email `Input element, for entering the customer's email address. Placeholder 'E-mail'. Font size 14. Has padding and a rounded border with box shadow.`
* info-customer-phone `InternationalPhoneInput element, for entering the customer's phone number. Placeholder '00000-0000'. Default country 'BR'. Has padding and a rounded border.`
* css-info-customer-phone `HTML element, contains CSS to style the InternationalPhoneInput element, adding box shadow and border radius.`
* box-info-payments-address `Group element, contains address information inputs. Arranges its children in a column. Fits height to content. Has 15px top margin and 30px bottom padding. Collapses when hidden.`
* title-info-customer-address `Text element, displays the title 'Fiscal Address'. Font size 14, weight 600. Fits width and height to content.`
* box-info-payments-address-inputs `Group element, contains the address input fields. Arranges its children in a column. Fits height to content. Has 15px top margin. Collapses when hidden.`
* info-customer-road `Input element, for entering the street address. Placeholder 'Street'. Font size 14. Has padding and borders on top, left, and right. Border roundness 8 on top and right.`
* info-customer-number-and-district `Group element, contains the number and district inputs in a row. Fits height to content.`
* info-customer-number `Input element, for entering the address number. Placeholder 'Number'. Font size 14. Has padding and borders on top, left, and right. Min width 30%. Border roundness 8 on top and left.`
* info-customer-district `Input element, for entering the district. Placeholder 'District'. Font size 14. Has padding and borders on top and right. Min width 70%. Border roundness 8 on top and right.`
* info-customer-zipcode-and-city `Group element, contains the zip code and city inputs in a row. Fits height to content.`
* info-customer-zipcode `Input element, for entering the zip code. Placeholder 'Zip Code'. Font size 14. Has padding and borders on top, left, and right. Min width 30%. Border roundness 8 on top and left.`
* dropdown-info-customer-city `Dropdown element, for selecting the city. Placeholder 'City'. Font size 14. Has padding and borders on top and right. Min width 70%. Border roundness 8 on top and right. Choices are a static list of cities.`
* info-customer-complement `Input element, for entering the address complement. Placeholder 'Complement'. Font size 14. Has padding and borders on top, left, and bottom. Border roundness 8 on left and bottom.`
* box-info-payments-action `Group element, contains payment method selection and the pay button. Arranges its children in a column with 15px row gap. Fits height to content. Collapses when hidden.`
* title-box-payments `Text element, displays the title 'Payment Details'. Font size 14, weight 600. Fits width and height to content.`
* box-info-payments-selection-types `Group element, contains payment type selection elements (currently only card). Arranges its children in a column. Fits height to content. Has a solid border with roundness 8.`
* box-info-payments-type-card `Group element, represents the card payment option. Arranges its children in a column with 6px column gap. Fits height to content. Has padding and borders with roundness 8. Collapses when hidden. When clicked, triggers a workflow to set the custom state 'custom.tabs_' on the page to 3.`
* box-info-payments-type-card-ID `Group element, contains the card icon and text label. Arranges its children in a row with 6px column gap. Fits height to content. Collapses when hidden. When clicked, triggers a workflow to set the custom state 'custom.tabs_' on the page to 3.`
* logo-card `Icon element, displays a credit card icon. Icon color rgba(0,115,230,1). Has a fixed size of 30x30px.`
* Card (em até 12x) `Text element, displays 'Card Information'. Font size 14, color rgba(var(--color_text_default_rgb), 0.6), weight 500. Fits width and height to content.`
* box-info-payments-type-card-action `Group element, contains the card input fields. Arranges its children in a column. Fits height to content. Has 5px top and bottom margin. Collapses when hidden.`
* box-info-payments-number-card `Group element, contains the card number input and card logos. Arranges its children in a relative layout. Fits height to content. Has a background color and borders with roundness 8 on top and right.`
* info-number-card `Input element, for entering the card number. Placeholder '0000 0000 0000 0000'. Font size 14. Has padding and borders on top, left, and right. Border roundness 8 on top and right.`
* logo-visa `Icon element, displays a Visa card icon. Icon color rgba(var(--color_text_default_rgb), 0.5). Has a fixed size of 30x30px. Has 10px right margin.`
* logo-mastercard `Icon element, displays a Mastercard icon. Icon color rgba(var(--color_text_default_rgb), 0.5). Has a fixed size of 30x30px. Has 35px right margin.`
* box-info-payments-valid-card `Group element, contains the expiry date and CVV inputs in a row. Fits height to content.`
* info-valid-date `Input element, for entering the card expiry date. Placeholder '00/0000'. Font size 14. Has padding and borders on top, left, and bottom. Min width 50%. Border roundness 8 on left.`
* info-valid-CCV `Group element, contains the CVV input and icon. Arranges its children in a relative layout. Fits height to content. Has a background color and borders with roundness 8 on bottom.`
* numer-CCV `Input element, for entering the card CVV. Placeholder 'CVV'. Font size 14. Has padding and borders on top, right, and bottom. Min width 50%. Border roundness 8 on bottom.`
* logo-card-CCV `Icon element, displays a credit card icon. Icon color rgba(var(--color_text_default_rgb), 0.5). Has a fixed size of 30x30px. Has 10px right margin.`
* btn-card `Button element, labeled 'Pay R$ 197'. Font size 12, weight 600. Has a background color and rounded border. Has a right arrow icon. Is disabled by default. Has 15px top margin. Collapses when hidden. When clicked, likely triggers a workflow to process the payment using the entered card details.`
When box-info-payments-type-card-ID is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-card-ID' element is clicked. Its primary purpose is to update the 'tabs\_' custom state of the 'vibe-stripe-clean-global' element to the value '3'. This action likely controls the visibility or active state of different sections within the 'vibe-stripe-clean-global' element, specifically switching to a view associated with the value '3', which based on the element name, is probably related to displaying card payment information.
### Documentation
This workflow executes when a user clicks on the element named 'box-info-payments-type-card-ID'. This element is likely a visual container or button representing a payment method option, specifically for card payments, within the VibeCheckouts™ interface. Upon being clicked, the workflow proceeds to a single action. This action sets the value of the 'tabs\_' custom state on the 'vibe-stripe-clean-global' element to the number '3'. The 'vibe-stripe-clean-global' element is likely the main container or page element for the Stripe-inspired checkout template. The 'tabs\_' custom state is used to manage which section or 'tab' of the checkout interface is currently visible or active. Setting it to '3' indicates a transition to a specific view, most likely the section where the user can input their credit card details.
### Actions
#### Step 1: Set state of vibe-stripe-clean-global
This action sets the value of a custom state on the element named 'vibe-stripe-clean-global'. The custom state being modified is 'tabs\_'. The value assigned to this custom state is the number '3'. This change in the custom state will likely trigger conditional visibility or other dynamic behaviors on elements within 'vibe-stripe-clean-global', causing the interface to update and display the content associated with the 'tabs\_' value of '3', which is inferred to be the card payment input section.
***
### Vibe Stripe ADDONS
Page Summary
The `vibe-stripe-addons` page is a checkout page designed for the VibeCheckouts™ Stripe template with added features. It allows users to enter their customer information, including name, email, and tax ID, as well as their fiscal address details like street, number, district, zip code, and city. The page also includes sections for payment details, specifically for card information (number, expiry date, CVV), and an option to apply a discount coupon. A 'buy together' section is present, allowing users to add an additional product to their cart. The page displays product information, including the main product and the 'buy together' product if selected, along with their prices and the subtotal. A floating countdown timer is prominently displayed, indicating a limited-time offer. The page header includes the business logo and a back icon to return to the index page. The primary function of this page is to collect necessary information from the user and process a payment via card, potentially including an upsell product and a discount.
#### UI
* main `Group: The main container for the page content, centered horizontally with a top margin of 70px. It uses a row layout and centers its vertical content.`
* box-info-product `Group: Contains the product information section. It has a column layout with a gap of 60px and is vertically stretched. It is visible by default.`
* box-info-product-header `Group: Contains the back icon, business logo, and business name. It has a row layout with a column gap of 10px and centers its vertical content.`
* box-info-product-icon-back `Icon: Displays a left arrow icon. When clicked, it navigates the user to the 'index' page.`
* logo-ico-your-business `Image: Displays the business logo. The image source is a static SVG file.`
* name-your-business `Text: Displays the business name, 'Propps'.`
* box-info-product-content `Group: Contains the main product details and the 'buy together' section. It has a column layout with a row gap of 45px and centers its vertical content.`
* box-info-product-database `Group: Contains the main product name, description, price, and plan details. It has a column layout with a row gap of -5px and centers its vertical content.`
* name-your-product `Text: Displays the main product name, 'Template Bubble Example'.`
* box-info-product-description-price-plan `Group: Contains the product price and plan details. It has a row layout with a column gap of 20px and centers its vertical content.`
* price `Text: Displays the main product price, 'R$ 3.600'.`
* plan `Text: Displays the product plan, 'Plano Anual'. It has a background color and border.`
* description-product `Text: Displays a placeholder description for the main product.`
* box-info-but-togheter `Group: Contains the 'buy together' section, including the title and the selection box. It has a column layout with a row gap of 10px and centers its vertical content.`
* title-buy-together `Text: Displays the title for the 'buy together' section, 'Buy together'.`
* box-info-but-togheter-selection `Group: Contains the 'buy together' call to action and description. It has a column layout with a dashed border and is vertically centered. It collapses when hidden.`
* box-info-but-togheter-cta `Group: Contains the checkbox and description for the 'buy together' offer. It has a row layout with a background color and is vertically centered. It collapses when hidden. When clicked, if 'check-buy-together' is not selected, it sets 'check-buy-together' to true. If 'check-buy-together' is selected, it sets 'check-buy-together' to false.`
* check-buy-together `Icon: Displays a square icon representing a checkbox. It has a custom state 'custom.selecionado_'. When clicked, if its custom state 'custom.selecionado_' is 'no', it sets 'custom.selecionado_' to true. When clicked, if its custom state 'custom.selecionado_' is 'yes', it sets 'custom.selecionado_' to false.`
* cta-description `Text: Displays a placeholder description for the 'buy together' offer.`
* description-product `Text: Displays a placeholder description for the 'buy together' product.`
* box-info-product-cart copy `Group: Contains the price details for the main product, the 'buy together' product (if selected), the discount (if applied), and the total. It has a column layout with a row gap of 20px and centers its vertical content.`
* Subtotal `Text: Displays the label 'Subtotal'.`
* box-price-product `Group: Displays the price of the main product. It has a row layout with a bottom border and space between horizontal alignment.`
* name-your-product `Text: Displays the name of the main product, 'Template Bubble Example'.`
* price-your-product `Text: Displays the price of the main product, 'R$ 197'.`
* box-price-product-buy-together `Group: Displays the price of the 'buy together' product. It has a row layout with a bottom border and space between horizontal alignment. It is not visible by default and collapses when hidden.`
* name-your-product `Text: Displays the name of the 'buy together' product, 'Product Buy Together'.`
* price-your-product `Text: Displays the price of the 'buy together' product, 'R$ 197'.`
* box-price-product-add-coupon `Group: Displays the discount applied by a coupon. It has a row layout with a bottom border and space between horizontal alignment. It is visible by default and collapses when hidden.`
* name-your-product `Text: Displays the label 'Add coupon'.`
* price-your-product `Text: Displays the discount amount, '- R$ 97'.`
* box-sum-your-cart `Group: Displays the total amount to be paid. It has a row layout with no bottom border and space between horizontal alignment.`
* Text Total à pagar `Text: Displays the label 'To pay'.`
* Text D `Text: Displays the total amount to be paid, 'R$ 100'.`
* box-info-business `Group: Contains the terms and privacy text. It has a row layout with a column gap of 10px and centers its vertical content.`
* terms-and-privacy `Text: Displays the text 'Terms of Use | Privacy'.`
* box-info-payments `Group: Contains the payment and customer information sections. It has a column layout with vertical stretch and space between vertical alignment. It has a box shadow.`
* box-info-payments-content `Group: Contains the payment details, customer information, discount coupon, and action button. It has a column layout with a row gap of 10px and centers its vertical content. It collapses when hidden.`
* box-info-payments-action `Group: Contains the payment details title and payment type selection. It has a column layout with a row gap of 15px and centers its vertical content. It collapses when hidden.`
* title-box-payments `Text: Displays the title 'Payment Details'.`
* box-info-payments-selection-types `Group: Contains the card payment type section. It has a column layout with a border and rounded corners and centers its vertical content.`
* box-info-payments-type-card `Group: Contains the card information input fields. It has a column layout with a row gap of 6px, padding, and a border with rounded corners. It collapses when hidden.`
* box-info-payments-type-card-ID `Group: Contains the card type logo and label. It has a row layout with a column gap of 6px and centers its vertical content.`
* logo-card `Icon: Displays a credit card icon.`
* Card (em até 12x) `Text: Displays the label 'Card Information'.`
* box-info-payments-number-card `Group: Contains the card number input and card logos. It has a relative layout with a background color and rounded corners.`
* info-number-card `Input: Input field for the card number. Placeholder is '0000 0000 0000 0000'. It has a bottom border.`
* logo-visa `Icon: Displays a Visa logo icon.`
* logo-mastercard `Icon: Displays a Mastercard logo icon.`
* box-info-payments-valid-card `Group: Contains the expiry date and CVV inputs. It has a row layout and centers its vertical content.`
* info-valid-date `Input: Input field for the card expiry date. Placeholder is '00/0000'. It has left and bottom borders and rounded left corners.`
* info-valid-CCV `Group: Contains the CVV input and icon. It has a relative layout with a background color and rounded bottom corners.`
* numer-CCV `Input: Input field for the card CVV. Placeholder is 'CVV'. It has top, right, and bottom borders and rounded bottom corners.`
* logo-card-CCV `Icon: Displays a credit card icon.`
* box-info-payments-customer `Group: Contains the buyer information section. It has a column layout with a row gap of 15px and centers its vertical content. It collapses when hidden.`
* title-info-customer `Text: Displays the title 'Buyer Information'.`
* info-customer-name `Input: Input field for the customer's full name. Placeholder is 'Full name'. It has a box shadow and rounded corners.`
* info-customer-id `Input: Input field for the customer's tax ID. Placeholder is 'ID Tax'. It has a box shadow and rounded corners.`
* info-customer-email `Input: Input field for the customer's email address. Placeholder is 'E-mail'. It has a box shadow and rounded corners.`
* info-customer-phone `InternationalPhoneInput: Input field for the customer's phone number with international formatting. Placeholder is '00000-0000'. It has rounded corners.`
* css-info-customer-phone `HTML: Contains CSS to style the phone number input field.`
* box-info-payments-address `Group: Contains the fiscal address section. It has a column layout with a bottom padding of 30px and centers its vertical content. It collapses when hidden.`
* title-info-customer-address `Text: Displays the title 'Fiscal Address'.`
* box-info-payments-address-inputs `Group: Contains the address input fields. It has a column layout with a top margin of 15px and centers its vertical content. It has a box shadow and rounded corners.`
* info-customer-road `Input: Input field for the street address. Placeholder is 'Street'. It has top, left, and right borders and rounded top and right corners.`
* info-customer-number-and-district `Group: Contains the number and district input fields. It has a row layout and centers its vertical content.`
* info-customer-number `Input: Input field for the address number. Placeholder is 'Number'. It has top, left, and right borders.`
* info-customer-district `Input: Input field for the district. Placeholder is 'District'. It has top, left, and right borders.`
* info-customer-zipcode-and-city `Group: Contains the zip code and city input fields. It has a row layout and centers its vertical content.`
* info-customer-zipcode `Input: Input field for the zip code. Placeholder is 'Zip Code'. It has top, left, and right borders.`
* dropdown-info-customer-city `Dropdown: Dropdown for selecting the city. Placeholder is 'City'. Choices are a static list of cities. It has top, left, and right borders.`
* info-customer-complement `Input: Input field for the address complement. Placeholder is 'Complement'. It has top, left, right, and bottom borders and rounded left and bottom corners.`
* box-info-payments-discount-coupon `Group: Contains the discount coupon section. It has a column layout with a bottom padding of 30px and centers its vertical content. It collapses when hidden.`
* title-info-customer-address `Text: Displays the title 'Discount Coupon'.`
* box-info-payments-address-inputs `Group: Contains the coupon input field and apply button. It has a row layout with a border and rounded corners and centers its vertical content.`
* info-customer-coupon `Input: Input field for the discount coupon code. Placeholder is 'Add coupon'. It has no border.`
* btn-apply `Button: Button to apply the discount coupon. Text is 'Apply'. It is disabled by default and collapses when hidden.`
* btn-card `Button: Button to initiate the payment. Text is 'Pay R$ 197'. It is disabled by default and collapses when hidden.`
* float-countdown `FloatingGroup: A floating group that displays the countdown timer. It has a background color and a column layout with centered vertical and horizontal content.`
* float-countdown-content `Group: Contains the countdown timer text and the countdown engine element. It has a row layout with centered vertical and horizontal content. It collapses when hidden.`
* CountDown-Engine-A `CountDown: A plugin element that manages the countdown timer. On page load, it is set to count down from the current date/time plus 15 minutes.`
* CountDown-Price `Text: Displays the countdown timer text, showing the remaining time from the 'CountDown-Engine-A' element.`
When check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to update the state of the 'check-buy-together' element itself, specifically setting its 'selecionado\_' custom state to 'no' (false), but only if the element's 'selecionado\_' state is currently 'yes' (true). This suggests it's part of a toggle or selection mechanism, likely related to an 'add-on' or 'buy together' feature within the VibeCheckouts™ context.
### Documentation
This workflow is initiated when a user clicks on the element named 'check-buy-together'. This element appears to be a checkbox or similar interactive element used to indicate selection, possibly for an additional item or offer related to the main checkout process in VibeCheckouts™. The workflow includes a condition that must be met for any actions to run: the 'selecionado\_' custom state of the 'check-buy-together' element must currently be 'yes'. If this condition is true, the workflow proceeds to its single action. The action sets the 'selecionado\_' custom state of the 'check-buy-together' element to 'no'. This effectively toggles the state from selected ('yes') to unselected ('no') when the element is clicked, but only if it was previously selected. This pattern is typical for implementing a toggle functionality where clicking an already selected item deselects it.
### Actions
#### Step 1: Set state of check-buy-together
This action sets the custom state 'selecionado\_' of the element 'check-buy-together' to 'no' (represented by the boolean value 'false'). This step only runs if the condition on the workflow trigger is met, which is that the 'selecionado\_' state of 'check-buy-together' is currently 'yes'.
Page is loaded
### Summary
This workflow is triggered when the page finishes loading. Its primary purpose is to initialize a countdown timer element on the page, setting its start and end times based on the current date and time.
### Documentation
This workflow executes automatically when the page has fully loaded in the user's browser. It contains a single action that interacts with a specific element on the page. The workflow calculates a future time by adding 15 minutes to the current date and time. This calculated time is then used to configure a countdown timer element, likely to display a limited-time offer or event duration.
### Actions
#### Step 1: Set Countdown-Engine-A
This action targets the element named 'CountDown-Engine-A'. It sets the start time of this countdown element to the current date and time. It also calculates the end time by taking the current date and time and adding 15 minutes to it. The action also sets a text value for the countdown element, which appears to be the word "Minuto" (Minute in Portuguese), likely used as a label or unit display within the countdown.
When your-logo is clicked
### Summary
This workflow is triggered when the 'your-logo' element is clicked. Its primary purpose is to navigate the user back to the 'index' page of the application.
### Documentation
This workflow is initiated by the 'An element is clicked' event, specifically when the element named 'your-logo' is interacted with by the user. This is a common pattern for navigation elements like a company logo, allowing users to easily return to the main landing page or dashboard of the application. The workflow consists of a single action that directs the browser to load the 'index' page.
### Actions
#### Step 1: Go to page
This action navigates the user's browser to a different page within the application. In this specific step, the destination page is set to 'index'. This effectively takes the user back to the application's main page.
check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element itself, but only if the state is currently 'no'. This suggests it's part of a mechanism to select or deselect an option, likely related to adding an item or service (implied by 'buy-together') to a checkout or order, preventing the state from being set to 'true' if it's already 'true'.
### Documentation
This workflow executes when the user clicks on the element named 'check-buy-together'. This element likely represents a checkbox or a similar interactive UI component within the application, potentially related to an upsell or bundled product option in the VibeCheckouts™ context. The workflow is conditional: it will only proceed if the 'selecionado\_' custom state of the 'check-buy-together' element is currently set to 'no'. If this condition is met, the workflow proceeds to its single action.
### Actions
#### Step 1: Set state of an element
This action sets the custom state 'selecionado\_' of the element 'check-buy-together' to the value 'true'. This effectively marks the 'buy-together' option as selected within the application's state, likely triggering subsequent UI changes or logic based on this selection.
box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to toggle the state of the 'check-buy-together' element, specifically setting its 'selecionado\_' custom state to 'no' (false), but only if the 'selecionado\_' state is currently 'yes' (true). This suggests it's part of a mechanism to deselect a 'buy together' option.
### Documentation
This workflow is initiated when a user clicks on the element named 'box-info-but-togheter-cta'. This element likely represents a container or button associated with a 'buy together' feature within the VibeCheckouts™ application. The workflow is conditional: it will only proceed if the custom state 'selecionado\_' of the element 'check-buy-together' is currently set to 'yes'. If this condition is met, the workflow executes a single action to update the state of the 'check-buy-together' element.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element named 'check-buy-together' to 'no' (false). This action effectively deselects the 'buy together' option associated with the 'check-buy-together' element, but only if the workflow's trigger condition (the state being 'yes') was true.
When box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element, but only if that state is currently 'no'. This suggests it's part of a mechanism to select or activate a 'buy together' option within the checkout process.
### Documentation
This workflow executes when a user clicks on the element named 'box-info-but-togheter-cta'. This action is conditional: the workflow will only proceed if the custom state 'selecionado\_' of the element 'check-buy-together' is currently set to 'no'. If this condition is met, the workflow proceeds to its single action.
The single action in this workflow is to set the 'selecionado\_' custom state of the 'check-buy-together' element to 'yes'. This effectively marks the 'buy together' option as selected or active within the application's state.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element named 'check-buy-together' to the value 'yes'. This action is contingent on the workflow's trigger condition being met, meaning it only happens if the 'selecionado\_' state was previously 'no'.
***
### Vibe Hotmart Clean BRL (Brazil)
Page Summary
The `vibe-hotmart-clean-brl` page is a checkout page designed for the Brazilian market, inspired by the Hotmart platform. It allows users to review product details, enter customer information (name, email, ID, phone, and address), select a payment method (Pix, Boleto, or Credit Card), and proceed with the payment. The page dynamically displays input fields and payment buttons based on the selected payment method. It includes sections for product information, customer details, payment options, and a summary of the purchase. The page also features a logo and links to terms of use and privacy policy.
#### UI
* main `Group element that serves as the main container for the page content. It is centered horizontally and vertically, with a maximum width of 1200px and padding at the bottom.`
* box-info-payments `Group element containing all payment-related information and actions. It has a fixed width of 280px (responsive to 50% minimum width), padding, a border, and a subtle box shadow. It is a column container with space between items and collapses when hidden.`
* box-info-payments-content `Group element containing the core payment form and product details. It has padding and is a column container with vertical centering. It collapses when hidden.`
* box-info-product-content `Group element displaying product information. It has a row gap of 10px and is a column container with vertical centering.`
* box-info-product-header `Group element containing the product logo and name. It has a column gap of 10px and is a row container with vertical centering.`
* logo-ico-your-business `Image element displaying the product or business logo. Source is a static image URL.`
* box-info-product-database `Group element containing the product name, description, price, and plan details. It has a row gap of -5px and is a column container with vertical centering.`
* name-your-product `Text element displaying the name of the product. Static text: 'Template Bubble Example '.`
* 04330b2f-3010-480f-b2cb-adf7d0bb8d8e `Group element containing the product price and plan information. It has a column gap of 20px and is a row container with vertical centering.`
* price `Text element displaying the product price. Static text: 'R$ 3.600'. Font size is large and bold.`
* plan `Text element displaying the product plan. Static text: 'Plano Anual'. It has a background color and border, styled as a tag.`
* divider-section `Shape element acting as a horizontal divider. It has a fixed height of 1px and collapses when hidden.`
* box-info-product-cart `Group element summarizing the items in the cart. It has a row gap of 20px and is a column container with vertical centering.`
* 1c4b3a0c-8367-4241-a3c4-67217424978d `Text element displaying the title for the cart details. Static text: 'Detalhes da Compra'.`
* box-price-product `Group element displaying the product name and price in the cart summary. It has a bottom border and is a row container with space between items.`
* name-your-product `Text element displaying the product name in the cart summary. Static text: 'Template Bubble Example '.`
* price-your-product `Text element displaying the product price in the cart summary. Static text: 'R$ 197'.`
* 36773f7e-dc48-4b80-bd47-0810a283af0b `Group element displaying the total amount to pay. It has a bottom border and is a row container with space between items.`
* Text C `Text element displaying the label 'Total à pagar'.`
* Text C `Text element displaying the total price. Static text: 'R$ 197'.`
* description-product `Text element displaying a description of the product. Static text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac congue nisl, ac dapibus nisi. Etiam vitae sapien metus. Etiam imperdiet in nibh ut semper. Cras bibendum luctus mi, tincidunt semper est feugiat non. Nulla vitae tempus purus, eu aliquam dui. Nunc eu scelerisque enim, at placerat arcu.'.`
* box-info-payments-customer `Group element containing input fields for customer information. It has a row gap of 15px and is a column container with vertical centering. It collapses when hidden.`
* title-info-customer `Text element displaying the title for customer information. Static text: 'Informações do Comprador'.`
* info-customer-name `Input element for the customer's full name. Placeholder: 'Seu nome completo'.`
* info-customer-id `Input element for the customer's CPF/CNPJ. Placeholder: 'CPF/CNPJ'.`
* info-customer-email `Input element for the customer's email address. Placeholder: 'Seu email'.`
* info-customer-phone `InternationalPhoneInput element for the customer's phone number. Placeholder: '00000-0000'. Pre-selected country is Brazil ('BR').`
* css-info-customer-phone `HTML element containing CSS to style the phone input element, adding box shadow and border radius.`
* box-info-payments-address `Group element containing input fields for the customer's address. It has a row gap of 15px and is a column container with vertical centering. It collapses when hidden.`
* title-info-customer-address `Text element displaying the title for the address information. Static text: 'Endereço Fiscal'.`
* box-info-payments-address-inputs `Group element containing the address input fields. It is a column container with vertical centering.`
* info-customer-road `Input element for the customer's street address. Placeholder: 'Rua'.`
* cc7612b0-0847-4bcf-8466-4dd20708ed3b `Group element containing the number and district input fields. It is a row container with vertical centering.`
* info-customer-number `Input element for the customer's address number. Placeholder: 'Número'.`
* info-customer-district `Input element for the customer's district. Placeholder: 'Bairro'.`
* efe0cf18-b31a-407a-afdf-394563e00357 `Group element containing the zipcode and city input fields. It is a row container with vertical centering.`
* info-customer-zipcode `Input element for the customer's zipcode. Placeholder: 'CEP'.`
* dropdown-info-customer-city `Dropdown element for selecting the customer's city. Static choices: São Paulo, Rio de Janeiro, Brasília, Salvador, Fortaleza, Belo Horizonte, Manaus, Curitiba, Recife, Goiânia. Placeholder: 'Cidade'.`
* ae80fbbe-e6fb-48d1-b12d-5af49714f369 `Input element for the customer's address complement. Placeholder: 'Complemento'.`
* box-info-payments-action `Group element containing the payment method selection and action buttons. It has a row gap of 15px and is a column container with vertical centering. It collapses when hidden.`
* title-box-payments `Text element displaying the title for payment method selection. Static text: 'Selecione a Forma de Pagamento'.`
* box-info-payments-selection-types `Group element containing the different payment method options (Pix, Boleto, Card). It is a column container with vertical centering.`
* box-info-payments-type-pix `Group element representing the Pix payment option. It has a bottom border and is a row container. It is visible by default and collapses when hidden. When clicked, it triggers a workflow to set the custom state 'tabs_' of element 'vibe-hotmart-clean-brl' to 1.`
* check-type-pix `Icon element displaying a circle, likely indicating the selection status of the Pix option. Icon color is rgba(var(--color_text_default_rgb), 0.5).`
* logo-pix `Icon element displaying the Pix logo. Icon color is rgba(24,177,121,1).`
* Pix (à vista) `Text element displaying the text 'Pix (à vista)'.`
* box-info-payments-type-barcode `Group element representing the Boleto payment option. It has a bottom border and is a row container. It is visible by default and collapses when hidden. When clicked, it triggers a workflow to set the custom state 'tabs_' of element 'vibe-hotmart-clean-brl' to 2.`
* check-barcode `Icon element displaying a circle, likely indicating the selection status of the Boleto option. Icon color is rgba(var(--color_text_default_rgb), 0.5).`
* logo-barcode `Icon element displaying a barcode icon.`
* Barcode (à vista) `Text element displaying the text 'Boleto (à vista)'.`
* cc1dbd2f-99aa-4990-9ec2-661f6dec44f8 `Group element representing the Credit Card payment option. It has padding and is a column container. It collapses when hidden. When clicked, it triggers a workflow to set the custom state 'tabs_' of element 'vibe-hotmart-clean-brl' to 3.`
* d2f1d516-9fc5-480a-81cf-a2a837146820 `Group element containing the card payment type selection indicator, card icon, and text. It has a column gap of 6px and is a row container with vertical centering.`
* check-card `Icon element displaying a circle, likely indicating the selection status of the Card option. Icon color is rgba(var(--color_text_default_rgb), 0.5).`
* logo-card `Icon element displaying a credit card icon.`
* Card (em até 12x) `Text element displaying the text 'Cartão de Crédito (em até 12x)'.`
* aae3e2a8-b371-4cf4-93ad-8f15568b2538 `Group element containing the credit card input fields (number, valid date, CCV, installments). It is a column container with vertical centering. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the custom state 'tabs_' of the parent page, being visible when 'tabs_' is 3.`
* 7c91e5ec-5b88-4a68-aedd-ba201712b79a `Group element containing the card number input and card logos. It is a relative container.`
* info-number-card `Input element for the credit card number. Placeholder: '0000 0000 0000 0000'.`
* logo-visa `Icon element displaying the Visa logo. Icon color is rgba(var(--color_text_default_rgb), 0.5).`
* logo-mastercard `Icon element displaying the Mastercard logo. Icon color is rgba(var(--color_text_default_rgb), 0.5).`
* c212e42c-c472-409d-9373-5ebde5a14bdf `Group element containing the card valid date and CCV input fields. It is a row container with vertical centering.`
* info-valid-date `Input element for the credit card valid date. Placeholder: '00/0000'.`
* 1d129f1f-c214-4791-a7e5-9659b0b6e5b1 `Group element containing the CCV input and card icon. It is a relative container.`
* numer-CCV `Input element for the credit card CCV. Placeholder: 'CVV'.`
* logo-card-CCV `Icon element displaying a credit card icon.`
* dropdown-info-payments-installments `Dropdown element for selecting the number of installments for credit card payment. Choices are static, representing different installment options and prices. Placeholder: 'Selecionar Parcelas'. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the custom state 'tabs_' of the parent page, being visible when 'tabs_' is 3.`
* btn-pix `Button element to initiate payment via Pix. Text: 'Pagar R$ 197 agora'. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the custom state 'tabs_' of the parent page, being visible when 'tabs_' is 1.`
* btn-barcode `Button element to initiate payment via Boleto. Text: 'Pagar R$ 197 agora'. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the custom state 'tabs_' of the parent page, being visible when 'tabs_' is 2.`
* btn-card `Button element to initiate payment via Credit Card. Text dynamically displays 'Pagar ' followed by the selected value from the 'dropdown-info-payments-installments' element. It is not visible by default, is disabled by default, and collapses when hidden. Its visibility is likely controlled by the custom state 'tabs_' of the parent page, being visible when 'tabs_' is 3. Its disabled state is likely controlled by the validity of the credit card input fields.`
* box-info-business `Group element containing the business logo and terms/privacy links. It has a column gap of 10px and is a row container with vertical centering.`
* your-logo `Image element displaying the business logo. Source is a static image URL.`
* terms-and-privacy `Text element displaying links to the terms of use and privacy policy. Static text: 'Termos de uso | Privacidade'.`
When box-info-payments-type-pix is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-pix' element is clicked. Its primary purpose is to update the 'tabs\_' custom state of the 'vibe-hotmart-clean-brl' element to the value '1'. This action likely controls the visibility or active state of different payment method sections within the checkout interface, specifically highlighting or selecting the Pix payment option.
### Documentation
This workflow is initiated by an 'An element is clicked' event, specifically when the element named 'box-info-payments-type-pix' is interacted with by the user. This element is likely a visual representation or button associated with selecting Pix as the payment method within the Vibe Hotmart™ checkout template. Upon clicking this element, the workflow proceeds to a single action. The action is a 'Set state' action targeting the element named 'vibe-hotmart-clean-brl'. This element is likely the main container or a key group within the checkout template. The custom state being modified is named 'tabs\_'. The value being assigned to this custom state is the number '1'. In the context of a tabbed or multi-step interface, setting the 'tabs\_' state to '1' typically indicates a transition to or activation of the first tab or section, which in this case, corresponds to the Pix payment option.
### Actions
#### Step 1: Set state
This step sets the value of a custom state on a specific element. The target element is 'vibe-hotmart-clean-brl', which is likely the main group or container for the checkout interface. The custom state being modified is 'tabs\_'. The value assigned to this state is the number '1'. This action is used to control the active tab or section within the checkout, likely displaying the content related to the Pix payment method.
When box-info-payments-type-card-ID is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-card-ID' element is clicked. Its primary purpose is to update the 'tabs\_' custom state of the 'vibe-hotmart-clean-brl' element to the value '3'. This action likely controls which tab or section is currently visible or active within the 'vibe-hotmart-clean-brl' element, specifically switching to the section corresponding to the value '3'.
### Documentation
This workflow is initiated when a user clicks on the element identified as 'box-info-payments-type-card-ID'. Upon this click event, the workflow executes a single action. The action targets the element named 'vibe-hotmart-clean-brl' and modifies its custom state named 'tabs\_'. The value of this custom state is set to the number '3'. This is a common pattern in Bubble applications to manage the visibility or active status of different content sections within a single element, effectively simulating tabs or steps in a process. Setting the 'tabs\_' state to '3' will likely cause the content associated with tab/step 3 within the 'vibe-hotmart-clean-brl' element to become visible or active, while other sections might be hidden.
### Actions
#### Step 1: Set state of an element
This step sets the value of a custom state on a specific element. The target element is 'vibe-hotmart-clean-brl', and the custom state being modified is 'tabs\_'. The value assigned to this state is the number '3'. This action is typically used to control the display of different content panels or sections within the target element, based on the value of this state.
When box-info-payments-type-barcode is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-barcode' element is clicked. Its primary purpose is to update the 'tabs\_' custom state of the 'vibe-hotmart-clean-brl' element to the value '2'. This action likely controls which tab or section is currently visible or active within the 'vibe-hotmart-clean-brl' element, specifically switching to a section related to barcode payments.
### Documentation
This workflow is initiated when a user clicks on the element named 'box-info-payments-type-barcode'. This element is likely a visual representation or button associated with selecting barcode as a payment method within the Vibe Hotmart™ checkout template. Upon being clicked, the workflow executes a single action: setting the value of a custom state. The custom state being modified is named 'tabs\_' and belongs to the element 'vibe-hotmart-clean-brl'. The value assigned to this custom state is the number '2'. In the context of a tabbed interface, setting the 'tabs\_' state to '2' typically means activating or displaying the second tab or section within the 'vibe-hotmart-clean-brl' element, which is inferred to be the section dedicated to handling barcode payment information or instructions.
### Actions
#### Step 1: Set state
This action sets the value of a custom state on a specific element. The element targeted is 'vibe-hotmart-clean-brl'. The custom state being modified is 'tabs\_'. The value assigned to this state is the number '2'. This is used to control the visibility or active status of different sections or tabs within the 'vibe-hotmart-clean-brl' element, likely switching to the section corresponding to barcode payments.
***
### Vibe Hotmart Clean GLOBAL
Page Summary
The `vibe-hotmart-clean-global` page is a checkout page template designed for Bubble developers using the VibeCheckouts™ plugin. It provides a pre-built, optimized checkout flow inspired by Hotmart, tailored for global use. The page displays product information, collects buyer details (name, email, phone, address), and handles payment information, specifically for card payments. The layout is responsive, adapting to different screen sizes. The primary function is to facilitate the secure collection of necessary information to process a payment for a product or service.
#### UI
* main `Group element, serves as the main container for the page content. It is centered horizontally and vertically, with a maximum width of 1200px and padding at the bottom. It uses a row layout.`
* box-info-payments `Group element, contains all payment-related information and inputs. It has a border, padding, and a subtle box shadow. It uses a column layout and collapses when hidden.`
* box-info-payments-content `Group element, contains the core payment form elements. It uses a column layout with gaps and collapses when hidden.`
* box-info-product-content `Group element, displays product information. It uses a column layout with gaps.`
* box-info-product-header `Group element, contains the product logo and name. It uses a row layout with gaps.`
* logo-ico-your-business `Image element, displays the logo of the business. Source is a static image URL.`
* box-info-product-database `Group element, contains the product name, price, and plan details. It uses a column layout with gaps.`
* name-your-product `Text element, displays the name of the product. Static text "Template Bubble Example ".`
* box-info-product-description-price-plan `Group element, displays the product price and plan. It uses a row layout with gaps.`
* price `Text element, displays the product price. Static text "R$ 3.600".`
* plan `Text element, displays the product plan. Static text "Plano Anual". Has a background color and border.`
* box-info-payments-action `Group element, contains the payment method selection and the pay button. It uses a column layout with gaps and collapses when hidden.`
* title-box-payments `Text element, displays the title for the payment details section. Static text "Payment Details".`
* box-info-payments-selection-types `Group element, contains the payment type selection (currently only card is visible). It has a border and uses a column layout.`
* box-info-payments-type-card `Group element, contains the card payment input fields. It has a border and uses a column layout with gaps. It collapses when hidden.`
* box-info-payments-type-card-ID `Group element, displays the card icon and text label. It uses a row layout with gaps.`
* logo-card `Icon element, displays a credit card icon.`
* Card (em até 12x) `Text element, displays the label "Card Information".`
* box-info-payments-number-card `Group element, contains the card number input and card logos. It uses a relative layout with a background color and borders.`
* info-number-card `Input element, for entering the credit card number. Placeholder text "0000 0000 0000 0000". Has borders on top, left, and right, and rounded corners on top and right.`
* logo-visa `Icon element, displays the Visa logo. Icon color is semi-transparent.`
* logo-mastercard `Icon element, displays the Mastercard logo. Icon color is semi-transparent.`
* box-info-payments-valid-card `Group element, contains the card expiry date and CVV inputs. It uses a row layout.`
* info-valid-date `Input element, for entering the card expiry date. Placeholder text "00/0000". Has borders on top, left, right, and bottom, and rounded corners on top and left.`
* info-valid-CCV `Group element, contains the CVV input and icon. It uses a relative layout with a background color and borders.`
* numer-CCV `Input element, for entering the card CVV. Placeholder text "CVV". Has borders on top, right, and bottom, and rounded corners on bottom.`
* logo-card-CCV `Icon element, displays a credit card icon. Icon color is semi-transparent.`
* box-info-payments-customer `Group element, contains the buyer information inputs. It uses a column layout with gaps and collapses when hidden.`
* title-info-customer `Text element, displays the title for the buyer information section. Static text "Buyer Information".`
* info-customer-name `Input element, for entering the buyer's full name. Placeholder text "Full name". Has a box shadow and rounded corners.`
* info-customer-id `Input element, for entering the buyer's tax ID. Placeholder text "ID Tax". Has a box shadow and rounded corners.`
* dff58cdc-c28a-44f0-aab2-312406de34fe `Input element, for entering the buyer's email address. Placeholder text "E-mail". Has a box shadow and rounded corners.`
* info-customer-phone `InternationalPhoneInput element, for entering the buyer's phone number. Placeholder text "00000-0000". Pre-selected country is Brazil ("BR"). Has a box shadow and rounded corners applied via CSS.`
* f18b3711-eadb-40f4-a446-4af025e983ad `HTML element, contains CSS to style the phone number input element with a box shadow and rounded corners.`
* f9726272-9884-4fc4-8c1e-db679f7f1d55 `Group element, contains the fiscal address inputs. It uses a column layout and collapses when hidden.`
* title-info-customer-address `Text element, displays the title for the fiscal address section. Static text "Fiscal Address".`
* info-customer-road `Input element, for entering the street address. Placeholder text "Street". Has borders on top, left, and right, and rounded corners on top and right.`
* 7e2f919e-15a1-4bb0-b45e-d2bd22ed3c17 `Group element, contains the complement, number, district, zipcode, and city inputs. It uses a column layout with a box shadow and rounded corners.`
* b8273fd7-3fcb-4a32-bb13-ed2d9c0c37a0 `Input element, for entering the address complement. Placeholder text "Complemento". Has borders on top, left, right, and bottom, and rounded corners on left and bottom.`
* 830b788b-239b-435b-b05a-864b1a6dbb5a `Group element, contains the number and district inputs. It uses a row layout.`
* info-customer-number `Input element, for entering the address number. Placeholder text "Number". Has borders on top, left, right, and bottom.`
* 8f22dc39-761c-48ca-bb63-af8ab223e860 `Input element, for entering the address district. Placeholder text "District". Has borders on top, right, and bottom.`
* 04385ee8-5485-46f8-af7c-204e9fb77a9f `Group element, contains the zipcode and city inputs. It uses a row layout.`
* info-customer-zipcode `Input element, for entering the zip code. Placeholder text "Zip Code". Has borders on top, left, right, and bottom.`
* dropdown-info-customer-city `Dropdown element, for selecting the city. Placeholder text "City". Provides a predefined list of cities. Has borders on top, right, and bottom.`
* btn-card `Button element, triggers the payment process. Text is "Pay R$ 197". Includes an icon on the right. The button is initially disabled.`
* b3880acb-3690-4228-95b2-d8fc9fd18e6b `Group element, displays the cart summary. It uses a column layout with gaps.`
* c893a5cd-5063-4205-be54-ef671dc97228 `Text element, displays the title for the cart summary. Static text "Buy Details".`
* f97feb83-14a8-4346-9f70-f47c862e0b70 `Shape element, acts as a horizontal divider.`
* 6009fda7-0a05-4802-997b-036294130a4b `Group element, displays the product name and price in the cart summary. It uses a row layout with space between items and a bottom border.`
* d863122b-c6f9-4656-a102-afedef1d52c6 `Text element, displays the product name in the cart summary. Static text "Template Bubble Example ".`
* 723a0d42-4685-4b23-a4f2-ea6c36e28522 `Text element, displays the product price in the cart summary. Static text "R$ 197".`
* 5ac996e7-a834-4de4-a56a-2b1a2250441c `Text element, displays a description of the product. Static text with placeholder content.`
* 45b0dfe4-123c-4293-9776-1ca6d457db19 `Group element, displays the total amount to pay. It uses a row layout with space between items and no bottom border.`
* fc44e9e6-fe38-4f1d-9d6f-fad3c4da01cc `Text element, displays the label "Total To Pay".`
* b155a7ee-d410-4b19-9bc7-15c0aba35006 `Text element, displays the total price. Static text "R$ 197".`
* box-info-business `Group element, contains the business logo and terms/privacy links. It uses a row layout with gaps and is centered horizontally.`
* your-logo `Image element, displays the business logo. Source is a static image URL.`
* a4e6ee32-51f6-4547-9f3d-8d8f33dc6dc0 `Text element, displays links for Terms of Use and Privacy. Static text "Terms of Use | Privacy".`
***
### Vibe Hotmart ADDONS
Page Summary
The `vibe-hotmart-addons` page is designed as a high-converting checkout experience, specifically tailored for the Hotmart-style checkout flow with added features for increasing average order value (addons). The page presents product information, allows the user to enter their details (name, email, tax ID, address, phone), select a payment method (currently only card information input is visible), apply discount coupons, and potentially add 'buy together' products (addons). A floating countdown timer is prominently displayed to create urgency. The page includes sections for buyer information, fiscal address, payment details (card information), discount coupons, buy together options, and a summary of the cart with the total price. It also features a sidebar for promotional banners and a footer with business information and links to terms and privacy policies. The primary function is to collect necessary information and process a payment for a product purchase, with options to apply discounts and add supplementary products.
#### UI
* main `Group element that serves as the main container for the page content. It uses a row layout with a column gap of 20px, centered horizontally. It has top and bottom margins and padding, and a max width of 1200px. It is always visible.`
* box-info-payments `Group element containing the payment and order summary sections. It uses a column layout with space-between vertical alignment. It has fixed width and height, but is responsive with a min width of 50%. It has margins, padding, and a solid border with rounded corners. It is always visible.`
* box-info-payments-content `Group element containing the core payment and product information sections. It uses a column layout with a row gap of 10px. It is responsive with fit height enabled. It is always visible.`
* box-info-business `Group element containing the business logo and terms/privacy links. It uses a row layout with a column gap of 10px, centered horizontally. It has top margin. It is always visible.`
* your-logo `Image element displaying the business logo. When clicked, it navigates the user to the 'index' page.`
* terms-and-privacy `Text element displaying links to the terms of use and privacy policy. It is always visible.`
* box-info-payments-action `Group element containing the payment method selection and the pay button. It uses a column layout with a row gap of 15px. It is responsive with fit height enabled. It collapses when hidden. It is always visible.`
* title-box-payments `Text element displaying the title "Payment Details". It is always visible.`
* box-info-payments-selection-types `Group element intended for selecting payment types. It uses a column layout with a solid border and rounded corners. It is responsive with fit height enabled. It is always visible.`
* box-info-payments-type-card `Group element containing the card payment input fields. It uses a column layout with a row gap of 6px and padding. It has a solid border with rounded corners. It collapses when hidden. It is always visible.`
* box-info-payments-type-card-ID `Group element containing the card type logo and the "Card Information" text. It uses a row layout with a column gap of 6px and vertical centering. It is responsive with fit height enabled. It is always visible.`
* logo-card `Icon element displaying a credit card icon. It is always visible.`
* Card (em até 12x) `Text element displaying "Card Information". It is always visible.`
* box-info-payments-type-card-action `Group element containing the card number, expiry date, and CVV inputs. It uses a column layout with top and bottom margins. It is responsive with fit height enabled. It collapses when hidden. It is always visible.`
* box-info-payments-number-card `Group element containing the card number input and card type logos. It uses a relative layout with a background color and solid borders with rounded corners on the top and right. It is responsive with fit height enabled. It is always visible.`
* info-number-card `Input element for entering the credit card number. Placeholder text is "0000 0000 0000 0000". It has a solid border on the top, left, and right, and no border on the bottom. It is always visible.`
* logo-visa `Icon element displaying the Visa logo. It is always visible.`
* logo-mastercard `Icon element displaying the Mastercard logo. It is always visible.`
* box-info-payments-valid-card `Group element containing the expiry date and CVV inputs. It uses a row layout. It is responsive with fit height enabled. It is always visible.`
* info-valid-date `Input element for entering the card expiry date. Placeholder text is "00/0000". It has solid borders on the top, left, and bottom, and no border on the right. It is always visible.`
* info-valid-CCV `Group element containing the CVV input and a card logo icon. It uses a relative layout with a background color and solid borders with rounded corners on the bottom. It is responsive with fit height enabled. It is always visible.`
* numer-CCV `Input element for entering the card CVV. Placeholder text is "CVV". It has solid borders on the top, right, and bottom, and no border on the left. It is always visible.`
* logo-card-CCV `Icon element displaying a credit card icon. It is always visible.`
* btn-card `Button element to initiate the payment. Text is "Pay R$ 197" with an arrow icon. It has a background color, rounded corners, and a solid border. It is disabled by default. It collapses when hidden. It is always visible.`
* box-info-payments-customer `Group element containing the buyer information input fields. It uses a column layout with a row gap of 15px. It is responsive with fit height enabled. It collapses when hidden. It is always visible.`
* title-info-customer `Text element displaying the title "Buyer Information". It is always visible.`
* info-customer-name `Input element for entering the customer's full name. Placeholder text is "Full name". It has a solid border and rounded corners with an outset box shadow. It is always visible.`
* info-customer-id `Input element for entering the customer's tax ID. Placeholder text is "ID Tax". It has a solid border and rounded corners with an outset box shadow. It is always visible.`
* info-customer-email `Input element for entering the customer's email address. Placeholder text is "E-mail". It has a solid border and rounded corners with an outset box shadow. It is always visible.`
* info-customer-phone `InternationalPhoneInput element for entering the customer's phone number. Placeholder text is "00000-0000". It has a solid border and rounded corners. It is always visible.`
* css-info-customer-phone `HTML element containing CSS to style the phone input element with a box shadow and rounded corners. It is always visible.`
* box-info-payments-address `Group element containing the fiscal address input fields. It uses a column layout with a row gap of 15px. It is responsive with fit height enabled. It collapses when hidden. It is always visible.`
* title-info-customer-address `Text element displaying the title "Fiscal Address". It is always visible.`
* box-info-payments-address-inputs `Group element containing the address input fields. It uses a column layout. It is responsive with fit height enabled. It is always visible.`
* info-customer-road `Input element for entering the street address. Placeholder text is "Street". It has solid borders on the top, left, and right, and no border on the bottom. It is always visible.`
* info-customer-number-and-district `Group element containing the number and district input fields. It uses a row layout. It is responsive with fit height enabled. It is always visible.`
* info-customer-number `Input element for entering the street number. Placeholder text is "Number". It has solid borders on the top, left, and right, and no border on the bottom. It is always visible.`
* info-customer-district `Input element for entering the district. Placeholder text is "District". It has solid borders on the top, right, and bottom, and no border on the left. It is always visible.`
* info-customer-zipcode-and-city `Group element containing the zip code and city input fields. It uses a row layout. It is responsive with fit height enabled. It is always visible.`
* info-customer-zipcode `Input element for entering the zip code. Placeholder text is "Zip Code". It has solid borders on the top, left, and right, and no border on the bottom. It is always visible.`
* dropdown-info-customer-city `Dropdown element for selecting the city. Placeholder text is "City". Choices are "Nova York", "Londres", etc. It has solid borders on the top, right, and bottom, and no border on the left. It is always visible.`
* info-customer-complement `Input element for entering the address complement. Placeholder text is "Complemento". It has solid borders on the top, left, and right, and bottom with rounded corners on the left and bottom. It is always visible.`
* box-info-payments-discount-coupon `Group element containing the discount coupon input and apply button. It uses a column layout. It is responsive with fit height enabled. It collapses when hidden. It is always visible.`
* title-info-customer-address `Text element displaying the title "Discount Coupon". It is always visible.`
* box-info-payments-address-inputs `Group element containing the coupon input and apply button. It uses a row layout with a solid border and rounded corners. It is responsive with fit height enabled. It is always visible.`
* info-customer-coupon `Input element for entering a discount coupon code. Placeholder text is "Add coupon". It has solid borders on the top, left, and right, and no border on the bottom. It is always visible.`
* btn-apply `Button element to apply the discount coupon. Text is "Apply" with an icon. It has a background color, rounded corners, and a solid border. It is disabled by default. It collapses when hidden. It is always visible.`
* box-info-but-togheter `Group element containing the "Buy together" section. It uses a column layout with a row gap of 10px. It has top and bottom margins. It is responsive with fit height enabled. It is always visible.`
* title-buy-together `Text element displaying the title "Buy together". It is always visible.`
* box-info-but-togheter-selection `Group element containing the buy together offer details and selection checkbox. It uses a column layout with a row gap of 10px and padding. It has a dashed border with rounded corners. It collapses when hidden. It is always visible.`
* box-info-but-togheter-cta `Group element containing the buy together checkbox and description. It uses a row layout with padding and a background color with rounded corners. When clicked, if 'check-buy-together' is not selected, it sets 'check-buy-together' to true. When clicked, if 'check-buy-together' is selected, it sets 'check-buy-together' to false. It collapses when hidden. It is always visible.`
* check-buy-together `Icon element acting as a checkbox for the buy together offer. It is initially unchecked (square icon). When clicked, if its state 'custom.selecionado_' is no, it sets its state 'custom.selecionado_' to true. When clicked, if its state 'custom.selecionado_' is yes, it sets its state 'custom.selecionado_' to false. It collapses when hidden. It is always visible.`
* cta-description `Text element displaying a description of the buy together offer. It is always visible.`
* description-product `Text element displaying a longer description of the buy together product. It is always visible.`
* box-info-product-cart `Group element containing the cart summary details (subtotal, buy together price, coupon price, total). It uses a column layout with a row gap of 20px and top margin. It is responsive with fit height enabled. It is always visible.`
* divider-section `Shape element acting as a horizontal divider. It has a background color and a fixed height of 1px. It collapses when hidden. It is always visible.`
* Subtotal `Text element displaying the title "Buy Details". It is always visible.`
* box-price-product `Group element displaying the main product name and price. It uses a row layout with space-between horizontal alignment and a solid border on the bottom. It is responsive with fit height enabled. It is always visible.`
* name-your-product `Text element displaying the main product name "Template Bubble Example". It is always visible.`
* price-your-product `Text element displaying the main product price "R$ 197". It is always visible.`
* box-price-product-buy-together `Group element displaying the buy together product name and price. It uses a row layout with space-between horizontal alignment and a solid border on the bottom. It is responsive with fit height enabled. It is hidden by default and collapses when hidden.`
* name-your-product `Text element displaying the buy together product name "Product Buy Together". It is always visible.`
* price-your-product `Text element displaying the buy together product price "R$ 197". It is always visible.`
* box-price-product-add-coupon `Group element displaying the coupon discount. It uses a row layout with space-between horizontal alignment and a solid border on the bottom. It is responsive with fit height enabled. It is always visible.`
* name-your-product `Text element displaying "Add coupon". It is always visible.`
* price-your-product `Text element displaying the coupon discount amount "- R$ 97". It is always visible.`
* box-sum-your-cart `Group element displaying the total price. It uses a row layout with space-between horizontal alignment and no border on the bottom. It is responsive with fit height enabled. It is always visible.`
* Text C `Text element displaying "Total To Pay". It is always visible.`
* Text C `Text element displaying the total price "R$ 197". It is always visible.`
* banner-up `Image element displaying a promotional banner at the top of the payment section. It is responsive with fit height enabled and a min width of 320px. It collapses when hidden. It is always visible.`
* box-info-product-content `Group element containing the main product information. It uses a column layout with a row gap of 10px. It is responsive with fit height enabled. It has a bottom margin. It is always visible.`
* box-info-product-header `Group element containing the product icon and name. It uses a row layout with a column gap of 10px. It is responsive with fit height enabled. It is always visible.`
* logo-ico-your-business `Image element displaying the product icon. It is responsive with fit height enabled and a min width/height of 40px. It is always visible.`
* name-your-product `Text element displaying the main product name "Template Bubble Example". It is always visible.`
* box-info-product-database `Group element containing the product price and plan information. It uses a column layout with a row gap of -5px. It is responsive with fit height enabled. It is always visible.`
* box-info-product-description-price-plan `Group element containing the price and plan text elements. It uses a row layout with a column gap of 20px. It is responsive with fit height enabled. It is always visible.`
* price `Text element displaying the main product price "R$ 3.600". It has a large font size and bold weight. It is always visible.`
* plan `Text element displaying the plan type "Plano Anual". It has a background color, solid border, and rounded corners. It is always visible.`
* description-product `Text element displaying a description of the main product. It is responsive with fit height enabled and a min width of 30%. It has a top margin. It is always visible.`
* banners-sidebar `Group element containing the sidebar banners. It uses a column layout with a row gap of 20px. It has a top margin. It is responsive with fit height enabled and a min width of 260px. It collapses when hidden. It is always visible.`
* banner-sidebar-a `Image element displaying a sidebar banner. It is responsive with fit height enabled and a min width of 260px. It collapses when hidden. It is always visible.`
* banner-sidebar-b `Image element displaying a sidebar banner. It is responsive with fit height enabled and a min width of 260px. It collapses when hidden. It is always visible.`
* float-countdown `FloatingGroup element displaying a countdown timer. It uses a column layout with center vertical alignment. It has a background color. It is responsive with fit height enabled and a min width of 320px. It is always visible.`
* float-countdown-content `Group element containing the countdown timer and text. It uses a row layout with center horizontal and vertical alignment. It is responsive with fit height enabled and a min width of 650px. It collapses when hidden. It is always visible.`
* CountDown-Engine-A `CountDown element that powers the countdown timer. On page load, it is set to count down from the current date/time plus 15 minutes, displaying the unit "Minuto". It collapses when hidden. It is always visible.`
* CountDown-Price `Text element displaying the countdown timer value. It shows "Offer available for " followed by the minutes and seconds from the 'CountDown-Engine-A' element. It is always visible.`
box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element, but only if the 'selecionado\_' state is currently 'no'. This suggests it's part of a feature where clicking a container element selects an associated checkbox or indicator, specifically for a 'buy together' option, preventing deselection via this click.
### Documentation
This workflow is initiated when the user clicks on the element named 'box-info-but-togheter-cta'. This element likely serves as a clickable area or container associated with a 'buy together' feature, possibly a checkbox or a visual indicator.
The workflow includes a condition that must be met for any actions to execute. The condition checks the current value of the 'selecionado\_' custom state of the element named 'check-buy-together'. The workflow will only proceed if the value of this custom state is 'no'. This implies that clicking the 'box-info-but-togheter-cta' element will only have an effect if the associated 'buy together' option is currently not selected.
If the condition is met (i.e., 'check-buy-together's 'selecionado\_' state is 'no'), the workflow proceeds to its single action.
### Actions
#### Step 1: Set state of an element
This step sets the value of a custom state on the element named 'check-buy-together'. The custom state being modified is 'selecionado\_'. The value is set to 'true'. This action effectively marks the 'check-buy-together' element as selected, but only if it was previously not selected, as enforced by the workflow's condition.
Page is loaded
### Summary
This workflow is triggered when the page finishes loading. Its primary purpose is to initialize a countdown timer element on the page, likely used to display a time-sensitive offer or event related to the VibeCheckouts™ templates.
### Documentation
This workflow executes automatically when the page has fully loaded in the user's browser. It contains a single action that targets a specific element on the page, likely a visual countdown timer. The workflow calculates an end time for the countdown by taking the current date and time and adding 15 minutes to it. This calculated end time is then used to configure the countdown element, setting its target time and potentially a label like 'Minuto'. This setup suggests the page is displaying a short-term timer, possibly for a limited-time offer or a session timeout related to the checkout process or template viewing.
### Actions
#### Step 1: Set Countdown
This action targets the element named 'CountDown-Engine-A'. It sets the countdown's target time. The start time for the countdown is set to the current date and time. The end time is calculated by taking the current date and time and adding 15 minutes to it. A text label 'Minuto' is also associated with this countdown element, likely displayed alongside the timer.
When your-logo is clicked
### Summary
This workflow is triggered when the 'your-logo' element is clicked. Its primary purpose is to navigate the user back to the application's index page.
### Documentation
This workflow is initiated by an 'An element is clicked' event. Specifically, it fires when the user clicks on the element named 'your-logo'. This element is likely an image or group representing the application's logo, commonly used for navigation back to the homepage. Upon being triggered, the workflow executes a single action to redirect the user to the 'index' page of the application.
### Actions
#### Step 1: Go to page
This action navigates the user to a different page within the application. It is configured to send the user to the page named 'index'. This is a standard pattern for allowing users to return to the main landing page or dashboard by clicking the application's logo.
When check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element to 'no' if the state is currently 'yes'. This suggests it's part of a feature where selecting or deselecting an option (like a 'buy together' offer) is controlled by this checkbox.
### Documentation
This workflow executes when the user clicks on the 'check-buy-together' element. It has a condition that must be met for the workflow to proceed: the 'selecionado\_' custom state of the 'check-buy-together' element must be 'yes'. If this condition is true, the workflow proceeds to its single action. The action sets the 'selecionado\_' custom state of the 'check-buy-together' element to 'no'. This effectively acts as a toggle mechanism, specifically to deselect the 'buy together' option if it was previously selected.
### Actions
#### Step 1: Set state of an element
This step sets the value of the 'selecionado\_' custom state on the 'check-buy-together' element. The new value is set to 'no'. This action only runs if the condition on the workflow trigger (the 'selecionado\_' state being 'yes') is met.
When check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to toggle a custom state on the 'check-buy-together' element itself, specifically setting the 'selecionado\_' state to 'true', but only if the 'selecionado\_' state is currently 'no'. This suggests it's part of a mechanism to select or activate an option related to buying items together.
### Documentation
This workflow executes when the user clicks on the element named 'check-buy-together'. The workflow is conditional: it will only proceed if the custom state 'selecionado\_' on the 'check-buy-together' element is currently set to 'no'. If this condition is met, the workflow proceeds to its single action. The action sets the 'selecionado\_' custom state of the 'check-buy-together' element to 'true'. This pattern is commonly used in Bubble to create toggle-like behavior for visual elements or to track user selections.
### Actions
#### Step 1: Set state
This action sets the custom state 'selecionado\_' on the element 'check-buy-together' to the value 'true'. This change in state can be used by other elements or workflows in the application to react to the user's selection or interaction with the 'check-buy-together' element.
When box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to toggle the state of a checkbox element named 'check-buy-together', specifically setting its 'selecionado\_' custom state to 'no' (false), but only if the 'check-buy-together' element's 'selecionado\_' state is currently 'yes' (true). This suggests it's part of a feature where clicking a related element deselects a 'buy together' option.
### Documentation
This workflow executes when the user clicks on the element identified as 'box-info-but-togheter-cta'. Before proceeding with any actions, the workflow checks a condition: it verifies if the custom state 'selecionado\_' of the element 'check-buy-together' is currently set to 'yes'. If this condition is met (i.e., the 'check-buy-together' element is currently selected), the workflow proceeds to its single action. If the condition is not met (the 'check-buy-together' element is not selected), the workflow does nothing.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element 'check-buy-together' to 'no' (false). This action only runs if the condition on the workflow trigger is true, meaning the 'check-buy-together' element's 'selecionado\_' state was previously 'yes'.
***
### Vibe Ecommerce Clean BRL (Brazil)
Page Summary
The `vibe-ecommerce-clean-brl` page is a checkout page designed for an e-commerce application, specifically tailored for the Brazilian market (indicated by 'brl'). It allows users to input their customer and delivery information, select a payment method (Pix, Boleto/Barcode, or Credit Card), apply a discount coupon, and view a summary of their order including product details, shipping costs, and the total amount due. The page is structured into three main sections: Customer and Delivery Information, Payment Information, and Order Summary. It utilizes conditional visibility to show relevant payment input fields based on the selected payment method. The page integrates with external services for phone number validation and potentially payment processing (though specific integrations are not detailed in the provided data). The overall goal is to provide a clean and efficient checkout flow for users purchasing products within the Brazilian context.
#### UI
* main `Group element that serves as the main container for the page content. It uses a row layout with space-between horizontal alignment to position the customer/delivery, payments, and coupon/subtotal sections side-by-side. It has a max-width of 1200px and is horizontally centered.`
* div-info-customer-delivery `Group element containing the customer and delivery information sections. It has a column layout and is conditionally collapsed when hidden. It has a fixed width of 280px and a minimum width of 32% of its parent.`
* box-info-payments-customer `Group element containing the customer information input fields. It has a column layout with a row gap of 15px and is conditionally collapsed when hidden.`
* title-info-customer `Text element displaying the title "Informações do Comprador".`
* info-customer-name `Input element for the customer's full name. Placeholder text is "Seu nome completo".`
* info-customer-id `Input element for the customer's CPF/CNPJ. Placeholder text is "CPF/CNPJ".`
* info-customer-email `Input element for the customer's email address. Placeholder text is "Seu email".`
* info-customer-phone `InternationalPhoneInput element for the customer's phone number. It is configured for specific countries including Brazil and has a placeholder "00000-0000". It has a unique ID "phone-add" and is locked in the editor.`
* css-info-customer-phone `HTML element containing CSS to style the phone input field and its container, adding box shadows and border radius.`
* box-info-payments-address `Group element containing the delivery address information sections. It has a column layout and is conditionally collapsed when hidden. It has a minimum width of 100% of its parent.`
* title-info-customer-address `Text element displaying the title "Endereço de Entrega".`
* box-info-payments-address-inputs `Group element containing the address input fields. It has a column layout and is conditionally collapsed when hidden.`
* info-customer-road `Input element for the street address. Placeholder text is "Rua".`
* info-customer-number-and-district `Group element containing the number and district input fields. It has a row layout.`
* info-customer-number `Input element for the address number. Placeholder text is "Número". It has a minimum width of 30% of its parent.`
* info-customer-district `Input element for the district/neighborhood. Placeholder text is "Bairro". It has a minimum width of 70% of its parent.`
* info-customer-zipcode-and-city `Group element containing the zipcode and city input fields. It has a row layout.`
* info-customer-zipcode `Input element for the zip code (CEP). Placeholder text is "CEP". It has a minimum width of 30% of its parent.`
* dropdown-info-customer-city `Dropdown element for selecting the city. It has a static list of Brazilian cities as choices and a placeholder "Cidade". It has a minimum width of 70% of its parent.`
* info-customer-complement `Input element for the address complement. Placeholder text is "Complemento".`
* div-info-payments `Group element containing the payment information section. It has a column layout and is conditionally collapsed when hidden. It has a fixed width of 280px and a minimum width of 32% of its parent.`
* box-info-payments-action `Group element containing the payment method selection and input fields. It has a column layout with a row gap of 15px and is conditionally collapsed when hidden.`
* title-box-payments `Text element displaying the title "Selecione a Forma de Pagamento".`
* box-info-payments-selection-types `Group element containing the selectable payment type options (Pix, Boleto, Card). It has a column layout.`
* box-info-payments-type-pix `Group element representing the Pix payment option. It has a row layout with a column gap of 6px. When clicked, it triggers a workflow to set the custom state 'tabs_' of the element 'vibe-ecommerce-clean-brl' to 1.`
* check-type-pix `Icon element displaying a circle, likely indicating the selection status of the Pix payment method. Icon color is a semi-transparent black.`
* logo-pix `Icon element displaying the Pix logo. Icon color is green.`
* Pix (à vista) `Text element displaying "Pix (à vista)".`
* box-info-payments-type-barcode `Group element representing the Boleto/Barcode payment option. It has a row layout with a column gap of 6px. When clicked, it triggers a workflow to set the custom state 'tabs_' of the element 'vibe-ecommerce-clean-brl' to 2.`
* check-barcode `Icon element displaying a circle, likely indicating the selection status of the Boleto payment method. Icon color is a semi-transparent black.`
* logo-barcode `Icon element displaying a barcode icon. Icon color is black.`
* Barcode (à vista) `Text element displaying "Boleto (à vista)".`
* box-info-payments-type-card `Group element representing the Credit Card payment option. It has a column layout with a column gap of 6px and is conditionally collapsed when hidden.`
* box-info-payments-type-card-ID `Group element containing the card payment type selection indicator and text. It has a row layout with a column gap of 6px.`
* check-card `Icon element displaying a circle, likely indicating the selection status of the Credit Card payment method. Icon color is a semi-transparent black.`
* logo-card `Icon element displaying a credit card icon. Icon color is blue.`
* Card (em até 12x) `Text element displaying "Cartão de Crédito (em até 12x)".`
* box-info-payments-type-card-action `Group element containing the credit card input fields. It has a column layout and is conditionally visible. It is hidden by default and conditionally collapsed when hidden.`
* efc2d118-43a9-4aa2-81b4-d55fd5c44dc0 `Group element containing the card number input and card logos. It has a relative layout.`
* info-number-card `Input element for the credit card number. Placeholder text is "0000 0000 0000 0000".`
* logo-visa `Icon element displaying the Visa logo. Icon color is a semi-transparent black.`
* logo-mastercard `Icon element displaying the Mastercard logo. Icon color is a semi-transparent black.`
* 6264f859-17ec-49cd-813b-7e6bbfaf616b `Group element containing the card validity date and CCV input fields, and the installments dropdown. It has a row layout.`
* info-valid-date `Input element for the card validity date. Placeholder text is "00/0000". It has a minimum width of 50% of its parent.`
* info-valid-CCV `Group element containing the CCV input and icon. It has a relative layout.`
* numer-CCV `Input element for the card CCV. Placeholder text is "CVV". It has a minimum width of 50% of its parent.`
* logo-card-CCV `Icon element displaying a credit card icon, likely indicating where to find the CCV. Icon color is a semi-transparent black.`
* dropdown-info-payments-installments `Dropdown element for selecting the number of installments for credit card payment. It is mandatory and hidden by default. The choices are populated from the option set 'parcelas'. The displayed value is the 'display' property of the selected option.`
* btn-card `Button element to initiate payment with the selected card details. Text is "Pagar [Dropdown info-payments-installments's value]" and is disabled by default. It is hidden by default and conditionally collapsed when hidden.`
* btn-pix `Button element to initiate payment with Pix. Text is "Pagar R$ 197 agora". It is hidden by default and conditionally collapsed when hidden.`
* btn-barcode `Button element to initiate payment with Boleto/Barcode. Text is "Pagar R$ 197 agora". It is hidden by default and conditionally collapsed when hidden.`
* div-coupon-subtotal `Group element containing the discount coupon and order summary sections. It has a column layout with a row gap of 20px and is conditionally collapsed when hidden. It has a fixed width of 280px and a minimum width of 32% of its parent.`
* box-info-payments-discount-coupon `Group element containing the discount coupon input field and apply button. It has a column layout and is conditionally collapsed when hidden. It has a minimum width of 100% of its parent.`
* title-info-customer-address `Text element displaying the title "Cupom de Desconto".`
* box-info-payments-address-inputs `Group element containing the coupon input and button. It has a column layout.`
* info-customer-coupon `Input element for entering a discount coupon code. Placeholder text is "Add coupon".`
* btn-card `Button element to apply the discount coupon. Text is "Apply" and is disabled by default. It is conditionally collapsed when hidden.`
* box-info-product-cart `Group element containing the order summary details (subtotal, shipping, total). It has a column layout with a row gap of 20px.`
* Subtotal `Text element displaying the title "Subtotal".`
* box-price-product `Group element displaying the product price. It has a row layout with space-between horizontal alignment and a solid bottom border.`
* name-your-product `Text element displaying the product name "Template Bubble Example ".`
* price-your-product `Text element displaying the product price "R$ 197".`
* box-price-frete `Group element displaying the shipping cost. It has a row layout with space-between horizontal alignment and a solid bottom border.`
* name-your-product `Text element displaying the title "Frete".`
* price-your-product `Text element displaying the shipping cost "+ R$ 45".`
* box-sum-your-cart `Group element displaying the total amount due. It has a row layout with space-between horizontal alignment.`
* Text A `Text element displaying the title "Total à pagar".`
* Text A `Text element displaying the total amount "R$ 197".`
* footer `Group element serving as the footer container. It has a row layout with center horizontal alignment and a max-width of 1200px.`
* box-info-product `Group element containing product and business information in the footer. It has a column layout with a row gap of 60px.`
* float-templates-bubble-content `Group element containing the product header and database information. It has a row layout with center horizontal alignment and is conditionally collapsed when hidden.`
* box-info-product-header `Group element containing the business logo, icon, and name. It has a row layout with a column gap of 10px.`
* logo-ico-your-business `Image element displaying a business icon.`
* d7db9fc9-e9a4-459e-9793-4a3f44b7dbcb `Text element displaying the business name "Propps".`
* box-info-product-database `Group element containing product description and pricing details. It has a column layout with a row gap of -5px.`
* 1e9e77aa-2f1e-4d04-8323-3cc1edfc133d `Group element displaying the product price and plan type. It has a row layout with a column gap of 10px.`
* price `Text element displaying the product price "R$ 3.600".`
* plan `Text element displaying the plan type "Plano Anual". It has a light purple background and border.`
* c87bffde-355e-4c5d-8246-39bb1e8b5dfd `Group element containing the business logo and terms/privacy links. It has a column layout with a column gap of 10px and center horizontal alignment.`
* your-logo `Image element displaying the business logo.`
* terms-and-privacy `Text element displaying "Termos de uso | Privacidade".`
* float-templates-bubble `FloatingGroup element, likely used for displaying templates or related information. It has a row layout with center horizontal and vertical alignment and is conditionally collapsed when hidden. It has a fixed minimum width of 320px.`
box-info-payments-type-barcode is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-barcode' element is clicked. Its primary purpose is to update the 'tabs\_' custom state of the 'vibe-ecommerce-clean-brl' element to the value '2'. This action likely controls which tab or section is currently visible or active within the 'vibe-ecommerce-clean-brl' element, specifically switching to a view related to barcode payment information.
### Documentation
This workflow is initiated when a user clicks on the element named 'box-info-payments-type-barcode'. This element is likely a visual component, such as a button or a container, that represents the option to pay using a barcode. Upon being clicked, the workflow executes a single action: setting the value of a custom state. The custom state being modified is named 'tabs\_' and belongs to the element 'vibe-ecommerce-clean-brl'. The value assigned to this custom state is the number '2'. In the context of the VibeCheckouts™ application, particularly within the 'vibe-ecommerce-clean-brl' template, setting the 'tabs\_' state to '2' is designed to navigate the user interface to a specific tab or view that displays information or options related to barcode payments.
### Actions
#### Step 1: Set state of an element
This step sets the value of a custom state on the element named 'vibe-ecommerce-clean-brl'. The custom state being targeted is 'tabs\_'. The value assigned to this state is the static number '2'. This action is used to control the active tab or section displayed within the 'vibe-ecommerce-clean-brl' element, likely switching the view to the one corresponding to barcode payment details.
box-info-payments-type-pix is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-pix' element is clicked. Its primary purpose is to update the state of the 'vibe-ecommerce-clean-brl' element, likely controlling which payment method information is currently displayed or active within the checkout interface.
### Documentation
This workflow executes when a user clicks on the element named 'box-info-payments-type-pix'. This element is likely a visual representation or button associated with the Pix payment method within the Vibe Ecommerce checkout template. The workflow contains a single action that sets a custom state on another element. This action is crucial for managing the user interface, specifically controlling which payment method details are visible or selected within the checkout flow.
### Actions
#### Step 1: Set state of an element
This step sets the custom state named 'tabs\_' on the element 'vibe-ecommerce-clean-brl'. The value of the state is set to '1'. In the context of a checkout template, setting this state to '1' likely indicates that the Pix payment method has been selected or that the interface should now display information related to Pix payments. This action is fundamental for dynamically updating the checkout form or details based on the user's payment method selection.
When box-info-payments-type-card-ID is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-card-ID' element is clicked. Its primary purpose is to update the custom state 'tabs\_' on the 'vibe-ecommerce-clean-brl' element, likely controlling which payment information section is currently displayed or active within the checkout interface.
### Documentation
This workflow executes when a user clicks on the element named 'box-info-payments-type-card-ID'. This element appears to be a visual container or button associated with a card payment option within the Vibe Ecommerce checkout template. The workflow contains a single action that sets a custom state on another element. This action is designed to change the state of the checkout interface, specifically related to the display or selection of payment methods.
### Actions
#### Step 1: Set state
This action sets the custom state 'tabs\_' on the element named 'vibe-ecommerce-clean-brl'. The value of the state is set to '3'. In the context of a tabbed or multi-step interface like a checkout, setting this state to '3' likely corresponds to activating or displaying the third section or tab, which in this case is inferred to be related to card payment information, based on the trigger element's name.
***
### Vibe Ecommerce Clean GLOBAL
Page Summary
The `vibe-ecommerce-clean-global` page is a checkout page designed for e-commerce transactions within the VibeCheckouts™ application. It provides a clean and streamlined interface for users to enter their buyer information, delivery address, and payment details (specifically credit card information). The page also includes sections for applying discount coupons and displaying a summary of the order, including subtotal, shipping costs, and the total amount due. The layout is responsive, adapting to different screen sizes with a focus on a clean, modern design. The page integrates with payment processing and potentially shipping calculation services, although the specific workflows are not detailed in the provided element tree. It serves as a crucial step in the e-commerce purchase flow, aiming to minimize friction and maximize conversion rates by presenting all necessary information and input fields in a clear and organized manner. The footer includes links to terms of use and privacy policies, along with the business logo.
#### UI
* main `Group element, serves as the main container for the page content. Arranges child elements in a row with space between them, centered horizontally. Has a max width of 1200px. Uses gap of 5px between columns. Vertically centers content.`
* div-info-customer-delivery `Group element, contains the buyer information and delivery address sections. Arranges child elements in a column with a gap of 20px. Has a fixed width of 280px and fits height to content. Has a background color and box shadow. Collapses when hidden.`
* box-info-payments-customer `Group element, contains the buyer information input fields. Arranges child elements in a column with a gap of 15px. Fits width to content and height to content. Has a minimum width of 40px. Collapses when hidden.`
* title-info-customer `Text element, displays the title "Buyer Information". Fits width and height to content. Font weight is 600.`
* info-customer-name `Input element, for entering the customer's full name. Placeholder text is "Full name". Has a fixed width of 250px and height of 48px. Minimum width is 250px. Has a border and box shadow.`
* info-customer-id `Input element, for entering the customer's tax ID. Placeholder text is "ID Tax". Has a fixed width of 250px and height of 48px. Minimum width is 250px. Has a border and box shadow.`
* info-customer-email `Input element, for entering the customer's email address. Placeholder text is "E-mail". Has a fixed width of 250px and height of 48px. Minimum width is 250px. Has a border and box shadow.`
* fb9eddad-3a31-44f2-a0a7-a5d061ecab82 `InternationalPhoneInput element, for entering the customer's phone number. Placeholder text is "00000-0000". Has a fixed width of 250px and height of 40px. Minimum width is 250px. Allows selection of specific countries (US, GB, DE, AU, FR, TH, ID, IN, TW, BR, PT) with a default country of BR. Has a border color.`
* css-info-customer-phone `HTML element, contains CSS to style the phone input element with specific box shadow and border radius.`
* box-info-payments-address `Group element, contains the delivery address input fields. Arranges child elements in a column. Fits width to content and height to content. Has a minimum width of 100%. Collapses when hidden.`
* title-info-customer-address `Text element, displays the title "Delivery Address". Fits width and height to content. Font weight is 600.`
* cd5f2c6c-167f-4e53-b0c6-7794dae1e34f `Group element, contains the address input fields. Arranges child elements in a column. Fits width to content and height to content. Has a minimum width of 40px. Has a box shadow.`
* info-customer-road `Input element, for entering the street address. Placeholder text is "Street". Has a fixed width of 250px and height of 48px. Has a border.`
* info-customer-number-and-district `Group element, contains the number and district input fields. Arranges child elements in a row. Fits width to content and height to content. Has a minimum width of 40px.`
* info-customer-number `Input element, for entering the building number. Placeholder text is "Number". Has a fixed width of 250px and height of 48px. Minimum width is 30%. Has a border.`
* info-customer-district `Input element, for entering the district. Placeholder text is "District". Has a fixed width of 250px and height of 48px. Minimum width is 70%. Has a border.`
* info-customer-zipcode-and-city `Group element, contains the zip code and city input fields. Arranges child elements in a row. Fits width to content and height to content. Has a minimum width of 40px.`
* info-customer-zipcode `Input element, for entering the zip code. Placeholder text is "Zip Code". Has a fixed width of 250px and height of 48px. Minimum width is 30%. Has a border.`
* dropdown-info-customer-city `Dropdown element, for selecting the city. Placeholder text is "City". Has a fixed width of 250px and height of 48px. Minimum width is 70%. Provides a predefined list of cities (Nova York, Londres, Tóquio, Paris, Xangai, Pequim, Cingapura, Dubai, Hong Kong, Los Angeles). Has a border.`
* d96b59b1-d4ee-4024-a7cb-95e95ebb7849 `Input element, for entering the address complement. Placeholder text is "Complement". Has a fixed width of 250px and height of 48px. Has a border.`
* div-info-payments `Group element, contains the payment details section. Arranges child elements in a column with a gap of 15px. Has a fixed width of 280px and fits height to content. Has a background color and box shadow. Collapses when hidden.`
* box-info-payments-action `Group element, contains the payment method selection and card details. Arranges child elements in a column with a gap of 15px. Fits width to content and height to content. Has a minimum width of 40px. Collapses when hidden.`
* title-box-payments `Text element, displays the title "Payment Details". Fits width and height to content. Font weight is 600.`
* adf0dc5f-01bb-41a6-a2c9-dc1157cd7325 `Group element, contains the payment type selection (card). Arranges child elements in a column. Fits width to content and height to content. Has a minimum width of 40px. Has a border.`
* ea431713-dae0-4d63-be47-b3e1c5264509 `Group element, contains the card information input fields. Arranges child elements in a column with a gap of 6px. Has a fixed width of 280px and fits height to content. Has padding and a border. Collapses when hidden.`
* ceef1c5b-328d-430d-9112-1fc26720d68d `Group element, contains the card information header. Arranges child elements in a row with a gap of 6px. Fits width to content and height to content. Has a minimum height of 30px. Vertically centers content.`
* 24d3430a-4cf4-440a-b045-88d8439d38fb `Icon element, displays a credit card icon. Has a fixed width and height of 30px. Icon color is blue.`
* 7ca5380d-f34f-4fcf-97f5-7758ca1fa71f `Text element, displays the text "Card Information". Fits width and height to content. Font weight is 500.`
* box-info-payments-type-card-action `Group element, contains the card input fields. Arranges child elements in a column. Fits width to content and height to content. Has a minimum width of 40px. Has margin top and bottom of 5px. Collapses when hidden.`
* 4a1897ff-74b7-47ae-b8b3-e980e69215e1 `Group element, contains the card number input. Arranges child elements in a relative layout. Fits width to content and height to content. Has a minimum width of 40px. Has a background color and border.`
* 401f75d6-496b-4150-b923-b186e79641db `Input element, for entering the card number. Placeholder text is "0000 0000 0000 0000". Has a fixed width of 250px and height of 48px. Has a border.`
* 1c27c09c-0fe2-40ec-88e0-717a0e8e9ab7 `Icon element, displays a Visa card icon. Has a fixed width and height of 30px. Icon color is a muted text color. Has a right margin of 10px.`
* d963f797-2a25-46f2-8462-7c6fb88c7ec0 `Icon element, displays a Mastercard icon. Has a fixed width and height of 30px. Icon color is a muted text color. Has a right margin of 35px.`
* 7f4b22eb-6857-46fe-bac5-12d9f61983ff `Group element, contains the card valid date and CCV inputs. Arranges child elements in a row. Fits width to content and height to content. Has a minimum width and height of 40px.`
* 6e6a8f14-3225-4c0d-9760-6176d051bd29 `Input element, for entering the card valid date. Placeholder text is "00/0000". Has a fixed width of 250px and height of 48px. Minimum width is 50%. Has a background color and border.`
* 08452f13-6977-4232-b10d-726cf34623f3 `Group element, contains the CCV input. Arranges child elements in a relative layout. Fits width to content and height to content. Has a minimum width and height of 40px. Has a background color and border.`
* 2de24d33-aaf9-4ac8-93d5-e8b4cf5b04e1 `Input element, for entering the card CCV. Placeholder text is "CVV". Has a fixed width of 250px and height of 48px. Minimum width is 50%. Has a border.`
* 0e07626a-915c-4386-9a1c-e55bcb0a8267 `Icon element, displays a credit card icon. Has a fixed width and height of 30px. Icon color is a muted text color. Has a right margin of 10px.`
* 6827e0a9-e991-41e5-b3e4-e6ceec00dfe5 `Button element, for initiating the payment. Text is "Pagar ". Has a fixed width of 231px and height of 31px. Minimum height is 35px. Has a background color and border. Icon is an arrow pointing up-right. Icon is placed on the right. Button is disabled by default.`
* ea8c079a-5b2c-4418-a0d5-06685f65564d `Group element, contains the discount coupon and order summary sections. Arranges child elements in a column with a gap of 20px. Has a fixed width of 280px and fits height to content. Has padding, a background color, and box shadow. Collapses when hidden.`
* 75ca46db-0ac7-4269-8874-b9f6edd9b3b5 `Group element, contains the discount coupon input. Arranges child elements in a column. Fits width to content and height to content. Has a minimum width of 100%. Has bottom padding of 15px. Collapses when hidden.`
* 9c64b7de-a7b6-4ce4-a50d-cd0be8452236 `Text element, displays the title "Discount Coupon". Fits width and height to content. Font weight is 600.`
* 56223fbc-8cac-4d94-813f-8e89092f64e9 `Group element, contains the coupon input and apply button. Fits width to content and height to content. Has a minimum width of 40px. Has margin top of 15px. Has a box shadow.`
* 4b017035-3c5a-490a-abc2-f6d9fac092d8 `Input element, for entering a discount coupon code. Placeholder text is "Add coupon". Has a fixed width of 250px and height of 48px. Has a border.`
* ca8c4692-5331-4c94-84f2-617a90a599a4 `Button element, for applying the coupon. Text is "Apply". Has a fixed width of 231px and height of 31px. Minimum height is 40px. Has a background color and border. Icon is a call missed outgoing icon. Icon is placed on the right. Button is disabled by default. Collapses when hidden.`
* cff68d4f-b6a5-4961-9a6e-028ed218b54c `Group element, contains the product cart summary. Arranges child elements in a column with a gap of 20px. Fits width to content and height to content. Has a minimum width and height of 40px.`
* 801c19aa-60c1-4b44-9280-7d3f1775ddc8 `Text element, displays the text "Subtotal". Fits width and height to content. Font weight is 600.`
* 93f4b261-466d-4abc-a76a-63ef1b201c68 `Group element, displays the product name and price. Arranges child elements in a row with space between them. Fits width to content and height to content. Has a minimum width and height of 40px. Has a bottom border.`
* f45b1dab-e5dd-4992-8b95-649cd662cb2e `Text element, displays the product name "Template Bubble Example ". Fits width and height to content. Font weight is 500.`
* 63743e59-e072-4682-ab55-38e46f728d45 `Text element, displays the product price "R$ 197". Fits width and height to content. Font weight is 500.`
* 99c9ba3c-6f8b-47bb-9b5c-24c18cc9dd78 `Group element, displays the shipping cost. Arranges child elements in a row with space between them. Fits width to content and height to content. Has a minimum width and height of 40px. Has a bottom border.`
* 14de056c-f517-4e95-80c5-3312ef5cf085 `Text element, displays the text "Shipping". Fits width and height to content. Font weight is 500.`
* cf7c89ef-932c-49b9-b2bf-171bc0397829 `Text element, displays the shipping price "+ R$ 45". Fits width and height to content. Font weight is 500.`
* 3fe2b15e-b24b-4a33-8062-c8476137b183 `Group element, displays the total amount to pay. Arranges child elements in a row with space between them. Fits width to content and height to content. Has a minimum width and height of 40px. Has a bottom border with no style.`
* 26c46b4c-8a44-403c-a256-c516d4a79713 `Text element, displays the text "Total To Pay". Fits width and height to content. Font weight is 600.`
* b68d1b2a-1ecb-420c-931b-6bde560e24e3 `Text element, displays the total price "R$ 197". Fits width and height to content. Font weight is 600.`
* 6eea89a3-c46c-4a64-ac1e-8caa0e044e51 `Group element, serves as the footer container. Arranges child elements in a row, centered horizontally. Has a max width of 1200px. Fits width to content and height to content.`
* 9cd35e52-786b-4d40-978b-49680698887b `Group element, contains the business information in the footer. Arranges child elements in a column with a gap of 60px. Has a fixed width and height of 280px. Has padding. Fits width to content and height to content. Vertically aligns content to stretch and space between. Collapses when hidden.`
* 5ecd1d02-70bd-41e6-bded-331b1296e273 `Group element, contains the business logo and terms/privacy links. Arranges child elements in a column with a gap of 10px, centered horizontally and vertically. Fits width to content and height to content. Has a minimum width and height of 40px.`
* eb020b07-0ccd-47d7-b066-7dc41fd48498 `Image element, displays the business logo. Image source is a static URL. Has a fixed width of 160px and height of 50px. Fits height to content. Has margin top of 2px and bottom of 10px. Aspect ratio is 2309/721.`
* e21b0554-c689-418e-b218-6821fb57d281 `Text element, displays the text "Terms of Use | Privacy". Fits width and height to content. Font size is 10. Font weight is 500. Horizontally and vertically centers content.`
* 8c0a942c-5324-46a6-95c1-ac60f9927458 `FloatingGroup element, likely used for displaying product information in a floating panel. Has a fixed width of 320px and fits height to content. Minimum width is 320px and minimum height is 70px. Has padding. Arranges child elements in a row, centered horizontally and vertically. Collapses when hidden.`
* b198baf7-cdcd-4a9c-b8e3-d18595ce969a `Group element, contains the content of the floating product information panel. Arranges child elements in a row, centered horizontally and vertically. Fits width to content and height to content. Has padding left and right of 10px. Has a max width of 1200px. Collapses when hidden.`
* f858be70-7f80-41ad-9146-63d147f07bc7 `Group element, contains the product header and description/price. Arranges child elements in a column with a gap of 70px, centered vertically. Fits width to content and height to content. Has a minimum width and height of 40px.`
* a4b5fdfd-9f75-47ba-bea4-48d0d0c4eafc `Group element, contains the product header elements (logo and business name). Arranges child elements in a row with a gap of 10px. Fits width and height to content. Has a minimum width and height of 40px.`
* 1427870f-bed1-40b7-8ffe-da4a4c2903f7 `Image element, displays the business icon/logo. Image source is a static URL. Has a fixed width and height of 240px. Fits height to content. Has a minimum width and height of 40px. Has a border roundness of 10. Aspect ratio is 1/1.`
* 8678819b-fd8b-4cff-b519-687391554ad4 `Text element, displays the business name "Propps". Fits width and height to content. Font weight is 600.`
* 1e3d1e4a-33e7-45e6-9724-547c1e4d3c7a `Group element, contains the product description and price/plan information. Arranges child elements in a column with a gap of -5px, centered vertically. Fits width and height to content. Has a minimum width and height of 40px.`
* dc18fdfe-8611-4d0b-92fd-fb0ba689e35c `Group element, displays the product price and plan. Arranges child elements in a row with a gap of 10px. Fits width and height to content. Has a minimum width and height of 40px.`
* 23a06bc0-cdee-4763-99af-71a06089e35c `Text element, displays the product price "R$ 3.600". Fits width and height to content. Font size is 32. Font weight is 700. Has right padding of 5px.`
* f0cdf6bc-cc3e-4a15-ac96-45ce70cd997d `Text element, displays the plan name "Plano Anual". Fits width and height to content. Font size is 12. Font weight is 600. Has a background color and border. Has padding.`
***
### Vibe Ecommerce ADDONS
Page Summary
The `vibe-ecommerce-addons` page is designed as a high-converting checkout page specifically for e-commerce products, with a focus on increasing average order value through add-ons. It collects buyer information (name, email, ID, phone), delivery address (street, number, complement, district, zip code, city), and payment details (card number, expiry date, CVV). The page displays product information, including price, and allows users to apply discount coupons. A key feature is the 'Buy Together' section, which promotes additional products and dynamically updates the cart total. The page also includes a countdown timer to create urgency and displays business branding and legal links in the footer. Workflows on this page handle setting the state of the 'Buy Together' checkbox based on clicks and initializing the countdown timer upon page load. The page is structured with responsive groups to adapt to different screen sizes.
#### UI
* main `Group: The main container for the page content, centered horizontally with padding and a max width of 1200px. Arranges child elements in a row with space between them.`
* div-info-customer-delivery `Group: Contains all input fields and labels related to buyer information and delivery address. Has a white background, rounded corners, and a subtle box shadow. Arranges child elements in a column with a gap of 20px. Collapses when hidden.`
* box-info-payments-customer `Group: Contains input fields for buyer information (name, ID, email, phone). Arranges child elements in a column with a gap of 15px. Collapses when hidden.`
* title-info-customer `Text: Displays the title 'Buyer Information'.`
* info-customer-name `Input: Field for the buyer's full name. Has a placeholder 'Full name'. Styled with rounded corners and a subtle box shadow.`
* info-customer-id `Input: Field for the buyer's tax ID. Has a placeholder 'ID Tax'. Styled with rounded corners and a subtle box shadow.`
* info-customer-email `Input: Field for the buyer's email address. Has a placeholder 'E-mail'. Styled with rounded corners and a subtle box shadow.`
* info-customer-phone `InternationalPhoneInput: Field for the buyer's phone number. Configured for specific countries (US, GB, DE, AU, FR, TH, ID, IN, TW, BR, PT) with a default country of Brazil (BR). Has a placeholder '00000-0000'. Styled with rounded corners.`
* css-info-customer-phone `HTML: Contains CSS to style the InternationalPhoneInput element, specifically targeting the border radius and box shadow.`
* box-info-payments-address `Group: Contains input fields for the delivery address. Arranges child elements in a column with no gap. Collapses when hidden.`
* title-info-customer-address `Text: Displays the title 'Delivery Address'.`
* box-info-payments-address-inputs `Group: Contains the address input fields. Arranges child elements in a column with a gap of 15px. Styled with rounded corners and a subtle box shadow.`
* info-customer-road `Input: Field for the street address. Has a placeholder 'Street'. Styled with specific border styles.`
* info-customer-number-and-district `Group: Contains input fields for the address number and district. Arranges child elements in a row.`
* info-customer-number `Input: Field for the address number. Has a placeholder 'Number'. Styled with specific border styles.`
* info-customer-district `Input: Field for the district. Has a placeholder 'District'. Styled with specific border styles.`
* info-customer-zipcode-and-city `Group: Contains input fields for the zip code and city. Arranges child elements in a row.`
* info-customer-zipcode `Input: Field for the zip code. Has a placeholder 'Zip Code'. Styled with specific border styles.`
* dropdown-info-customer-city `Dropdown: Field for selecting the city. Provides a predefined list of cities (Nova York, Londres, Tóquio, Paris, Xangai, Pequim, Cingapura, Dubai, Hong Kong, Los Angeles). Has a placeholder 'City'. Styled with specific border styles.`
* d6ffdbf6-7b8a-429d-85b3-6aa38a6fc864 `Input: Field for the address complement. Has a placeholder 'Complement'. Styled with specific border styles.`
* ec8d0c95-f576-427d-bb7c-99e24e6b0d14 `Group: Contains payment details and the 'Buy Together' section. Has a white background, rounded corners, and a subtle box shadow. Arranges child elements in a column. Collapses when hidden.`
* box-info-payments-action `Group: Contains elements related to payment selection. Arranges child elements in a column with a gap of 15px. Collapses when hidden.`
* abea3794-0ed0-47d7-80ba-ccd6a77608e9 `Text: Displays the title 'Payment Details'.`
* box-info-payments-selection-types `Group: Contains payment type selection options (currently only card is visible). Styled with a border and rounded corners.`
* ba3a2140-e41e-4397-b972-cc41ea34603d `Group: Contains elements for card payment details. Arranges child elements in a column with a gap of 6px. Collapses when hidden.`
* 5d31c2bb-a3fe-4d79-bcc9-06d867971862 `Group: Contains the card icon and text label. Arranges child elements in a row with a gap of 6px.`
* 60f088c6-85ee-454b-844f-d9e8c4245cb3 `Icon: Displays a credit card icon.`
* b6dca5db-d7ec-474a-96ab-a0ab439378c8 `Text: Displays the text 'Card Information'.`
* 9289bb6f-3bc7-4669-a2e1-412d40afddcb `Group: Contains the card number input and card logos. Arranges child elements in a relative layout. Styled with specific border styles.`
* cedb264c-f161-4115-9fa5-bba171bfac5a `Input: Field for the credit card number. Has a placeholder '0000 0000 0000 0000'. Styled with specific border styles.`
* 0ef2c8a2-abd0-4459-9a6c-3bf060e21005 `Icon: Displays a Visa card logo icon. Positioned absolutely within its parent group.`
* 1bc25779-6d14-4421-97cb-79b5ce2bd727 `Icon: Displays a Mastercard logo icon. Positioned absolutely within its parent group.`
* f8b88fb2-8a44-4eb2-b142-b1a97e14fe1c `Group: Contains input fields for card expiry date and CVV. Arranges child elements in a row.`
* 06f68c66-06a0-4481-ab89-d3a35f9d2196 `Input: Field for the card expiry date. Has a placeholder '00/0000'. Styled with specific border styles.`
* 424f090c-db6a-4852-b595-ffb1d69501f7 `Group: Contains the CVV input and icon. Arranges child elements in a relative layout. Styled with specific border styles.`
* 674c3562-8088-40c2-81e2-7b40c50574dd `Input: Field for the card CVV. Has a placeholder 'CVV'. Styled with specific border styles.`
* 48280df6-91a9-42ec-91e4-679571744121 `Icon: Displays a generic credit card icon. Positioned absolutely within its parent group.`
* b07a67e1-3c31-468c-8521-c3c098ff5a83 `Group: Contains the 'Buy Together' section. Arranges child elements in a column with a gap of 10px.`
* eff27fc7-7e21-4b8c-a109-7536e01655c2 `Text: Displays the title 'Buy together'.`
* 64e144bb-17c8-4857-9aa5-9104d1367bda `Group: Contains the 'Buy Together' product selection and description. Styled with a dashed border and rounded corners. Collapses when hidden.`
* cd6c098a-72c4-4562-a567-2cccd7ea1d6b `Group: Contains the checkbox and description for the 'Buy Together' product. Arranges child elements in a row. When clicked, if 'check-buy-together' is not selected, sets 'check-buy-together' to true. If 'check-buy-together' is selected, sets 'check-buy-together' to false.`
* b71efb8e-8449-4eda-963a-79748a576923 `Icon: Represents the checkbox for the 'Buy Together' product. Icon changes based on the custom state 'selecionado_' of this element. When clicked, if its custom state 'selecionado_' is no, sets its custom state 'selecionado_' to true. When clicked, if its custom state 'selecionado_' is yes, sets its custom state 'selecionado_' to false. Collapses when hidden.`
* 08623a2d-de9a-4bd2-ba25-2f81307eab6a `Text: Displays a description for the 'Buy Together' product: 'Lorem ipsum dolor sit amet, consectetur adipiscing.'`
* 2ed75a6b-f850-4fe1-ad97-ccfde2db43f2 `Text: Displays a longer description for the 'Buy Together' product: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac congue nisl, ac dapibus nisi. Etiam vitae sapien metus. Etiam imperdiet in nibh ut semper. Cras bibendum luctus mi, tincidunt semper est feugiat non.'`
* 599f6cbe-90de-46f6-9cec-5f845497ef83 `Group: Contains the order summary, coupon section, and payment button. Has a white background, rounded corners, and a subtle box shadow. Arranges child elements in a column with a gap of 20px. Collapses when hidden.`
* cffd9df3-041a-4296-80b7-10d04be91894 `Group: Contains the discount coupon section. Arranges child elements in a column with no gap. Collapses when hidden.`
* b0c99eac-0309-4dc3-b3a6-4c6f6eef3e34 `Text: Displays the title 'Discount Coupon'.`
* 91d99700-b5bf-4859-afa1-965a6b590b53 `Group: Contains the coupon input field and apply button. Styled with a border and rounded corners.`
* 9e9ef6c3-2215-4aad-9164-1ff32fcef4d7 `Input: Field for entering a discount coupon code. Has a placeholder 'Add coupon'. Styled with specific border styles.`
* 65d113e6-76de-4047-bd88-19d0d6e3ac1f `Button: Button to apply the discount coupon. Displays the text 'Apply' and an icon. Disabled by default. Collapses when hidden.`
* 918dc10e-62ee-4004-b83d-1e6714a9858c `Group: Contains the order summary details (subtotal, coupon discount, buy together product, shipping, total). Arranges child elements in a column with a gap of 20px.`
* 8e4f58e3-a5b6-46ce-8a72-1814786f359a `Text: Displays the title 'Subtotal'.`
* b2161191-940f-4812-8a22-9d45c3099f97 `Group: Displays the coupon discount line item. Arranges child elements in a row with space between them. Styled with a bottom border. Visible by default but likely hidden when no coupon is applied.`
* 8cd9c5fb-bb5c-4483-b189-4cf9ebc5dac7 `Text: Displays the text 'Add coupon'.`
* c776feac-eb40-4b8e-b95d-ca25fd8343c8 `Text: Displays the coupon discount amount, formatted as '- R$ 97'.`
* 5e5c6ba7-7545-4e81-8962-689ce3aaccc0 `Group: Displays the main product line item. Arranges child elements in a row with space between them. Styled with a bottom border.`
* d476b1d9-a688-44c8-b67b-54f68affc6fb `Text: Displays the name of the main product: 'Template Bubble Example'.`
* 56ec2b2f-9674-4b07-af73-85d8cba38740 `Text: Displays the price of the main product, formatted as 'R$ 197'.`
* b0b0dcd8-94c2-4665-8f72-884d3b4bb94d `Group: Displays the 'Buy Together' product line item. Arranges child elements in a row with space between them. Styled with a bottom border. Only visible when the 'Buy Together' product is selected. Collapses when hidden.`
* 7f510c5c-74b3-408b-a4d0-af223f3a6347 `Text: Displays the name of the 'Buy Together' product: 'Product Buy Together'.`
* 8dfe682c-a841-4f47-8aaf-e651a6abd374 `Text: Displays the price of the 'Buy Together' product, formatted as 'R$ 197'.`
* cec9f800-7cbe-4ffd-9ca2-b983d-1e6714a9858c `Group: Displays the shipping cost line item. Arranges child elements in a row with space between them. Styled with a bottom border.`
* d73f2c1c-4e0a-4c36-a659-6056bf0322ea `Text: Displays the text 'Shipping'.`
* e9cdc6a1-0c0f-4977-a3a5-4d078e952d69 `Text: Displays the shipping cost, formatted as '+ R$ 45'.`
* 77fe8d4b-7299-47ab-afab-5f8d47a9f411 `Group: Displays the total amount to pay. Arranges child elements in a row with space between them. Styled with no bottom border.`
* c12fd042-69ec-4fee-ada8-42f423b1a17e `Text: Displays the text 'Total To Pay'.`
* 01ad3cd8-2d2c-4065-945c-c9ae7192831f `Text: Displays the total amount to pay, formatted as 'R$ 197'.`
* 93276d7d-99c0-48b3-9138-f1845375387f `Button: Button to initiate the payment process. Displays the text 'Pagar' and an icon. Disabled by default. Collapses when hidden.`
* 1e01485d-0c18-457b-9b19-6578d038a5ad `Group: The footer container, centered horizontally with a max width of 1200px. Arranges child elements in a row, centered horizontally.`
* 462727af-12d2-4a66-94a3-e2aea2b95dfc `Group: Contains business information and legal links. Arranges child elements in a column with a gap of 60px. Collapses when hidden.`
* 6257cd27-9e7d-464c-b623-6d801c09d244 `Group: Contains the business logo and product information. Arranges child elements in a row, centered vertically and horizontally. Collapses when hidden.`
* 4ea07f8f-6953-47cc-8c78-c3cfbc2187a1 `Group: Contains the product header and database information. Arranges child elements in a column with a gap of 70px, centered vertically. Collapses when hidden.`
* 7b3e653d-46f2-4d93-8217-b64b063649e9 `Group: Contains the business logo and name. Arranges child elements in a row.`
* b9f7fa5e-d0ac-4e6c-995e-ae7447315e40 `Image: Displays the business logo. Has a rounded border.`
* d26b9370-70cd-4ef5-a4a5-21cf85e71671 `Text: Displays the business name: 'Propps'.`
* 3d0e650b-f63c-48b8-95ff-7f90ede70447 `Group: Contains the product price and plan information. Arranges child elements in a column with a gap of -5px, centered vertically. Visible by default.`
* a7116beb-5c03-4873-ad44-82492c8ca8d6 `Group: Contains the product price and plan label. Arranges child elements in a row with a gap of 10px.`
* bcea25de-5a77-4966-8bab-8b89d001c8e0 `Text: Displays the product price, formatted as 'R$ 3.600'.`
* 15ee3be0-bfa5-4589-9689-caad5c53b69b `Text: Displays the plan type, formatted as 'Plano Anual'. Styled with a border and rounded corners.`
* 4d530b5a-7c45-4c4b-9ccd-d28baab65b9d `Group: Contains the business logo and legal links in the footer. Arranges child elements in a column with a gap of 10px, centered horizontally and vertically.`
* e6bac626-627f-4d96-a628-585ae7336899 `Image: Displays the business logo. When clicked, navigates to the 'index' page.`
* 4c6a0091-d6f5-41fb-8db2-3046c122858c `Text: Displays legal links: 'Terms of Use | Privacy'. Centered horizontally.`
* aaf63b10-de25-4566-85a9-3944543c8713 `FloatingGroup: A floating group that likely contains information about Bubble templates. Arranges child elements in a row, centered horizontally and vertically. Collapses when hidden.`
* 6257cd27-9e7d-464c-b623-6d801c09d244 `Group: Contains the business logo and product information. Arranges child elements in a row, centered vertically and horizontally. Collapses when hidden.`
* 4ea07f8f-6953-47cc-8c78-c3cfbc2187a1 `Group: Contains the product header and database information. Arranges child elements in a column with a gap of 70px, centered vertically. Collapses when hidden.`
* 7b3e653d-46f2-4d93-8217-b64b063649e9 `Group: Contains the business logo and name. Arranges child elements in a row.`
* b9f7fa5e-d0ac-4e6c-995e-ae7447315e40 `Image: Displays the business logo. Has a rounded border.`
* d26b9370-70cd-4ef5-a4a5-21cf85e71671 `Text: Displays the business name: 'Propps'.`
* 3d0e650b-f63c-48b8-95ff-7f90ede70447 `Group: Contains the product price and plan information. Arranges child elements in a column with a gap of -5px, centered vertically. Visible by default.`
* a7116beb-5c03-4873-ad44-82492c8ca8d6 `Group: Contains the product price and plan label. Arranges child elements in a row with a gap of 10px.`
* bcea25de-5a77-4966-8bab-8b89d001c8e0 `Text: Displays the product price, formatted as 'R$ 3.600'.`
* 15ee3be0-bfa5-4589-9689-caad5c53b69b `Text: Displays the plan type, formatted as 'Plano Anual'. Styled with a border and rounded corners.`
* 497acaba-6526-4d4d-881b-50aeb925cb0c `FloatingGroup: A floating group that contains the countdown timer. Has a purple background. Arranges child elements in a column, centered vertically.`
* 193c0e98-78b9-4713-ab00-a14d0bd7593b `Group: Contains the countdown engine and display text. Arranges child elements in a row, centered horizontally and vertically. Collapses when hidden.`
* f6795e2b-7e82-4805-a05a-68be7b9dadab `CountDown-Engine-A: A countdown timer element. Upon page load, it is initialized with a start time of the current date/time and an end time of 15 minutes after the current date/time. Collapses when hidden.`
* e4a1dab0-0639-4b6f-bd3c-c587f86e66af `Text: Displays the countdown timer text. Shows 'Offer available for ' followed by the remaining time from the 'CountDown-Engine-A' element, formatted as 'Minutes : Seconds'. Centered horizontally.`
When box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to toggle the state of the 'check-buy-together' element, specifically setting its 'selecionado\_' custom state to 'no' (false), but only if the 'selecionado\_' state is currently 'yes' (true). This suggests it's part of a feature where clicking a container element deselects an associated checkbox or similar toggle.
### Documentation
This workflow executes when the user clicks on the element named 'box-info-but-togheter-cta'. Before proceeding with any actions, the workflow checks a condition: it verifies if the custom state 'selecionado\_' of the element named 'check-buy-together' is currently set to 'yes'. If this condition is met (i.e., the 'check-buy-together' element is currently marked as selected), the workflow proceeds to its single action. If the condition is not met (the 'check-buy-together' element is not selected), the workflow does nothing.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element named 'check-buy-together' to 'no'. This action effectively deselects the 'check-buy-together' element, but only if the condition on the workflow trigger was true (meaning it was previously selected).
When box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element, but only if the 'selecionado\_' state is currently 'no'. This suggests it's part of a mechanism to select or activate a 'buy together' option.
### Documentation
This workflow is initiated when a user clicks on the element named 'box-info-but-togheter-cta'. This action is conditional: the workflow will only proceed if the custom state 'selecionado\_' of the element 'check-buy-together' is currently set to 'no'. If this condition is met, the workflow executes a single action to change the state of the 'check-buy-together' element.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element 'check-buy-together' to 'true'. This action effectively marks the 'buy together' option as selected within the application's state, likely triggering visual changes or enabling further actions related to the selected option.
When your-logo is clicked
### Summary
This workflow is triggered when the 'your-logo' element is clicked. Its primary purpose is to navigate the user back to the 'index' page of the application.
### Documentation
This workflow is initiated by a user clicking on the element named 'your-logo'. This element is likely a logo or branding image commonly found in the header of a web page. Upon being clicked, the workflow executes a single action: navigating the user to the application's main page, which is typically named 'index' in Bubble applications. This is a standard navigation pattern to allow users to easily return to the homepage from anywhere in the application.
### Actions
#### Step 1: Go to page
This action directs the user's browser to a different page within the application. Specifically, it navigates to the page named 'index'. This is the standard way to return to the application's homepage in Bubble.
check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to update the state of the 'check-buy-together' element itself, specifically setting its 'selecionado\_' custom state to 'no' (false), but only if the element's 'selecionado\_' state is currently 'yes' (true). This suggests a toggle-like behavior where clicking the element when it's selected deselects it.
### Documentation
This workflow is initiated when the user clicks on the element named 'check-buy-together'. Before executing any actions, the workflow checks a condition: it verifies if the 'selecionado\_' custom state of the 'check-buy-together' element is currently set to 'yes'. If this condition is met (i.e., the element is currently selected), the workflow proceeds to the next step. If the condition is not met (the element is not currently selected), the workflow stops and no actions are performed. The single action within this workflow is designed to change the state of the 'check-buy-together' element.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element named 'check-buy-together' to 'no'. This action only runs if the condition on the workflow trigger (the element's 'selecionado\_' state being 'yes') is true. This effectively deselects the 'check-buy-together' element when it is clicked while already selected.
Page is loaded
### Summary
This workflow triggers when the page finishes loading. Its primary purpose is to initialize a countdown timer element on the page by setting its start and end times based on the current date and time.
### Documentation
This workflow is triggered automatically by Bubble when the page containing it has fully loaded in the user's browser. It contains a single action designed to configure a countdown element. The workflow calculates an end time 15 minutes from the current time and sets this, along with the current time as the start time, on a specific countdown element. This likely initiates a visual countdown displayed to the user.
### Actions
#### Step 1: Set Countdown
This action targets the 'CountDown-Engine-A' element on the page. It sets the countdown's start time to the 'Current date/time' and calculates the end time by adding 15 minutes to the 'Current date/time'. It also sets a text value of "Minuto", which might be used for display purposes within the countdown element.
When check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element, but only if the state is currently 'no'. This suggests it's part of a mechanism to select or deselect an option, likely related to adding an item or service (like a 'buy together' offer) to a checkout or order.
### Documentation
This workflow is initiated when a user clicks on the element named 'check-buy-together'. This element likely represents a checkbox or similar interactive element used to indicate selection. The workflow is conditional: it will only proceed if the 'selecionado\_' custom state of the 'check-buy-together' element is currently set to 'no'. If this condition is met, the workflow executes a single action to change the state of the element.
### Actions
#### Step 1: Set state of an element
This step sets the 'selecionado\_' custom state of the 'check-buy-together' element to 'true'. This action is executed only if the workflow's initial condition (the state being 'no') is met. This effectively toggles the state from 'no' to 'true' upon clicking, but prevents repeated clicks from changing the state if it's already 'true'.
***
### Vibe Checkout Mobile BRL (Brazil)
Page Summary
The `vibe-checkout-mobile-brl` page is a mobile-first checkout page template designed for the Brazilian market within the VibeCheckouts™ suite. Its primary function is to provide a streamlined and high-converting checkout experience for users on mobile devices. The page displays product information, collects customer details (including billing address), allows the selection of payment methods (Pix, Boleto, and Credit Card), and facilitates the payment process. It integrates with payment gateways (implied by the payment method options) and likely triggers workflows to process payments and complete orders. The page is optimized for mobile browsers, ensuring a seamless user experience on smartphones and tablets.
#### UI
* main `Group element that serves as the main container for the page content. It is horizontally centered and has a maximum width of 768px, ensuring responsiveness for mobile and tablet views. It uses a row layout and centers its content vertically.`
* box-info-payments `Group element containing all payment-related information and actions. It is vertically stacked and has padding on all sides. It is conditionally visible, likely based on the checkout flow state.`
* box-info-payments-content `Group element containing the core payment information sections. It uses a column layout with a gap between elements. It is conditionally visible, likely based on the checkout flow state.`
* box-info-product-content `Group element displaying product details. It uses a column layout with a gap between elements.`
* box-info-product-header `Group element containing the product logo and name. It uses a row layout with a gap between elements and is vertically centered.`
* logo-ico-your-business `Image element displaying the product or business logo. The source is a static image URL.`
* box-info-product-database `Group element containing the product name, price, and plan details. It uses a column layout with a negative row gap.`
* name-your-product `Text element displaying the name of the product. The text is static: 'Template Bubble Example '.`
* box-info-product-description-price-plan `Group element containing the product price and plan. It uses a row layout with a gap between elements and is vertically centered.`
* price `Text element displaying the product price. The text is static: 'R$ 3.600'.`
* plan `Text element displaying the product plan. The text is static: 'Plano Anual'. It has a background color, border, and rounded corners.`
* description-product `Text element displaying a description of the product. The text is static placeholder text.`
* divider-section `Shape element acting as a horizontal divider line. It has a fixed height of 1px and a background color.`
* box-price-product `Group element displaying the subtotal price of the product. It uses a row layout and aligns items with space between them. It has a solid bottom border.`
* name-your-product `Text element displaying the name of the product in the cart summary. The text is static: 'Template Bubble Example '.`
* price-your-product `Text element displaying the price of the product in the cart summary. The text is static: 'R$ 197'.`
* box-sum-your-cart `Group element displaying the total price to be paid. It uses a row layout and aligns items with space between them. It has a solid bottom border.`
* Text C `Text element displaying the label 'Total à pagar'.`
* Text C `Text element displaying the total price. The text is static: 'R$ 197'.`
* box-info-payments-customer `Group element containing customer information input fields. It uses a column layout with a gap between elements. It is conditionally visible and collapses when hidden.`
* title-info-customer `Text element displaying the title 'Informações do Comprador'.`
* info-customer-name `Input element for the customer's full name. Placeholder text is 'Seu nome completo'. It has a border and box shadow.`
* info-customer-id `Input element for the customer's CPF/CNPJ. Placeholder text is 'CPF/CNPJ'. It has a border and box shadow.`
* info-customer-email `Input element for the customer's email address. Placeholder text is 'Seu email'. It has a border and box shadow.`
* info-customer-phone `InternationalPhoneInput element for the customer's phone number. Placeholder text is '00000-0000'. It is configured for specific countries including Brazil. It has a border.`
* css-info-customer-phone `HTML element containing CSS to style the phone input element with a specific ID.`
* box-info-payments-address `Group element containing customer address input fields. It uses a column layout. It is conditionally visible and collapses when hidden.`
* title-info-customer-address `Text element displaying the title 'Endereço Fiscal'.`
* box-info-payments-address-inputs `Group element containing the address input fields. It uses a column layout with a margin top. It has a border and box shadow.`
* info-customer-road `Input element for the customer's street address. Placeholder text is 'Rua'. It has borders on top, left, and right, and a solid bottom border.`
* info-customer-number-and-district `Group element containing the number and district input fields. It uses a row layout.`
* info-customer-number `Input element for the customer's address number. Placeholder text is 'Número'. It has borders on top, left, and right, and a solid bottom border.`
* info-customer-district `Input element for the customer's district. Placeholder text is 'Bairro'. It has borders on top, left, and right, and a solid bottom border.`
* info-customer-zipcode-and-city `Group element containing the zipcode and city input fields. It uses a row layout.`
* info-customer-zipcode `Input element for the customer's zip code (CEP). Placeholder text is 'CEP'. It has borders on top, left, and right, and a solid bottom border.`
* dropdown-info-customer-city `Dropdown element for selecting the customer's city. It has a static list of Brazilian cities as choices. Placeholder text is 'Cidade'. It has borders on top, left, and right, and a solid bottom border.`
* info-customer-complement `Input element for the customer's address complement. Placeholder text is 'Complemento'. It has borders on top, left, right, and bottom.`
* box-info-payments-action `Group element containing the payment method selection and action buttons. It uses a column layout with a gap between elements. It is conditionally visible and collapses when hidden.`
* title-box-payments `Text element displaying the title 'Selecione a Forma de Pagamento'.`
* box-info-payments-selection-types `Group element containing the different payment method options. It uses a column layout and has a border with rounded corners.`
* box-info-payments-type-pix `Group element representing the Pix payment option. It uses a row layout with a gap between elements. It has a solid bottom border. When clicked, it sets the custom state 'tabs_' of 'vibe-checkout-mobile-brl' to 1.`
* check-type-pix `Icon element representing the selection status for Pix. The icon is a circle. The color is rgba(var(--color_text_default_rgb), 0.5).`
* logo-pix `Icon element displaying the Pix logo. The icon is 'material regular pix'. The color is rgba(24,177,121,1).`
* Pix (à vista) `Text element displaying the text 'Pix (à vista)'.`
* box-info-payments-type-barcode `Group element representing the Boleto payment option. It uses a row layout with a gap between elements. It has solid top and bottom borders. When clicked, it sets the custom state 'tabs_' of 'vibe-checkout-mobile-brl' to 2.`
* check-barcode `Icon element representing the selection status for Boleto. The icon is a circle. The color is rgba(var(--color_text_default_rgb), 0.5).`
* logo-barcode `Icon element displaying the barcode logo. The icon is 'phosphor outlined barcode'. The color is rgba(0,0,0,1).`
* Barcode (à vista) `Text element displaying the text 'Boleto (à vista)'.`
* box-info-payments-type-card `Group element representing the Credit Card payment option. It uses a column layout with a gap between elements. It has solid top, left, right, and bottom borders with rounded corners. It is conditionally visible and collapses when hidden. When clicked, it sets the custom state 'tabs_' of 'vibe-checkout-mobile-brl' to 3.`
* box-info-payments-type-card-ID `Group element containing the card icon and text label. It uses a row layout with a gap between elements and is vertically centered.`
* check-card `Icon element representing the selection status for Credit Card. The icon is a circle. The color is rgba(var(--color_text_default_rgb), 0.5).`
* logo-card `Icon element displaying the credit card logo. The icon is 'material outlined credit_card'. The color is rgba(0,115,230,1).`
* Card (em até 12x) `Text element displaying the text 'Cartão de Crédito (em até 12x)'.`
* box-info-payments-type-card-action `Group element containing the credit card input fields and installment selection. It uses a column layout. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the 'tabs_' custom state being set to 3.`
* box-info-payments-number-card `Group element containing the card number input and card type logos. It uses a relative layout and has borders on top, left, and right with rounded corners.`
* info-number-card `Input element for the credit card number. Placeholder text is '0000 0000 0000 0000'. It has borders on top, left, and right, and a solid bottom border.`
* logo-visa `Icon element displaying the Visa logo. The icon is 'fa fa-cc-visa'. The color is rgba(var(--color_text_default_rgb), 0.5). It is positioned absolutely within its parent group.`
* logo-mastercard `Icon element displaying the Mastercard logo. The icon is 'fa fa-cc-mastercard'. The color is rgba(var(--color_text_default_rgb), 0.5). It is positioned absolutely within its parent group.`
* logo-card-CCV `Icon element displaying a generic credit card logo. The icon is 'fa fa-credit-card'. The color is rgba(var(--color_text_default_rgb), 0.5). It is positioned absolutely within its parent group.`
* ea699598-ec4c-4d2e-9b11-40f5f8f6ed78 `Group element containing the card valid date and CCV inputs. It uses a row layout.`
* info-valid-date `Input element for the card's expiration date. Placeholder text is '00/0000'. It has borders on top, left, right, and bottom with rounded corners on the left.`
* info-valid-CCV `Group element containing the CCV input and icon. It uses a relative layout and has borders on top, left, right, and bottom with rounded corners on the bottom.`
* numer-CCV `Input element for the card's CCV. Placeholder text is 'CVV'. It has borders on top, left, right, and bottom with rounded corners on the bottom.`
* logo-card-CCV `Icon element displaying a generic credit card logo. The icon is 'fa fa-credit-card'. The color is rgba(var(--color_text_default_rgb), 0.5). It is positioned absolutely within its parent group.`
* dropdown-info-payments-installments `Dropdown element for selecting payment installments. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the 'tabs_' custom state being set to 3. The choices are populated from the 'parcelas' option set and a static list.`
* btn-pix `Button element to initiate payment via Pix. The text is 'Pagar R$ 197 agora'. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the 'tabs_' custom state being set to 1.`
* btn-barcode `Button element to initiate payment via Boleto. The text is 'Pagar R$ 197 agora'. It is not visible by default and collapses when hidden. Its visibility is likely controlled by the 'tabs_' custom state being set to 2.`
* btn-card `Button element to initiate payment via Credit Card. The text dynamically displays 'Pagar ' followed by the selected installment value from the 'dropdown-info-payments-installments' element. It is not visible by default, is disabled by default, and collapses when hidden. Its visibility is likely controlled by the 'tabs_' custom state being set to 3. The button is disabled until valid card details and an installment plan are selected.`
* box-info-business `Group element displaying business information and legal links. It uses a row layout with a gap between elements and is horizontally and vertically centered.`
* your-logo `Image element displaying the business logo. The source is a static image URL.`
* terms-and-privacy `Text element displaying links to the terms of use and privacy policy. The text is static: 'Termos de uso | Privacidade'.`
When box-info-payments-type-barcode is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-barcode' element is clicked. Its primary purpose is to update the state of the 'vibe-checkout-mobile-brl' element, likely to control which tab or section is currently visible within the mobile checkout interface, specifically setting it to the second tab.
### Documentation
This workflow executes when a user clicks on the element named 'box-info-payments-type-barcode'. This element is likely a visual representation or button associated with the barcode payment option within the mobile checkout flow. Upon being clicked, the workflow proceeds to a single action: setting a custom state on the 'vibe-checkout-mobile-brl' element. This action is designed to change the active view or tab within the mobile checkout component, directing the user to the section corresponding to the barcode payment method.
### Actions
#### Step 1: Set state of vibe-checkout-mobile-brl
This action sets the custom state named 'tabs\_' on the element 'vibe-checkout-mobile-brl'. The value of the state is set to '2'. This typically indicates that the second tab or section within the 'vibe-checkout-mobile-brl' element should now be displayed or become active. In the context of a checkout flow, this would likely reveal the interface for entering or viewing barcode payment details.
box-info-payments-type-card-ID is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-card-ID' element is clicked. Its primary purpose is to update the 'tabs\_' custom state of the 'vibe-checkout-mobile-brl' element to the value '3'. This action likely controls which tab or section is currently visible or active within the mobile checkout interface, specifically switching to a section related to payment card information.
### Documentation
This workflow is initiated when a user clicks on the element identified as 'box-info-payments-type-card-ID'. This element is likely a visual component, such as a button or a container, that represents the option to pay using a card within the mobile checkout flow of the VibeCheckouts™ application. Upon being clicked, the workflow executes a single action: setting the value of a custom state on another element. The target element is 'vibe-checkout-mobile-brl', which appears to be the main container or group for the mobile checkout interface. The custom state being modified is named 'tabs\_'. The workflow sets the value of this state to '3'. In the context of a tabbed interface, setting the 'tabs\_' state to '3' would typically cause the third tab or section within the 'vibe-checkout-mobile-brl' element to become visible or active, presumably displaying fields or information related to entering credit or debit card details for payment.
### Actions
#### Step 1: Set state
This action sets the value of a custom state on the element 'vibe-checkout-mobile-brl'. The custom state being modified is 'tabs\_'. The value assigned to this state is the number '3'. This action is used to control the visibility or active status of different sections or tabs within the mobile checkout interface, likely switching the view to the section corresponding to payment card input.
When box-info-payments-type-pix is clicked
### Summary
This workflow is triggered when the 'box-info-payments-type-pix' element is clicked. Its primary purpose is to update the state of the 'vibe-checkout-mobile-brl' element, likely to control the display of different payment information sections within the mobile checkout interface, specifically setting the view to show information related to Pix payments.
### Documentation
This workflow executes when a user clicks on the element named 'box-info-payments-type-pix'. This element is likely a visual representation or button associated with selecting Pix as the payment method within the mobile checkout template ('vibe-checkout-mobile-brl'). The workflow contains a single action that sets a custom state on the 'vibe-checkout-mobile-brl' element. This state change is used to dynamically control which payment method details are visible to the user, ensuring that when Pix is selected, the corresponding information or input fields are displayed.
### Actions
#### Step 1: Set state of vibe-checkout-mobile-brl
This action sets the custom state 'tabs\_' on the element 'vibe-checkout-mobile-brl'. The value of the state is set to '1'. This state is likely used by conditional logic or other workflows to determine which content or group is visible within the 'vibe-checkout-mobile-brl' element, with the value '1' corresponding to the display of Pix payment details.
***
### Vibe Checkout Mobile GLOBAL
Page Summary
The `vibe-checkout-mobile-global` page is a mobile-first checkout page designed for global transactions within the VibeCheckouts™ application. Its primary function is to provide a streamlined and high-converting interface for users to complete their purchase on a mobile device. The page displays product details, including the product name, description, price, and plan type. It collects essential buyer information such as full name, tax ID, email, and address details (street, number, district, zip code, and city). The page also includes a section for payment details, specifically focusing on credit card information (card number, expiration date, and CVV). A prominent 'Pay' button initiates the payment process. The page incorporates elements for displaying the business logo and links to terms and privacy policies, aiming to build trust and provide necessary legal information. The layout is optimized for mobile screens, ensuring a user-friendly experience.
#### UI
* main `Group element serving as the main container for the page content. It is centered horizontally and its height fits the content. It has a maximum width of 768px.`
* box-info-payments `Group element containing all payment-related information and actions. It has a fixed width of 280px but is set to fit the width of its parent (main), effectively making it 100% width within the main container's constraints. It has top and bottom padding of 30px and left/right padding of 30px. It is a column layout and collapses when hidden.`
* box-info-payments-content `Group element containing the core payment form and product details. It has top and bottom padding of 6px and left/right padding of 20px. It is a column layout and collapses when hidden.`
* box-info-product-content `Group element displaying the product information. It has a column layout with a 10px gap between elements. It collapses when hidden.`
* box-info-product-header `Group element containing the product logo and basic information. It has a row layout with a 10px column gap.`
* logo-ico-your-business `Image element displaying the business logo. It has a fixed width and height of 240px but is constrained by min-width and min-height of 40px. The image source is a static URL.`
* box-info-product-database `Group element containing the product name, price, and plan details. It has a column layout with a -5px gap between elements.`
* name-your-product `Text element displaying the product name. The text is static: 'Template Bubble Example'.`
* box-info-product-description-price-plan `Group element containing the product price and plan information. It has a row layout with a 20px column gap.`
* price `Text element displaying the product price. The text is static: 'R$ 3.600'.`
* plan `Text element displaying the product plan type. The text is static: 'Plano Anual'. It has a light blue background and blue border.`
* divider-section `Shape element acting as a visual divider. It has a fixed height of 1px and a minimum width of 150px. It collapses when hidden.`
* Subtotal `Text element displaying the title for the buy details section. The text is static: 'Buy Details'.`
* description-product `Text element displaying a description of the product. The text is static placeholder text.`
* box-price-product `Group element displaying the product name and price in the cart summary. It has a row layout with space-between horizontal alignment. It has a solid bottom border.`
* name-your-product `Text element displaying the product name in the cart summary. The text is static: 'Template Bubble Example'.`
* price-your-product `Text element displaying the product price in the cart summary. The text is static: 'R$ 197'.`
* box-sum-your-cart `Group element displaying the total amount to pay. It has a row layout with space-between horizontal alignment. It has no bottom border.`
* Text C `Text element displaying the label 'Total To Pay'.`
* Text C `Text element displaying the total price. The text is static: 'R$ 197'.`
* box-info-payments-action `Group element containing the payment details section. It has a column layout with a 15px row gap. It collapses when hidden.`
* title-box-payments `Text element displaying the title for the payment details section. The text is static: 'Payment Details'.`
* box-info-payments-selection-types `Group element containing the payment method selection. It has a column layout with a solid border and 8px border roundness.`
* box-info-payments-type-card `Group element representing the credit card payment option. It has a column layout with 6px column gap and 10px padding. It collapses when hidden.`
* box-info-payments-type-card-ID `Group element containing the card icon and text label. It has a row layout with 6px column gap.`
* logo-card `Icon element displaying a credit card icon.`
* Card (em até 12x) `Text element displaying the label 'Card Information'.`
* box-info-payments-type-card-action `Group element containing the credit card input fields. It has a column layout with 5px top and bottom margin. It collapses when hidden.`
* box-info-payments-number-card `Group element containing the card number input and card type logos. It has a relative layout with 8px border roundness on the top and right.`
* info-number-card `Input element for entering the credit card number. Placeholder text is '0000 0000 0000 0000'. It has a solid top, left, and right border.`
* logo-visa `Icon element displaying the Visa logo. It is positioned absolutely within its parent.`
* logo-mastercard `Icon element displaying the Mastercard logo. It is positioned absolutely within its parent.`
* box-info-payments-valid-card `Group element containing the card expiration date and CVV inputs. It has a row layout.`
* info-valid-date `Input element for entering the card expiration date. Placeholder text is '00/0000'. It has a solid top, left, right, and bottom border with 8px border roundness on the left.`
* info-valid-CCV `Group element containing the CVV input and icon. It has a relative layout with 8px border roundness on the bottom.`
* numer-CCV `Input element for entering the card CVV. Placeholder text is 'CVV'. It has a solid top, right, and bottom border.`
* logo-card-CCV `Icon element displaying a credit card icon, likely for visual aid regarding the CVV location. It is positioned absolutely within its parent.`
* box-info-payments-customer `Group element containing the buyer information section. It has a column layout with a 15px row gap. It collapses when hidden.`
* title-info-customer `Text element displaying the title for the buyer information section. The text is static: 'Buyer Information'.`
* info-customer-name `Input element for entering the buyer's full name. Placeholder text is 'Full name'. It has an outset box shadow and 8px border roundness.`
* info-customer-id `Input element for entering the buyer's tax ID. Placeholder text is 'ID Tax'. It has an outset box shadow and 8px border roundness.`
* info-customer-email `Input element for entering the buyer's email address. Placeholder text is 'E-mail'. It has an outset box shadow and 8px border roundness.`
* info-customer-phone `InternationalPhoneInput element for entering the buyer's phone number. Placeholder text is '00000-0000'. It is configured for specific countries including Brazil. It has a minimum width of 250px.`
* css-info-customer-phone `HTML element containing CSS to style the InternationalPhoneInput element, specifically targeting its box shadow and border radius.`
* box-info-payments-address `Group element containing the fiscal address input fields. It has a column layout with no gap and 30px bottom padding. It collapses when hidden.`
* title-info-customer-address `Text element displaying the title for the fiscal address section. The text is static: 'Fiscal Address'.`
* box-info-payments-address-inputs `Group element containing the address input fields. It has a column layout with a 15px top margin and 8px border roundness. It has an outset box shadow.`
* info-customer-road `Input element for entering the street address. Placeholder text is 'Street'. It has a solid top, left, and right border with 8px border roundness on the top and right.`
* a06a7658-87d9-4a2e-a7d7-18b64c486393 `Group element containing the number and district inputs. It has a row layout.`
* info-customer-number `Input element for entering the street number. Placeholder text is 'Number'. It has a solid top, left, and right border.`
* 010ea4e6-422b-4133-ba65-9169125ad304 `Input element for entering the district. Placeholder text is 'District'. It has a solid top, right, and bottom border.`
* 527d3fe6-027c-4192-881f-594803505318 `Group element containing the zipcode and city inputs. It has a row layout.`
* fd4cfe04-e112-49db-81bf-811984b1fe6d `Input element for entering the zip code. Placeholder text is 'Zip Code'. It has a solid top, left, and right border.`
* dropdown-info-customer-city `Dropdown element for selecting the city. Placeholder text is 'City'. The choices are a static list of major global cities. It has a solid top, left, and right border.`
* fbb2cc7a-b084-4621-837e-f6b62173ef81 `Input element for entering address complement information. Placeholder text is 'Complemento'. It has a solid top, left, right, and bottom border with 8px border roundness on the left and bottom.`
* a7b1f8e5-78a3-4130-ad13-85a48c22a4d1 `Button element to initiate the payment. The text is 'Pay R$ 197' with an arrow icon. The button is currently disabled. It collapses when hidden.`
* box-info-business `Group element containing the business logo and terms/privacy links. It has a row layout with a 10px column gap and 60px top margin.`
* your-logo `Image element displaying the business logo. The image source is a static URL.`
* terms-and-privacy `Text element displaying links to the terms of use and privacy policy. The text is static: 'Terms of Use | Privacy'.`
***
### Vibe Checkout Mobile ADDONS
Page Summary
The `vibe-checkout-mobile-addons` page is a mobile-optimized checkout page designed to increase average order value through add-ons. It is part of the VibeCheckouts™ suite, providing Bubble developers with pre-built, high-converting checkout templates. This specific page focuses on a mobile-first layout and includes sections for product information, buy-together add-ons, payment details (including card information and discount coupons), and buyer information (including address and contact details). A floating countdown timer is displayed to create urgency. The page allows users to select an add-on product, enter payment and personal information, apply discount coupons, and proceed to payment. User interactions include clicking the buy-together CTA to toggle the add-on selection and clicking the logo to navigate back to the index page.
#### UI
* main `Group: The main container for the page content, centered horizontally with vertical spacing. Max width is 768px. Contains all other visible elements.`
* box-info-payments `Group: Container for the payment and product information sections. Has padding and a subtle box shadow. Collapses when hidden. Arranged vertically.`
* banner-up `Image: Displays a banner image at the top of the checkout section. Has a fixed aspect ratio. Collapses when hidden.`
* box-info-payments-content `Group: Contains the core product, cart, payment, and customer information sections. Has horizontal padding and vertical spacing. Collapses when hidden. Arranged vertically.`
* box-info-product-content `Group: Contains the product header and database information. Has vertical spacing. Arranged vertically.`
* box-info-product-header `Group: Contains the product logo and name. Has horizontal spacing. Arranged horizontally.`
* logo-ico-your-business `Image: Displays the logo of the business. Has a fixed aspect ratio.`
* box-info-product-database `Group: Contains the product name, price, and plan details. Has vertical spacing. Arranged vertically.`
* name-your-product `Text: Displays the name of the main product. Font size 16, weight 600, color rgba(var(--color_text_default_rgb), 0.6).`
* price `Text: Displays the price of the main product. Font size 46, weight 700, color rgba(var(--color_text_default_rgb), 1). Letter spacing -2.6.`
* box-info-product-description-price-plan `Group: Contains the product plan text. Has horizontal spacing. Arranged horizontally.`
* price `Text: Displays the price of the product plan (e.g., R$ 3.600). Font size 46, weight 700, color rgba(var(--color_text_default_rgb), 1). Letter spacing -2.6.`
* plan `Text: Displays the product plan (e.g., Plano Anual). Font size 12, weight 600, color var(--color_primary_default). Has a light background and border.`
* box-info-product-cart `Group: Contains the buy details, product description, price details, and total sum. Has vertical spacing. Arranged vertically.`
* divider-section `Shape: A horizontal line used as a visual divider. Fixed height of 1px. Collapses when hidden.`
* Subtotal `Text: Label for the buy details section. Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* description-product `Text: Displays a description of the main product. Font size 14, weight 400, color var(--color_text_default). Line height 1.3.`
* box-price-product `Group: Displays the main product name and price. Arranged horizontally with space between items. Has a bottom border.`
* name-your-product `Text: Displays the name of the main product in the cart summary. Font size 14, weight 500, color rgba(var(--color_text_default_rgb), 0.6).`
* price-your-product `Text: Displays the price of the main product in the cart summary. Font size 14, weight 500, color rgba(var(--color_text_default_rgb), 0.6).`
* box-price-product-buy-together `Group: Displays the buy-together product name and price. Initially hidden and collapses when hidden. Arranged horizontally with space between items. Has a bottom border.`
* name-your-product `Text: Displays the name of the buy-together product. Font size 14, weight 500, color rgba(var(--color_text_default_rgb), 0.6).`
* price-your-product `Text: Displays the price of the buy-together product (e.g., - R$ 97). Font size 14, weight 500, color rgba(var(--color_text_default_rgb), 0.6).`
* box-price-product-add-coupon `Group: Displays the discount coupon label and value. Arranged horizontally with space between items. Has a bottom border.`
* name-your-product `Text: Label for the discount coupon (e.g., Add coupon). Font size 14, weight 500, color rgba(var(--color_text_default_rgb), 0.6).`
* price-your-product `Text: Displays the discount amount (e.g., - R$ 97). Font size 14, weight 500, color rgba(var(--color_text_default_rgb), 0.6).`
* box-sum-your-cart `Group: Displays the total to pay label and amount. Arranged horizontally with space between items. Has no bottom border.`
* Text C `Text: Label for the total amount (e.g., Total To Pay). Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* Text C `Text: Displays the total amount (e.g., R$ 197). Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* box-info-payments-address `Group: Contains the fiscal address inputs. Initially hidden and collapses when hidden. Arranged vertically.`
* title-info-customer-address `Text: Label for the fiscal address section. Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* box-info-payments-address-inputs `Group: Contains the street, number, district, zipcode, and city inputs. Arranged vertically.`
* info-customer-road `Input: Input field for the street address. Placeholder 'Street'. Has a top and right border.`
* d707684c-a775-4353-b76b-632cd35fc456 `Group: Contains the number and district inputs. Arranged horizontally.`
* info-customer-number `Input: Input field for the address number. Placeholder 'Number'. Has top, left, and right borders.`
* info-customer-district `Input: Input field for the address district. Placeholder 'District'. Has top, right, and bottom borders.`
* b921ad8c-3da5-4e03-923f-61965a677ad7 `Group: Contains the zipcode and city inputs. Arranged horizontally.`
* info-customer-zipcode `Input: Input field for the zip code. Placeholder 'Zip Code'. Has top, left, and right borders.`
* dropdown-info-customer-city `Dropdown: Dropdown for selecting the city. Placeholder 'City'. Has top, right, and bottom borders.`
* 977b1eee-4df4-444b-9ace-df3c767d0b8a `Input: Input field for the address complement. Placeholder 'Complemento'. Has left, right, and bottom borders.`
* box-info-payments-discount-coupon `Group: Contains the discount coupon input and apply button. Initially hidden and collapses when hidden. Arranged vertically.`
* title-info-customer-address `Text: Label for the discount coupon section. Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* box-info-payments-address-inputs `Group: Contains the coupon input and apply button. Arranged horizontally.`
* info-customer-coupon `Input: Input field for entering a discount coupon. Placeholder 'Add coupon'. Has a top border.`
* btn-apply `Button: Button to apply the discount coupon. Text 'Apply'. Has an icon on the right. Initially visible but disabled. Collapses when hidden.`
* box-info-payments-action `Group: Contains the payment details title and payment type selection. Initially hidden and collapses when hidden. Arranged vertically.`
* title-box-payments `Text: Label for the payment details section. Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* box-info-payments-selection-types `Group: Contains the card information input section. Has a border and rounded corners. Arranged vertically.`
* 5dec6532-5a6d-460b-b341-d872be3fd2a2 `Group: Contains the card information inputs and logos. Has borders and rounded corners. Arranged vertically.`
* box-info-payments-type-card-ID `Group: Contains the card type icon and label. Has horizontal spacing. Arranged horizontally.`
* logo-card `Icon: Displays a credit card icon. Color rgba(0,115,230,1).`
* Card (em até 12x) `Text: Label for card information (e.g., Card Information). Font size 14, weight 500, color rgba(var(--color_text_default_rgb), 0.6).`
* box-info-payments-type-card-action `Group: Contains the card number and valid date/CCV inputs. Initially visible and collapses when hidden. Arranged vertically.`
* box-info-payments-number-card `Group: Contains the card number input and card logos. Has a background color and rounded corners. Arranged relatively.`
* info-number-card `Input: Input field for the credit card number. Placeholder '0000 0000 0000 0000'. Has top, left, and right borders.`
* logo-mastercard `Icon: Displays the Mastercard logo. Color rgba(var(--color_text_default_rgb), 0.5). Positioned absolutely within its parent.`
* logo-visa `Icon: Displays the Visa logo. Color rgba(var(--color_text_default_rgb), 0.5). Positioned absolutely within its parent.`
* box-info-payments-valid-card `Group: Contains the valid date and CCV inputs. Arranged horizontally.`
* info-valid-date `Input: Input field for the card's valid date. Placeholder '00/0000'. Has top, left, right, and bottom borders. Has a background color.`
* 78e51ebf-912c-4e51-b109-3a4240b29542 `Group: Contains the CCV input and icon. Has a background color and rounded corners. Arranged relatively.`
* numer-CCV `Input: Input field for the card's CCV. Placeholder 'CVV'. Has top, right, and bottom borders.`
* logo-card-CCV `Icon: Displays a credit card icon for the CCV field. Color rgba(var(--color_text_default_rgb), 0.5). Positioned absolutely within its parent.`
* box-info-payments-customer `Group: Contains the buyer information inputs. Initially hidden and collapses when hidden. Arranged vertically.`
* title-info-customer `Text: Label for the buyer information section. Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* info-customer-name `Input: Input field for the buyer's full name. Placeholder 'Full name'. Has a border and rounded corners.`
* info-customer-id `Input: Input field for the buyer's tax ID. Placeholder 'ID Tax'. Has a border and rounded corners.`
* 4f86b4e6-5aab-4ef1-8b2e-da2df7351a9d `InternationalPhoneInput: Input field for the buyer's phone number. Placeholder '00000-0000'. Default country is Brazil. Has a border and rounded corners.`
* aa8e0818-7d22-49d3-bde8-87d6ab5b1583 `HTML: Contains CSS to style the phone input element with a box shadow and rounded corners.`
* info-customer-email `Input: Input field for the buyer's email address. Placeholder 'E-mail'. Has a border and rounded corners.`
* box-info-but-togheter `Group: Contains the buy-together add-on section. Has vertical spacing. Arranged vertically.`
* title-buy-together `Text: Label for the buy-together section. Font size 14, weight 600, color rgba(var(--color_text_default_rgb), 1).`
* box-info-but-togheter-selection `Group: Contains the buy-together CTA and description. Initially hidden and collapses when hidden. Has dashed borders and rounded corners. Arranged vertically.`
* box-info-but-togheter-cta `Group: Clickable area to select/deselect the buy-together add-on. Has a light background and rounded corners. Arranged horizontally. When clicked and 'check-buy-together' is no, sets 'check-buy-together' to yes. When clicked and 'check-buy-together' is yes, sets 'check-buy-together' to no.`
* check-buy-together `Icon: Displays a checkbox icon. Color rgba(126,126,126,1). Has a custom state 'selecionado_' (boolean). When clicked and 'selecionado_' is no, sets 'selecionado_' to yes. When clicked and 'selecionado_' is yes, sets 'selecionado_' to no. Collapses when hidden.`
* cta-description `Text: Description text for the buy-together add-on CTA. Font size 14, weight 400, color var(--color_text_default). Line height 1.3.`
* 90e35cc3-0e45-4bae-b869-be22550745f5 `Text: Displays a description of the buy-together product. Font size 14, weight 400, color var(--color_text_default). Line height 1.3.`
* btn-card `Button: Button to initiate the payment process. Text 'Pay R$ 197'. Has an icon on the right. Initially visible but disabled. Collapses when hidden.`
* box-info-business `Group: Contains the business logo and terms/privacy links. Arranged horizontally and centered.`
* your-logo `Image: Displays the business logo. Has a fixed aspect ratio. When clicked, navigates to the 'index' page.`
* 6b145b70-eb02-4552-b50f-c9cf253eaff3 `Text: Displays links for Terms of Use and Privacy. Font size 10, weight 500, color rgba(var(--color_text_default_rgb), 0.6). Line height 1.3.`
* float-countdown `FloatingGroup: A floating group that displays a countdown timer. Fixed width and minimum height. Has a background color. Arranged vertically and centered.`
* float-countdown-content `Group: Contains the countdown engine and display text. Arranged horizontally and centered. Collapses when hidden.`
* CountDown-Engine-A `CountDown: A plugin element that manages the countdown timer. Initialized on page load with the current date/time plus 15 minutes, displaying 'Minuto'.`
* CountDown-Price `Text: Displays the countdown timer value from the 'CountDown-Engine-A' element. Font size 21, weight 700, color var(--color_primary_contrast_default). Letter spacing -1.`
Page is loaded
### Summary
This workflow triggers when the page finishes loading. Its primary purpose is to initialize a countdown timer element on the page, setting its start and end times based on the current date/time.
### Documentation
This workflow is initiated automatically when the page containing it has fully loaded in the user's browser. It contains a single action designed to configure a countdown timer element. The workflow calculates an end time 15 minutes from the current time and sets the countdown element to display the time remaining until that point, using 'Minuto' as the unit label.
### Actions
#### Step 1: Set Countdown
This action targets the 'CountDown-Engine-A' element on the page. It sets the countdown's start time to the current date and time. It then calculates the end time by adding 15 minutes to the current date and time. Finally, it sets the unit label for the countdown to 'Minuto'.
When your-logo is clicked
### Summary
This workflow is triggered when the 'your-logo' element is clicked. Its primary purpose is to navigate the user back to the application's index page.
### Documentation
This workflow is initiated by an 'An element is clicked' event specifically targeting the element named 'your-logo'. This element is likely a visual representation of the application's brand or logo, commonly placed in a header or navigation bar. Upon clicking this element, the workflow executes a single action: navigating the user to the 'index' page of the application. This is a standard navigation pattern used to allow users to easily return to the main landing page or dashboard from anywhere within the application.
### Actions
#### Step 1: Go to page
This action navigates the user to a different page within the application. The destination page is specified as 'index'. This effectively takes the user back to the application's main page.
When check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element, but only if the state is currently 'no'. This suggests it's part of a mechanism to select or deselect an option, likely related to adding an item or service (implied by 'buy-together') to a checkout or order, preventing it from being deselected by clicking if it's already selected.
### Documentation
This workflow is initiated when a user clicks on the element named 'check-buy-together'. This element likely represents a checkbox or a similar interactive UI component within the VibeCheckouts™ application, potentially related to an upsell or addon option. The workflow is conditional: it will only proceed if the 'selecionado\_' custom state of the 'check-buy-together' element is currently set to 'no'. If this condition is met, the workflow executes a single action to change the state of the element.
### Actions
#### Step 1: Set state of an element
This step sets the 'selecionado\_' custom state of the 'check-buy-together' element to 'true'. This action effectively marks the associated option as selected within the application's state, but only if it was previously not selected, as enforced by the workflow's condition.
When check-buy-together is clicked
### Summary
This workflow is triggered when the 'check-buy-together' element is clicked. Its primary purpose is to update the state of the 'check-buy-together' element itself, specifically setting its 'selecionado\_' custom state to 'no' (false), but only if the element's 'selecionado\_' state is currently 'yes' (true). This suggests the workflow is part of a toggle mechanism for a 'buy together' option.
### Documentation
This workflow is initiated when the user clicks on the element named 'check-buy-together'. This element likely represents a checkbox or similar interactive element related to a 'buy together' feature within the VibeCheckouts™ application. The workflow is conditional: it will only proceed if the 'check-buy-together' element's custom state 'selecionado\_' is currently set to 'yes'. If this condition is met, the workflow executes a single action to change the state of the 'check-buy-together' element.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element 'check-buy-together' to 'no'. This action effectively unchecks or deactivates the 'buy together' option if it was previously selected, based on the workflow's condition.
box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to update the state of the 'check-buy-together' element, likely to reflect a selection or deselection action related to a 'buy together' option, but only if the 'check-buy-together' element's 'selecionado\_' custom state is currently 'yes'.
### Documentation
This workflow executes when the user clicks on the element named 'box-info-but-togheter-cta'. This action is conditional: the workflow will only proceed if the custom state 'selecionado\_' of the element 'check-buy-together' is currently set to 'yes'. If this condition is met, the workflow proceeds to update the 'selecionado\_' custom state of the 'check-buy-together' element.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element named 'check-buy-together' to 'no'. This action effectively deselects the 'buy together' option if it was previously selected, based on the workflow's condition.
box-info-but-togheter-cta is clicked
### Summary
This workflow is triggered when the 'box-info-but-togheter-cta' element is clicked. Its primary purpose is to toggle the 'selecionado\_' custom state of the 'check-buy-together' element, specifically setting it to 'true' only if the state is currently 'no'. This suggests it's part of a mechanism to select or activate a 'buy together' option within the VibeCheckouts™ interface.
### Documentation
This workflow is initiated when a user clicks on the 'box-info-but-togheter-cta' element. This element likely serves as a clickable container or call-to-action related to a 'buy together' feature, as suggested by its name and the actions it triggers. The workflow includes a condition that must be met for the actions to execute. The condition checks the current value of the 'selecionado\_' custom state of the 'check-buy-together' element. The workflow will only proceed if the 'selecionado\_' state of 'check-buy-together' is currently 'no'. If this condition is met, the workflow proceeds to its single action.
### Actions
#### Step 1: Set state of an element
This step sets the custom state 'selecionado\_' of the element 'check-buy-together' to the value 'true'. This action is conditional and only runs if the 'selecionado\_' state of 'check-buy-together' was previously 'no', effectively toggling the state to 'true' upon clicking the 'box-info-but-togheter-cta' element, but preventing it from being set to 'true' if it's already 'yes' or another value.
***
## AI Support Agent
{% hint style="info" %}
To help you with any questions you may have about the template and everything you can do to integrate it into your projects, use our dedicated AI Agent for implementing Vibe Checkouts™.
[Access The Agent](https://chatgpt.com/g/g-682f59bb2e04819198381fa58e93c7b1-vibe-checkoutstm-ai-support-propps)
{% endhint %}
The template is sold as is. If you have any questions, please contact us by email: .
**Want to suggest front-end or back-end templates?** Just suggest them on our [website](https://propps.userlift.com/roadmap).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://propps.gitbook.io/docs/our-templates/vibe-checkouts-tm.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.