# Checkout Button

Checkout Button is a payment element that allows customers to quickly and easily check out and complete their purchase. With Pay Addons, you can add a Checkout Button to any page on your WordPress website using the Elementor page builder.

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FNNWnEX3jQA1GgIAgqZm0%2Fimage.png?alt=media&#x26;token=001917e8-9781-4120-92ed-8690eb5ddef4" alt=""><figcaption></figcaption></figure></div>

* [x] Coupon, Stripe-Tax.
* [x] One-Time & Recurring Pay.
* [x] Using a secure Stripe-Hosting checkout page that can be customized with your Brand.
* [x] More payment methods, like EPS, Giropay, Sofort, iDeal, Alipay, Apple/Google Pay, WeChat.
* [x] More custom fields, such as user email, price, frequency, quantity, currency, product, etc.

{% hint style="info" %}
If you’re[^1] interested in setting up a Checkout Form, see [Checkout Form](https://docs.payaddons.com/elements/checkout-credit-card-form-pro).
{% endhint %}

### Enable Payment Button

To use the Checkout Button widget in Pay Addons, you need to first enable it under the Elements tab.&#x20;

<figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FHKUY7P3KERgT38cV2Lpq%2Fimage.png?alt=media&#x26;token=fa4205fb-6af6-4895-b459-32993e185a39" alt=""><figcaption></figcaption></figure>

Enabling the Checkout Button widget allows you to add a button to your website that customers can click to initiate the checkout process. This can help to simplify the checkout process and encourage more customers to complete their purchases. The widget is fully customizable, so you can adjust its appearance and behavior to fit your needs.

### Build Your Button

1. To get started, create a new page or post, and edit it using Elementor.
2. Next, drag and drop the <mark style="color:red;">**Checkout button**</mark> onto your page (you can search for it using the keyword "checkout" or find it under the "PAY-ADDONS" category)
3. Click on the button and customize the UI with Elementor as you wish.

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FYm65MOZbertACTK9ibwJ%2Fimage.png?alt=media&#x26;token=b4c90f17-9849-4fb6-b3ae-74f00ce88a1b" alt=""><figcaption></figcaption></figure></div>

![](https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FqYqpq2SGjdO1kC25haYt%2Fimage.png?alt=media\&token=eb0bf337-b969-4a74-ae9a-258969ca30f9)

### General Settings

Users can customize **Payment methods**, **Mode, Shipping Address,** and other options in the general settings tab.

{% hint style="info" %}
Make sure the Success and Cancel redirect url are specified, these fields are required
{% endhint %}

{% hint style="info" %}
The subscription mode is only available under Premium plan.
{% endhint %}

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FKSB52rZnL1ZWuZpJI8Ba%2Fimage.png?alt=media&#x26;token=c88e82be-5476-499d-9b7a-634898a9ed9d" alt=""><figcaption></figcaption></figure></div>

### One-time price settings

Choose mode as one-time

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FOEZJ9SYUAUz0dqRc2cp2%2Fimage.png?alt=media&#x26;token=46b1db1e-c2e4-41bf-a4b6-09bfad63a5ea" alt=""><figcaption></figcaption></figure></div>

Price settings allow users to customize **Currency**, **Quantity** options, and more.

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2Fi6Vf5qB0xKLe4x99Z7xN%2Fimage.png?alt=media&#x26;token=c2e5bf3a-28bc-4521-bdf2-7ee6daf9bac9" alt=""><figcaption></figcaption></figure></div>

### Subscription price settings (Pro)

Subscription products can also be added through a simple button. Select "Subscription" in the mode option to display recurring payment settings.

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FbL4tSDE1JjbyWetAMjyx%2Fimage.png?alt=media&#x26;token=cc479fa3-d4b0-4073-b90d-2fc8a7ea425c" alt=""><figcaption></figcaption></figure></div>

The recurring fields include "**Number of intervals**" and "**Recurring frequency**." For example, to create a 3-month subscription at $99, set the amount to 99, the number of intervals to 3, and select "month" as the frequency.

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FDKnshpBBJW9uW2hZiDwg%2Fimage.png?alt=media&#x26;token=43d5643f-3781-4fb8-bdca-3d0277d03d4b" alt=""><figcaption></figcaption></figure></div>

#### Using Stripe Price

If you have more advanced configurations such as multiple currencies, tax codes, Statement descriptor, and different [pricing model ](https://docs.stripe.com/products-prices/pricing-models#flat-rate)such as Flat rate: Good-better-best, you can leverage the Stripe Built-in price & product. <https://docs.stripe.com/products-prices/manage-prices>

<figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FOj9jxP50XKQFoQs0ebrQ%2Fimage.png?alt=media&#x26;token=ecadfbd0-93ca-4bc4-bf55-99f42b4e406b" alt=""><figcaption></figcaption></figure>

<div align="left"><figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FZsZTpE1r0MKhmQElp2mF%2Fimage.png?alt=media&#x26;token=9875f534-2072-4c23-b612-acfca04566f5" alt=""><figcaption></figcaption></figure></div>

#### Testing

After the configuration, click on the button, and you will be redirected to the stripe-hosting checkout page to finish the transaction.&#x20;

{% hint style="info" %}
Success: 4242424242424242 Any 3 digits Any future date

Decline:  4000000000000002 Any 3 digits Any future date

For more testing cards sample, please refer <https://stripe.com/docs/testing#use-test-cards>
{% endhint %}

<figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2F7y4qnYBtQfWrPzlMWTQe%2Fimage.png?alt=media&#x26;token=dd99f955-1da2-4902-aa18-adeca5f10d51" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FGB7K5qr5isj8fh8VS3Ms%2Fimage.png?alt=media&#x26;token=256b3ddd-31ef-46df-b268-6bb0548bbc02" alt=""><figcaption></figcaption></figure>

### Success page

After filling in the payment information and clicking the Subscribe button, we will be redirected to the Success page which is configured in the previous section. In the thank-you page, we can reuse our [Confirmation Summary](https://docs.payaddons.com/elements/confirmation-summary) widget or customize the [receipt shortcode](https://docs.payaddons.com/customize-confirmation-page-pro) to collect the payment receipt information

<figure><img src="https://1993841678-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6FFXqELmFsGrfOxBauwC%2Fuploads%2FYihrj8tikvbnG9FT0tIP%2Fimage.png?alt=media&#x26;token=c5c24eac-d769-451d-a654-8221908a6c69" alt=""><figcaption></figcaption></figure>

[^1]:
