# Checkout

{% hint style="warning" %}
Please note that this section/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 %}

To begin customizing your checkout page, head over to the 'Components' section within the Penni Cart App and make your way to the 'Checkout Components' segment. This section is dedicated to enriching the final phase of your customers' shopping journey:&#x20;

* **Billing/Shipping:** Where customers can input their billing and shipping information.
* **Order Summary:** Provides a concise overview of the order, including selected items and total cost.
* **Shipping Method:** Allows customers to choose their preferred shipping method.
* **Product List:** Displays a summary of products ready for purchase.
* **Payment:** Integrates with your chosen payment processor, enabling secure transactions.
* **Promo Code:** A field for customers to apply discount codes for savings.

These components are provided in their basic form, ready for you to infuse with your brand’s style. Ensure you are editing the Checkout Page that Penni Cart automatically generates during app installation.

{% embed url="<https://drive.google.com/file/d/1qPm6Lcmk5y5rjfg2y4jNRD4TEpc0npOo/view?usp=drive_link>" %}
How To Add Components
{% endembed %}

### <mark style="color:purple;">**Keys to a Successful Checkout Page Design:**</mark>

* **Responsiveness:** Ensure your cart adapts smoothly across devices for a seamless shopping experience.
* **Preserve Required Attributes:** Our attribute grid below highlights the essential attributes for each component. Be mindful not to remove these to maintain functionality.
* **Brand Alignment:** Tailoring the cart's design to reflect your brand's identity not only elevates the user experience but can also significantly boost engagement and sales.

By customizing these components, you can offer a seamless and efficient checkout process, encapsulating your brand's essence and ensuring a positive end to your customers' shopping experience.


---

# 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/components/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.