> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Payment Button

# 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:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-12-at-23_1opyv8j.gif)

---

# 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**:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_gatcif.png)

---

## 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](https://help.dorik.com/en/article/integration-of-payment-button-12kgzpz/#2-stripe-integration)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/authentic-bali-coffee-kopi-luw_19d7rgq.png)

1. Add the Payment Button
* After adding the Payment Button, click Edit Element to open the settings.

2. Select Your Provider
* Choose Stripe from the Service Provider dropdown.

3. Choose Your Payment Type
You can select between:

* Payment Link
* Buy Button

4. Payment Link Setup
If you select Payment Link:

* Set the Button Name
* Paste the Payment Link from your Stripe Dashboard

5. Buy Button Setup
If you select Buy Button:

* Log in to your Stripe Dashboard
* Copy the Button ID
* Copy the Publishable API Key

These will be required in the respective fields.


---

## 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:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at125509_1nc0o6w.gif)

---

## 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:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gifrecording2022-09-04at10146p_ljkbai.gif)


---

---

# Related articles

[Button](/en/article/button-qfmqoa/)