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.
Name | Value | Description |
---|---|---|
Define parent element to function as an accordion | ||
Define the label for the accordion | ||
Hide element after an successful checkout action |
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.
Name | Value | Description |
---|---|---|
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 |
Value | Description | Required |
---|---|---|
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 |
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.