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

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.

PreviousCartNextBag

Last updated

Was this helpful?