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.

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.

   

3. Navigate to the MAMP folder.

   
   

   In the folder, click the MAMP icon:

   
   

4. Click Start Server to run the server on your system.

   

   The server status appears green once they are ready.

   

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

   

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

   

   a. Select the required database and click Privileges.
   

   

   b. Click Add user account.

   

   c. Enter the username and password, same as the WordPress account login credentials.
   

   

   d. Click Go.

   

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.

   

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.

   

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

    

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

    

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

    

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:

• Quick Pay Button

• Buy Now Button

• Donations Button

• Custom Button

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:

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

   

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

   

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

   

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

   

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

   

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