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.

Before starting, please set the parent element that wraps everything with pc="checkout if you are starting from scratch.

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 full process to convert your page into a fully-functional checkout page.

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

Element with accordion-heading attribute

Name	Value	Description
pc-acc	item	Define parent element to function as an accordion
pc	accordion-heading	Define the label for the accordion
pc-hide		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, & order status). These are the overarching elements that wraps all your inputs to validate and equipped for a transaction.

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

Name	Value	Description	Required
pc-step	shipping-billing	Parent element to capture and validate shipping and/or billing information
pc-step	payment	Parent element to capture and insert the chosen payment processor fields
pc-step	status	Parent element to display the status of the transaction once submitted

Required

Name	Value	Description	Required
pc	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.