Vibe Checkouts™

Bubble template designed to create modern, high-converting checkout pages. It offers three distinct checkout styles, allowing you to choose the format that best suits your business model.

Template Access

Template Link on Bubble Marketplace

Template Preview Link

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

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.

Images

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

_{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

International Phone Input

A fully featured customizable phone input

Features:

Phone formatting
Phone validation
Country auto-detection
Customizable appearance

Open Plugin Page

Times / Stopwatch / Countdown

Create timers, chronometers, stopwatches and countdowns on your Bubble App.

Open Plugin Page

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:

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

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

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

The template is sold as is. If you have any questions, please contact us by email: contato@propps.com.br.

Want to suggest front-end or back-end templates? Just suggest them on our website.

PreviousOur Templates

Last updated 9 months ago

hashtagTemplate Access

hashtagIdeal for

hashtagWhat it solves

hashtagRequirements

hashtagImages

hashtagRequired Plugins

hashtagTemplate Pages Structures

hashtag404

hashtagUI

hashtagIndex

hashtagUI

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Go to page

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Go to page

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Go to page

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Go to page

hashtagVibe Stripe Clean BRL (Brazil)

hashtagUI

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state of an element

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state of an element

hashtagVibe Stripe Clean GLOBAL

hashtagUI

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state of vibe-stripe-clean-global

hashtagVibe Stripe ADDONS

hashtagUI

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state of check-buy-together

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set Countdown-Engine-A

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Go to page

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state of an element

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state of an element

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state of an element

hashtagVibe Hotmart Clean BRL (Brazil)

hashtagUI

hashtagSummary

hashtagDocumentation

hashtagActions

hashtagStep 1: Set state

hashtagSummary

Template Access

Ideal for

What it solves

Requirements

Images

Required Plugins

Template Pages Structures

404

UI

Index

UI

Summary

Documentation

Actions

Step 1: Go to page

Summary

Documentation

Actions

Step 1: Go to page

Summary

Documentation

Actions

Step 1: Go to page

Summary

Documentation

Actions

Step 1: Go to page

Vibe Stripe Clean BRL (Brazil)

UI

Summary

Documentation

Actions

Step 1: Set state of an element

Summary

Documentation

Actions

Step 1: Set state

Summary

Documentation

Actions

Step 1: Set state of an element

Vibe Stripe Clean GLOBAL

UI

Summary

Documentation

Actions

Step 1: Set state of vibe-stripe-clean-global

Vibe Stripe ADDONS

UI

Summary

Documentation

Actions

Step 1: Set state of check-buy-together

Summary

Documentation

Actions

Step 1: Set Countdown-Engine-A

Summary

Documentation

Actions

Step 1: Go to page

Summary

Documentation

Actions

Step 1: Set state of an element

Summary

Documentation

Actions

Step 1: Set state of an element

Summary

Documentation

Actions

Step 1: Set state of an element

Vibe Hotmart Clean BRL (Brazil)

UI

Summary

Documentation

Actions

Step 1: Set state

Summary