Checkout

Understanding the attributes needed to capture shipping/billing information and process payment.

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
data-pc-attr	accordion-item	Define parent element to function as an accordion
data-pc	accordion-title	Define the label for the accordion
data-pc-hide	true	Hide element after an successful checkout action

Showcasing the group of attributes to achieve an accordion and hide functionality

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
data-pc	shipping-billing	Parent element to capture and validate shipping and/or billing information
data-pc	payment	Parent element to capture and insert the chosen payment processor fields
data-pc	order-status	Parent element to display the status of the transaction once submitted

Webflow structure of the separate blocks (shipping/billing, payment, & status)

Value	Description	Required
shipping-methods-container	Parent element for shipping options
shipping-method	Define element for a shipping option (radio wrapper*)
shipping-radio	Element to select a shipping option (radio button*)
shipping-label	Element to display shipping option name (radio label*)
add-to-cart	Define button that triggers submit action
billing_name	Billing first name
billing_lastname	Billing last name
billing_address	Billing address line 1
billing_address2	Billing address line 2
billing_zip_code	Billing zip code
billing_city	Billing city
billing_country	Billing city (select*)
billing_state	Billing state/province (select*)
same-shipping-billing	Define shipping is same as billing (checkbox button*)
name	Shipping first name
lastname	Shipping last name
address	Shipping address line 1
address2	Shipping address line 2
zip_code	Shipping zip code
city	Shipping city
country	Shipping city (select*)
state	Shipping state/province (select*)
email	Capture customer email
phone	Capture customer phone
check_terms	Define element for consent
accordion-button	Define button to proceed to next steps in checkout
checkout-payment-form-step	Define payment form to inset chosen payment gateway
card-name	Payment name on card
card-number	Payment card number
card-expiration	Payment card expiration
card-cvv	Payment card cvv
payment-button	Define button to submit card details to payment gateway
order-status-title	Element to display transaction status after submitting
order-status-message	Element to display status message
order-status-back-button	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.