Embed Payment Button on WordPress Website
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.
Razorpay Payment Button WordPress Plugin. Create a Razorpay account.
Settings → API Keys and generate API keys in the test mode.
Add the API key details in the Razorpay Payment Button plugin settings.
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.
Watch this video to see how to set up a Payment Button using Wordpress Plugin.
To install WordPress on your Mac system:
Download the latest version of MAMP and install it on your Mac system. This software enables you to manage your websites locally.
Install the downloaded file using the wizard and save MAMP in your
Navigate to the
In the folder, click the
Start Server to run the server on your system.
The server status appears green once they are ready.
Open WebStart Page. The server starts running on your browser as shown:
We must set up a MySQL database for the WordPress website. This is done using
a. Select the required database and click
Add user account.
c. Enter the username and password, same as the WordPress account login credentials.
Navigate to the WordPress application you had downloaded.
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.
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.
Enter your database details. Provide a name for the database, and enter
root for both the database username and password. Click
Provide the required general site information (which you can change later), as well as your login information in WordPress.
Install WordPress button. With this, your website is ready.
To accept payments on your WordPress site, you must create a Razorpay Payment Button. Follow these steps to create a:
Follow these steps to embed the Payment Button:
Download and install the Razorpay Payment Button Plugin. You can do this using either of these methods:
In your WordPress site, activate the plugin in the
WordPress Plugin Manager.
Razorpay Buttons → Settings to add your Razorpay API key details and connect your Razorpay account to the plugin.
Razorpay Buttons. A list of buttons you created on Razorpay are available here. Select the required button.
Pages and navigate to the page where you want to embed the Payment button.
Add Block → Widgets → Razorpay: Payment Button to embed the Payment button onto the page.
Choose the Payment Button using the drop down and publish or update the page.
The Payment Button appears on the page.
You can now start accepting payments on your WordPress website using the Payment Button.
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.