API ReferenceIntegrationsKnowledge Base

Payment Button Elementor Plugin for WordPress

You can accept payments on your Elementor-built WordPress website using the Razorpay Payment Button Elementor Plugin.

Razorpay Payment Button Elementor Plugin

Prerequisites🔗

  1. Install the Elementor Website Builder plugin on your WordPress site.
  2. Create a Razorpay account.
  3. Navigate to SettingsAPI Keys and generate the API keys in the test mode.

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 Razorpay Payment Button plugin settings.

Steps🔗

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

To integrate the plugin:

  1. Create a Payment Button on the Razorpay Dashboard.
  2. Install and configure the Razorpay Payment Button Elementor plugin.
  3. Embed the button on the WordPress site.
  4. View details on WordPress Dashboard.

Step 1: Create a Payment Button on Razorpay Dashboard🔗

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

Follow these steps to create:

Step 2: Install and Configure the Plugin🔗

To install and configure the Payment Button:

  1. Download and install the Razorpay Payment Button Elementor Plugin. You can do this using either of these methods:

    • Download 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. In your WordPress site, activate the plugin in the WordPress Plugin Manager.

    Activate
  3. Navigate to Razorpay Buttons ElementorSettings to add your Razorpay API key details and connect your Razorpay account to the plugin.

    Add

Step 3: Embed the Payment Button on WordPress Site🔗

To add Payment Button on WordPress site:

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

    Select
  2. Click Edit with Elementor to open the Elementor website builder mode.

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

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

    Choose

    The button is added to the page.

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

    Payment

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:

  1. Click Razorpay Buttons Elementor to view the list of Payment Buttons.

    List
  2. Click View to open the button details.

    View

The following information regarding the payment button is displayed:

  • Button ID
  • Button Status
  • Total Quantity Sold
  • Total Revenue
  • Created On
  • Item Name
×