Checkout
Understanding the attributes needed to capture shipping/billing information and process payment.
Last updated
Understanding the attributes needed to capture shipping/billing information and process payment.
Last updated
Please note that this document is still Work in Progress. It might be updated, revised, or changed entirely in the near future.
All attribute names will start with data-pc for the "Name" inside the Webflow Designer
Since the Checkout page involves more nuisance cases to be mindful of, we've added additional attributes to account for unique scenarios like (multi-step form, hide specific elements after an successful payment, etc). Below will highlight and guide you through the start to finish on converting your page into a fully-functional checkout portal.
The checkout page is built upon three mandatory attributes that powers the final step of the eCommerce experience, these are (shipping/billing, payment, & status). They are the overarching elements that wraps all your inputs to validate and equipped for a transaction.
You'll notice from screenshots above that an summary section exists, these attributes are the consistent across each page and can be reused here as well. If you would like to view each, please go to the previous step or here.
| Name | Value | Description |
|---|---|---|
| Name | Value | Description |
|---|---|---|
| Value | Description | Required |
|---|---|---|
Define parent element to function as an accordion
Define the label for the accordion
Hide element after an successful checkout action
Parent element to capture and validate shipping and/or billing information
Parent element to capture and insert the chosen payment processor fields
Parent element to display the status of the transaction once submitted
Parent element for shipping options
Define element for a shipping option (radio wrapper*)
Element to select a shipping option (radio button*)
Element to display shipping option name (radio label*)
Define button that triggers submit action
Billing first name
Billing last name
Billing address line 1
Billing address line 2
Billing zip code
Billing city
Billing city (select*)
Billing state/province (select*)
Define shipping is same as billing (checkbox button*)
Shipping first name
Shipping last name
Shipping address line 1
Shipping address line 2
Shipping zip code
Shipping city
Shipping city (select*)
Shipping state/province (select*)
Capture customer email
Capture customer phone
Define element for consent
Define button to proceed to next steps in checkout
Define payment form to inset chosen payment gateway
Payment name on card
Payment card number
Payment card expiration
Payment card cvv
Define button to submit card details to payment gateway
Element to display transaction status after submitting
Element to display status message
Define a button to go back to the homepage
