Override pay button on merchant's webpage to open Razorpay checkout.
- Head over to this link and click on the download button. Unzip the downloaded zip folder.
- Open the Extension Management page by navigating to
chrome://extensions. - The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the Load Unpacked button and select the unzipped extension directory.
- After you load it, you should get the below extension in your chrome extension list.
-
Navigate to any choice of your webpage where the checkout demo has to be injected. Let’s take the example of this Lazada merchant.
-
Open the extension, you should get a layout like below.
-
Now you need to identify the element/button on the merchant’s webpage which should open Razorpay checkout on the click.
-
Once you’ve identified the element, click on the “Pick from page” button in the extension. This will close the extension and will give you the control to select the element/button which you have decided in the previous step.
-
Upon clicking on the desired element, you will get a toast message showing "Checkout linked !".
-
Click on your desired button/element again, it should now open the Razorpay checkout ! 🚀.
- To add more personalized experience, you can modify checkout options in the extension. For eg, checkout can blend with the website theme color, have the website name, have the merchant logo, etc. To do this, open the extension and select on "Modify Checkout options". Change the values in the fields as per your preference. Refer the below screenshot for an example of the Lazada merchant.
For more details on checkout options, check the official documentation here.