# Checkout Form (Pro)

<div align="left"><figure><img src="https://2515576520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG0PUsYuzKts2zzoPrZBP%2Fuploads%2FhZBpbILHrCXrPxuEwwJe%2Fcheckout-form-overview.png?alt=media&#x26;token=4f2f53a3-5d83-4221-b1aa-2f842eebc491" alt=""><figcaption><p>woocommerce stripe checkout form</p></figcaption></figure></div>

{% hint style="warning" %}
A professional plan is required
{% endhint %}

## Simplest configuration

Compared with other woocommerce payment plugin, every payment method needs one configuration setting, if your site is global, which means you may set up a dozen of method settings.

&#x20;With our plugin, we make all kinds of configurations into one.&#x20;

## Enable in WooCommerce

Goto Woocommerce -> Settings -> Payments, find <mark style="color:red;">**Stripe Checkout Form,**</mark> and enable it.

<figure><img src="https://2515576520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG0PUsYuzKts2zzoPrZBP%2Fuploads%2FdTcBgZ3GvcNpbj3Wxm2p%2Fimage.png?alt=media&#x26;token=9d2e7bbd-92e5-4c5b-9de8-1d70a85e2681" alt=""><figcaption></figcaption></figure>

Or, you can click the redirect button from our plugin -> payment methods, find the checkout form card, and then click the **setup** button.

## Configuration

In the settings page, we support the below fields to customize the payment method in woocommerce checkout page.

* **Title:** The current payment method title in checkout page.
* **Icon:** The current payment method icon, we will use a default one if nothing else is provided.
* **Description:** This description will be shown in the payment method content.
* **Payment methods:** By default, the stripe checkout page will list all available payment methods in which your stripe account is activated. If you want only to allow some of them, you can choose them here.
* **Payment Methods Order:**  Customize the default payment method order. Unspecified methods display after defined ones (e.g. Card & Google Pay means Card first, then Google Pay and others).

### Layout

Customize the Payment Element’s layout to fit your checkout flow: Three layouts supported so far: **Tabs**, **Accordion with radio buttons**, **Accordion without radio buttons**

<figure><img src="https://2515576520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG0PUsYuzKts2zzoPrZBP%2Fuploads%2FU33pezPtBkh15r1bJK3c%2Fimage.png?alt=media&#x26;token=eef1e5d4-b7b0-4123-998f-7b71572d23af" alt=""><figcaption></figcaption></figure>

### Themes

Three themes supported so far: Stripe, Night, Flat

<figure><img src="https://2515576520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG0PUsYuzKts2zzoPrZBP%2Fuploads%2FvuaNvqckiT1Chcnt1HF2%2Fimage.png?alt=media&#x26;token=776cceb0-59d7-47b3-afcc-6bd6f688bd0d" alt=""><figcaption></figcaption></figure>

## Google & Apple Pay

There are two options to enable digital wallet support for Google Pay, Apple Pay, and Microsoft Pay in our plugin:

* [x] Append Google & Apple Pay (Payment Method Integration)
* [x] Express Checkout Button

### Append Google & Apply pay

This option adds the digital wallets to the existing payment method list on the checkout form. The wallets will display in the order defined in the Payment Methods settings. Customers still need to enter billing and shipping information using this method.

<div align="left"><figure><img src="https://2515576520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG0PUsYuzKts2zzoPrZBP%2Fuploads%2FGsMlh9eTnKzPNpXxOR54%2FGroup%2018.png?alt=media&#x26;token=caa05def-3e45-4b46-a565-6f6863c4686a" alt=""><figcaption></figcaption></figure></div>

### Express Checkout Button (Recommend)

The express checkout button provides a streamlined one-click checkout experience. This button appears prominently at the top of the checkout page. Customers can check out using a digital wallet without typing any additional information.

We recommend enabling the Express Checkout integration for the simplest, most seamless customer experience. The two options can also work together - Express Checkout to allow easy one-click payments, plus the payment method integration as a backup if customers prefer to enter billing/shipping details. Please reach out if you need any assistance setting up and configuring digital wallet support.

<figure><img src="https://2515576520-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG0PUsYuzKts2zzoPrZBP%2Fuploads%2FH6QNaVPz382eybtx6MrA%2Fimage.png?alt=media&#x26;token=c5a31e33-5551-4bb3-959c-0d3c8a605728" alt=""><figcaption></figcaption></figure>


---

# 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://woo-docs.payaddons.com/payment-methods/checkout-form-pro.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.
