> ## 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 Visual Composer Plugin for WordPress

> Embed a Razorpay Payment Button on your WordPress website using the Payment Button Visual Composer 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 Visual Composer-built WordPress website using the [Payment Button Visual Composer Plugin](https://wordpress.org/plugins/razorpay-payment-button-for-visual-composer/).

<img src="https://razorpay.com/docs/build/browser/assets/images/pb-composer-plugin.jpg" alt="Razorpay Payment Button Visual Composer Plugin" width="1200" class="click-zoom" />

## Prerequisites

1. Install the [Visual Composer plugin](https://wordpress.org/plugins/visualcomposer) on your WordPress site.
2. [Create a Razorpay account](https://dashboard.razorpay.com/signup).
3. Navigate to **Account & 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 Visual Composer Plugin for WordPress

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 Visual Composer 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](#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)

### 2. Install and Configure the Plugin

To install and configure the Plugin:

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

* [Download](https://wordpress.org/plugins/razorpay-payment-button-for-visual-composer) 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**. <br />

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/rzp-pb-visual-composer.jpg" alt="Activate Plugin" width="800" />

2.3 Navigate to **Razorpay Buttons for Visual Composer** → **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/pb-composer-configure-settings.jpg" alt="Add Razorpay API Key" width="800" />

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

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

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

3.3 Click **Add Content** and search for Razorpay **Payment Button** or **Subscription Button** as per your preference.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/pb-composer-add-content.jpg" alt="Embed Button" width="800" />

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/pb-composer-rzp-widgets.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/pb-composer-select-button.jpg" alt="Choose Payment Button" width="800" />

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

<Info>
  **Handy Tips**

  The selected button will appear on the preview page but not in the editor.
</Info>

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/pb-composer-preview.jpg" alt="Payment Button Appears" width="800" />

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

### 4. View Details on Dashboard

To view the payments on the WordPress Dashboard:

4.1 Click **Razorpay Buttons for Visual Composer** to view the list of Payment Buttons.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/pb-composer-buttons-preview.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/pb-composer-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

### 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 Elementor Plugin for WordPress](/docs/payments/payment-button/supported-platforms/wordpress/elementor)
* [Payment Button SiteOrigin Plugin for WordPress](/docs/payments/payment-button/supported-platforms/wordpress/site-origin)