# Checkout

{% hint style="warning" %}
Please note that this document is still <mark style="color:purple;">**Work in Progress**</mark><mark style="color:purple;">.</mark> It might be updated, revised, or changed entirely in the near future.&#x20;
{% endhint %}

{% hint style="info" %}
Before starting, please set the parent element that wraps everything with <mark style="color:purple;">`pc="checkout`</mark> if you are starting from scratch.
{% endhint %}

<figure><img src="/files/0qVqX83PFpXPF2mGlpQQ" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/Obi5zeyMhIo6ZaCdhyxE" alt=""><figcaption><p>Showcasing the group of attributes to achieve an accordion and hide functionality</p></figcaption></figure>

<figure><img src="/files/BZMTxTqWGrZgKgSlnVqk" alt=""><figcaption><p>Element with accordion-heading attribute</p></figcaption></figure>

<table data-full-width="true"><thead><tr><th>Name</th><th>Value</th><th>Description</th><th width="100" data-type="checkbox"></th></tr></thead><tbody><tr><td><pre><code>pc-acc
</code></pre></td><td><pre><code>item
</code></pre></td><td>Define parent element to function as an accordion</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>accordion-heading
</code></pre></td><td>Define the label for the accordion</td><td>true</td></tr><tr><td><pre><code>pc-hide
</code></pre></td><td></td><td>Hide element after an successful checkout action</td><td>false</td></tr></tbody></table>

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.

<figure><img src="/files/Fku8bip8kKShg2cxQLEM" alt=""><figcaption><p>Webflow structure of the separate blocks (shipping/billing, payment, &#x26; status)</p></figcaption></figure>

<table data-full-width="true"><thead><tr><th>Name</th><th>Value</th><th>Description</th><th width="100" data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>pc-step
</code></pre></td><td><pre><code>shipping-billing
</code></pre></td><td>Parent element to capture and validate shipping and/or billing information</td><td>true</td></tr><tr><td><pre><code>pc-step
</code></pre></td><td><pre><code>payment
</code></pre></td><td>Parent element to capture and insert the chosen payment processor fields</td><td>true</td></tr><tr><td><pre><code>pc-step
</code></pre></td><td><pre><code>status
</code></pre></td><td>Parent element to display the status of the transaction once submitted</td><td>true</td></tr></tbody></table>

<table data-full-width="true"><thead><tr><th>Name</th><th>Value</th><th>Description</th><th width="100" data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>pc
</code></pre></td><td><pre><code>shipping-methods-container
</code></pre></td><td>Parent element for shipping options</td><td>true</td></tr><tr><td></td><td><pre><code>shipping-method
</code></pre></td><td>Define element for a shipping option <mark style="color:purple;">(radio wrapper*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>shipping-radio
</code></pre></td><td>Element to select a shipping option <mark style="color:purple;">(radio button*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>shipping-label
</code></pre></td><td>Element to display shipping option name <mark style="color:purple;">(radio label*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>add-to-cart
</code></pre></td><td>Define button that triggers submit action</td><td>true</td></tr><tr><td></td><td><pre><code>billing_name
</code></pre></td><td>Billing first name</td><td>true</td></tr><tr><td></td><td><pre><code>billing_lastname
</code></pre></td><td>Billing last name</td><td>true</td></tr><tr><td></td><td><pre><code>billing_address
</code></pre></td><td>Billing address line 1</td><td>true</td></tr><tr><td></td><td><pre><code>billing_address2
</code></pre></td><td>Billing address line 2</td><td>true</td></tr><tr><td></td><td><pre><code>billing_zip_code
</code></pre></td><td>Billing zip code</td><td>true</td></tr><tr><td></td><td><pre><code>billing_city
</code></pre></td><td>Billing city</td><td>true</td></tr><tr><td></td><td><pre><code>billing_country
</code></pre></td><td>Billing city <mark style="color:purple;">(select*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>billing_state
</code></pre></td><td>Billing state/province <mark style="color:purple;">(select*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>same-shipping-billing
</code></pre></td><td>Define shipping is same as billing <mark style="color:purple;">(checkbox button*)</mark></td><td>true</td></tr><tr><td></td><td><pre><code>name
</code></pre></td><td>Shipping first name</td><td>false</td></tr><tr><td></td><td><pre><code>lastname
</code></pre></td><td>Shipping last name</td><td>false</td></tr><tr><td></td><td><pre><code>address
</code></pre></td><td>Shipping address line 1</td><td>false</td></tr><tr><td></td><td><pre><code>address2
</code></pre></td><td>Shipping address line 2</td><td>false</td></tr><tr><td></td><td><pre><code>zip_code
</code></pre></td><td>Shipping zip code</td><td>false</td></tr><tr><td></td><td><pre><code>city
</code></pre></td><td>Shipping city</td><td>false</td></tr><tr><td></td><td><pre><code>country
</code></pre></td><td>Shipping city <mark style="color:purple;">(select*)</mark></td><td>false</td></tr><tr><td></td><td><pre><code>state
</code></pre></td><td>Shipping state/province <mark style="color:purple;">(select*)</mark></td><td>false</td></tr><tr><td></td><td><pre><code>email
</code></pre></td><td>Capture customer email</td><td>false</td></tr><tr><td></td><td><pre><code>phone
</code></pre></td><td>Capture customer phone</td><td>false</td></tr><tr><td></td><td><pre><code>check_terms
</code></pre></td><td>Define element for consent</td><td>true</td></tr><tr><td></td><td><pre><code>accordion-button
</code></pre></td><td>Define button to proceed to next steps in checkout</td><td>true</td></tr><tr><td></td><td><pre><code>checkout-payment-form-step
</code></pre></td><td>Define payment form to inset chosen payment gateway</td><td>true</td></tr><tr><td></td><td><pre><code>card-name
</code></pre></td><td>Payment name on card</td><td>true</td></tr><tr><td></td><td><pre><code>card-number
</code></pre></td><td>Payment card number</td><td>true</td></tr><tr><td></td><td><pre><code>card-expiration
</code></pre></td><td>Payment card expiration</td><td>true</td></tr><tr><td></td><td><pre><code>card-cvv
</code></pre></td><td>Payment card cvv</td><td>true</td></tr><tr><td></td><td><pre><code>payment-button
</code></pre></td><td>Define button to submit card details to payment gateway</td><td>true</td></tr><tr><td></td><td><pre><code>order-status-title
</code></pre></td><td>Element to display transaction status after submitting</td><td>true</td></tr><tr><td></td><td><pre><code>order-status-message
</code></pre></td><td>Element to display status message</td><td>true</td></tr><tr><td></td><td><pre><code>order-status-back-button
</code></pre></td><td>Define a button to go back to the  homepage</td><td>true</td></tr></tbody></table>

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](/attributes/cart.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pennicart.io/attributes/checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.