> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-881012b3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment Button Elementor Plugin for WordPress

> Embed a Razorpay Payment Button on your WordPress website using the Payment Button Elementor plugin.

<div style={{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"0.35rem 0.9rem",border:"1px solid rgba(128,128,128,0.28)",borderRadius:"0.5rem",padding:"0.45rem 0.75rem",margin:"0 0 1.25rem",fontSize:"0.875rem"}}>
  <span style={{fontWeight:600}}>Available in</span>
  <span>🇮🇳 India</span>
</div>

You can accept payments on your Elementor-built WordPress website using the [Payment Button Elementor Plugin](https://wordpress.org/plugins/razorpay-payment-button-elementor/).

<img src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-elementor-plugin.jpg" alt="Razorpay Payment Button Elementor Plugin" width="1200" class="click-zoom" />

## Prerequisites

1. Install the [Elementor Website Builder plugin](https://wordpress.org/plugins/elementor/) on your WordPress site.
2. [Create a Razorpay account](https://dashboard.razorpay.com/signup).
3. Navigate to **Settings** → **API Keys** and generate the API keys in the test mode.

<iframe width="500" height="315" src="https://www.youtube.com/embed/6mJnOWZDhDo" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

<Info>
  **Handy Tips**

  * When testing, generate the keys in the Test mode.
  * To accept live payments, generate the keys in the Live mode and replace them in the Payment Button plugin settings.
</Info>

## Integrate Payment Button Elementor Plugin for WordPress

Watch this video to see how to create a Payment Button using Elementor Wordpress Plugin.

<iframe width="500" height="315" src="https://www.youtube.com/embed/BmdJf1C3N7M" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

To integrate the plugin:

1. [Create a Payment Button on the Dashboard](#1-create-a-payment-button-on-razorpay).
2. [Install and configure the Razorpay Payment Button Elementor plugin](#2-install-and-configure-the-plugin).
3. [Embed the button on the WordPress site](#3-embed-the-payment-button-on-wordpress).
4. [View details on WordPress Dashboard](/docs/payments/payment-button/supported-platforms/wordpress/visual-composer#4-view-details-on-dashboard).

### 1. Create a Payment Button on Dashboard

To accept payments on your WordPress site, create a Payment Button.

* [Quick Pay Button](/docs/payments/payment-button/quick-pay)
* [Buy Now Button](/docs/payments/payment-button/buy-now)
* [Donations Button](/docs/payments/payment-button/donations)
* [Custom Button](/docs/payments/payment-button/custom)

### Step 2: Install and Configure the Plugin

To install and configure the Payment Button:

2.1 Download and install our Payment Button Elementor Plugin. You can do this using either of these methods:

* [Download](https://wordpress.org/plugins/razorpay-payment-button-elementor/) the plugin from the WordPress Plugin Directory and add the zip file to your WordPress website's **Plugins** folder.
* Add the plugin directly onto your WordPress website from the **Plugin** page.

2.2 In your WordPress site, activate the plugin in the **WordPress Plugin Manager**.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-activate-plugin.jpg" alt="Activate Plugin" width="800" />

2.3 Navigate to **Razorpay Buttons Elementor** → **Settings** to add your API key details and connect your Razorpay account to the plugin.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-configure-settings.jpg" alt="Add Razorpay API Key" width="800" />

### Step 3: Embed the Payment Button on WordPress Site

To add Payment Button on WordPress site:

3.1 Click **Pages** and navigate to the page where you want to embed the Payment button.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-shop-page.jpg" alt="Select Page" width="800" />

3.2 Click **Edit with Elementor** to open the Elementor website builder mode.

3.3 Drag and drop **Razorpay Button** from the list of widgets onto the page.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-razorpay-button-widget.jpg" alt="Embed Button" width="800" />

3.4 From the list, select the Payment Button that should be displayed on the page.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-select-button.jpg" alt="Choose Payment Button" width="600" />

The button is added to the page.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-button-added.jpg" alt="Added Payment Button" width="600" />

3.5 Save the changes and preview the page. The Payment Button appears on the page.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-button-on-page.jpg" alt="Payment Button Appears" width="800" />

You can now start accepting payments on your WordPress website using the Payment Button.

### Step 4: View Details on Dashboard

To view the payments on the WordPress Dashboard:

4.1 Click **Razorpay Buttons Elementor** to view the list of Payment Buttons.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-list-buttons.jpg" alt="List of Payment Button" width="800" />

4.2 Click **View** to open the button details.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/payment-button-elementor-button-details.jpg" alt="View Payment Button Details" width="800" />

The following information regarding the payment button is displayed:

* Button ID
* Button Status
* Total Quantity Sold
* Total Revenue
* Created On
* Item Name

### Related Information

* [Payment Button](/docs/payments/payment-button)
* [Create a WordPress Website](/docs/payments/payment-button/supported-platforms/wordpress/create-website)
* [Embed Payment Button on WordPress Website](/docs/payments/payment-button/supported-platforms/wordpress)
* [Payment Button SiteOrigin Plugin for WordPress](/docs/payments/payment-button/supported-platforms/wordpress/site-origin)
* [Payment Button Visual Composer Plugin for WordPress](/docs/payments/payment-button/supported-platforms/wordpress/visual-composer)