Payments

Payment Button

Supported Platforms

Wordpress

Embed Payment Button on WordPress Website

Embed a Razorpay Payment Button on your WordPress website and accept payments from customers.

WordPress is one of the most popular Content Management Systems out there. You can quickly build a website using WordPress and embed the Razorpay Payment Button to accept payments from customers.

WordPress Homepage

WordPress Plan

For Websites Hosted on Domain

If you have built your website using www.wordpress.com, and are on a paid plan, you can directly install the Razorpay Payment Button Plugin from the WordPress Plugins store. Follow these steps to:

  1. Install the Razorpay Payment Button Plugin on your WordPress site

    .

  2. Create a Payment Button on Razorpay Dashboard

    .

  3. Embed the Payment Button on your WordPress site

    .

For Websites Hosted on Localhost

If you are using WordPress with the free plan, you need to use MAMP to set up a local WordPress site and continue with the Payment Button implementation. Follow these steps to:

  1. Set up WordPress site locally on your system

    .

  2. Create a Payment Button on Razorpay Dashboard

    .

  3. Embed the Payment Button on your WordPress site

    .

Prerequisites

  1. Download the

    Razorpay Payment Button WordPress Plugin

    .
  2. Create a Razorpay account.
  3. Navigate to Settings → API Keys and

    generate API keys

    in the test mode.

Add the API key details in the Razorpay Payment Button plugin settings.

Handy Tips

  • When testing: Generate the keys in Test mode.
  • To accept live payments: Generate the keys in Live mode and replace them in the Razorpay Payment Button plugin settings.

Steps

Watch this video to see how to set up a Payment Button using Wordpress Plugin.

Step 1: Set Up WordPress Site Locally on Your System

For Windows Users

See:

Installation Steps for Windows

For Mac Users

To install WordPress on your Mac system:

  1. Download the latest version of MAMP

    and install it on your Mac system. This software enables you to manage your websites locally.
  2. Install the downloaded file using the wizard and save MAMP in your Applications folder.
    Install MAMP
  3. Navigate to the MAMP folder.
    Navigate to MAMP

    In the folder, click the MAMP icon:
    Click MAMP
  4. Click Start Server to run the server on your system.
    Start Server

    The server status appears green once they are ready.
    Server in Ready State

  5. Click Open WebStart Page. The server starts running on your browser as shown:
    Open WebStart Page

  6. We must set up a MySQL database for the WordPress website. This is done using phpMyAdmin.
    Setup phpMyAdmin

    a. Select the required database and click Privileges.
    Add user account: phpMyAdmin

    b. Click Add user account.
    Add user account: phpMyAdmin

    c. Enter the username and password, same as the WordPress account login credentials.
    Add user account: phpMyAdmin

    d. Click Go.
    user account added: phpMyAdmin

  7. Navigate to the WordPress application you had downloaded.
  8. Rename the WordPress folder. Provide a name relevant to the site you will be building/testing locally. For example, teafactory. Add the teafactory folder in htdocs of your MAMP directory.
    Rename WordPress folder

  9. Open the browser and type in the URL pointing to your site folder. For example, localhost:8888/teafactory. Select the language of your choice and click Continue → Let's Go.
    Select Language

  10. Enter your database details. Provide a name for the database, and enter root for both the database username and password. Click Submit.
    Log in

  11. Provide the required general site information (which you can change later), as well as your login information in WordPress.
    Setup Login Information

  12. Click the Install WordPress button. With this, your website is ready.
    Install WordPress

Step 2: Create a Payment Button on Razorpay Dashboard

To accept payments on your WordPress site, you must create a Razorpay Payment Button. Follow these steps to create a:

Step 3: Embed the Payment Button on WordPress Site

Follow these steps to embed the Payment Button:

  1. Download and install the Razorpay Payment Button Plugin. You can do this using either of these methods:
  2. In your WordPress site, activate the plugin in the WordPress Plugin Manager.
    Activate Plugin

  3. Navigate to Razorpay Buttons → Settings to add your Razorpay API key details and connect your Razorpay account to the plugin.
    Add Razorpay API Key

  4. Navigate to Razorpay Buttons. A list of buttons you created on Razorpay are available here. Select the required button.
    List of Payment Buttons

  5. Click Pages and navigate to the page where you want to embed the Payment button.
    Select Page

  6. Select Add Block → Widgets → Razorpay: Payment Button to embed the Payment button onto the page.
    Embed Button

  7. Choose the Payment Button using the drop-down and publish or update the page.
    Choose Payment Button

The Payment Button appears on the page.

Payment Button Appears

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

FAQs

1. I have created a Payment Button on the Razorpay Dashboard. When I try to embed this code on my www.wordpress.com website, I am facing errors. How do I resolve this?

You cannot directly use the Payment Button code generated from the Razorpay Dashboard if you are using www.wordpress.com. You must upgrade to the WordPress paid plan and use the Razorpay Payment Button plugin.

2. I am using Thrive Editor to add the button code for Razorpay. What should I be aware of, and how should I add payment buttons?

If you are using Thrive Editor to add the button code for Razorpay, it is essential to note that Thrive Editor does not support the direct inclusion of scripts in HTML pages or posts. It automatically places a code tag on top of the script and adds a <code class="tve_js_placeholder"> above the payment button script. Unfortunately, there is no workaround for this behaviour. We recommend using the WordPress default editor, Gutenberg, or any other compatible editor to add payment buttons effectively. These editors allow you to add payment button scripts without the interference caused by Thrive Editor's script handling. This will ensure a smooth integration of Razorpay payment buttons into your website.

3. I am getting following error message Razorpay error: Payment button fetch failed with the following message: The API key provided by you has expired and cannot be used. Please use the correct key and secret. How do I resolve this?

This error indicates that your API Key and Secret for Razorpay have expired. Follow the steps given below to resolve the issue:

  1. Log in to

    Razorpay Dashboard

    .
  2. Generate new

    API Keys

    .
  3. Replace the old API Key and Secret in your integration code with the newly generated API keys.

Was this page helpful?

ON THIS PAGE