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

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

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

## Prerequisites

1. Install the [Page Builder by SiteOrigin plugin](https://wordpress.org/plugins/siteorigin-panels) 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 SiteOrigin 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 Payment Button SiteOrigin 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)

### 2. Install and Configure the Plugin

To install and configure the Plugin:

2.1 Download and install our Payment Button SiteOrigin Plugin. You can do this using any one of these methods:

* [Download](https://wordpress.org/plugins/razorpay-payment-button-for-siteorigin/) 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-site-origin.jpg" alt="Activate Plugin" width="800" />

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

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

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

3.2 Click **Live Editor** to open the SiteOrigin website builder mode.

3.3 Navigate to **Add Widget** → **Razorpay Widgets** and select **Payment Button** or **Subscription Button** as per your preference.

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

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

3.4 From the list, select the Payment Button that should be displayed on the page and click **Done**.

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

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/pb-site-origin-preview.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 SiteOrigin** to view the list of Payment Buttons.

<img class="click-zoom" src="https://razorpay.com/docs/build/browser/assets/images/pb-site-origin-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-site-origin-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 Visual Composer Plugin for WordPress](/docs/payments/payment-button/supported-platforms/wordpress/visual-composer)