Razorpay is Indian payment gateway provider which has a WordPress plugin enables you to capture payments from any WordPress page or post.
The best thing about the Razorpay Quick Payments is, it is very easy to setup. But still, it can be confusing to people who are new to WordPress hence here is a simple step by step guide to it.
Note: For this tutorial, we used a site which has Classic editor installed. Steps are identical for Gutenberg editor. I have added some points also for Gutenberg editor.
Steps to follow –
1. Sign in to your Razorpay dashboard, then click on Settings. There you will find API Key tab, click on it and generate your API Key id and Key secret. Please copy them somewhere, like notepad.
2. Install Razorpay Quick Payments Plugin from WordPress plugin directory.
3. After installation, you will find Razorpay option in the left side menu in dashboard, click on it you will find Razorpay Quick Payments setting page. In this page, copy-paste Key id and Key secret which you generated earlier in step 1 and save the changes.
4. Now go to add a new page/post screen. Enter your page name and other details as usual. In the content editor add [RZP] shortcode wherever you want the Pay with Razorpay button to appear. See attached image for reference.
5. On the top right of the page/post edit screen, you will find an option “Screen Options”, click on it and you will see some checkboxes. Find “Custom fields” option in it and check the box in front of it, then click “Apply” to save changes. Attached image for reference.
If you are using Gutenberg, Click on the 3 dots setting button on the right top of the screen, in the menu that will appear click on the options (last option in the menu). A new popup option will open, scroll down a bit and find Advanced panels section, in which you will find Custom fields option. Check the box and click Enable and reload.
6. Now if you scroll down a bit under content editor box you will find Custom fields box, in that box, click on ‘Enter New’ and you can type the name of your custom field and click on Add Custom Field.
7. Now we have to enter 3 important fields which are required by Razorpay to capture the transaction. name, description and amount. Add them like below, change where necessary.
In the end your custom fields window should look similar to this –
8. Publish the page/post and you are done. Check the page/post and you will see the payment button. Test a transaction with a small amount.