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.

NameValueDescription
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

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.

NameValueDescription
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

ValueDescriptionRequired
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.

Last updated