Penni Cart Docs
  • Introduction
    • Quick Connect
  • Attributes
    • Navigation
    • Product Page
    • Cart
    • Checkout
    • Bag
  • Components
    • Product Page
    • Bag
    • Cart
    • Checkout
  • Templates
    • Product Page
    • Bag Templates
    • Cart Templates
    • Checkout Templates
  • Managing Your Store
    • Dashboard
      • Payments
      • Coupons
      • Tax
      • Shipping
      • Account
      • Invoice
    • Payment Gateways
      • Stripe
      • Elavon
      • Authorize.net
  • Zapier Integration
Powered by GitBook
On this page

Was this helpful?

  1. Attributes

Checkout

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

PreviousCartNextBag

Last updated 5 months ago

Was this helpful?

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.

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, & order status). These are the overarching elements that wraps all your inputs to validate and equipped for a transaction.

Name
Value
Description
Required

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

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

pc-acc
item
pc
accordion-heading
pc-hide
pc-step
shipping-billing
pc-step
payment
pc-step
status
pc
shipping-methods-container
shipping-method
shipping-radio
shipping-label
add-to-cart
billing_name
billing_lastname
billing_address
billing_address2
billing_zip_code
billing_city
billing_country
billing_state
same-shipping-billing
name
lastname
address
address2
zip_code
city
country
state
email
phone
check_terms
accordion-button
checkout-payment-form-step
card-name
card-number
card-expiration
card-cvv
payment-button
order-status-title
order-status-message
order-status-back-button
here
Showcasing the group of attributes to achieve an accordion and hide functionality
Element with accordion-heading attribute
Webflow structure of the separate blocks (shipping/billing, payment, & status)