Getting Started

Here you will know the features of the Payment Button element.

Adding a Payment Button

Follow the steps below to add a Payment Button to your site.

- Click on the + button labeled Add Element or Container within an empty container
- From the Elements tab, select the Payment Button element

Refer to the GIF below:

Editing and Configuring the Payment Button

Follow the steps and instructions below to add and edit a Payment Button on your site.

The Payment Button element editor has the following options:

- Payment Button
- Button Style
- Background

The Payment Button element editor**:**

Payment Button

This option lets you make your button functional by connecting to other payment gateway platforms. Below is an example of using this option if you integrate [Stripe](http://stripe.com).

Service Provider: Stripe

Refer to the picture and list below to see the functionality of each option if you integrate Stripe ⬇️




Service Provider: Select the service provider from here. You will be able to choose the following platforms:
- Stripe
- Paypal
- Gumroad
- Paddle

Button Text: Change the button text.

Payment Type: Choose the payment type; there are mainly two types:
One-time payment
Recurring payment (subscription)


Button Type: Choose the type of button you want; you can choose the following options:
- Auto
- Pay
- Book
- Donate


Price ID: A unique identifier of the price.

More settings ⬇️




Publishable API Key: Paste the publishable API key from your platform in this input field.
Billing Address Collection: Choose whether the billing address should be mandatory.
Success URL: Add a URL to a page showing that the payment is successful.

Button Style

In this option, you will find the settings to stylize your payment button, with options like adjusting the button text size, adding icons to your button, changing the color, etc.

Refer to the GIF below to see the settings being demonstrated:

Background

You can change the background style of your payment button from here, choosing a plain color or a gradient.



Refer to the GIF below to see the settings being demonstrated:

Related articles

Button

Updated on: 13/05/2024