API ReferenceIntegrationsKnowledge Base

Razorpay Payment Extension for Wix

Note:
This document covers customer side payment widget only. You'll also need to capture the payments manually using either Razorpay's Dashboard or webhooks.

Add widget to your site#

  1. Open WIX Editor and add the "HTML Code" element.

  2. Resize and position the element appropriately. Recommended size is 340x520.

  3. Edit and paste following code. Replace rzp_test_1DP5mmOlF5G5ag shown below with API Keys generated from your Dashboard.

    Copy<script src="https://cdn.razorpay.com/static/checkout/wix.js" data-key="rzp_test_1DP5mmOlF5G5ag" ></script>

You should see pay button and amount field in preview and published site after saving.

The payment screen appears as shown:

Once the payment is completed, the screen appears as shown:

Additional Parameters#

Additional parameters can be passed using data- attributes. For example, to customize pay button text, the code is:

Copy<script src="https://cdn.razorpay.com/static/checkout/wix.js" data-key="rzp_test_1DP5mmOlF5G5ag" data-buttontext="Donate!" ></script>

You can view list of all possible parameters here.

Customization#

You can also select a logo and theme color for payment window in Dashboard.

To pass a pre-selected amount, add the data-amount parameter as well. Note that data-amount should be specified in paise:

Copy<!-- Amount = ₹20 --> <script src="https://cdn.razorpay.com/static/checkout/wix.js" data-key="rzp_test_1DP5mmOlF5G5ag" data-amount="2000" ></script>

If amount is passed, then user wouldn't be prompted for amount.

Generate API Key#

Note:
You have to generate separate API Keys for the test and live modes. No money is deducted from your account in test mode.

To generate API key:

  1. Log into your Dashboard.
  2. Select the mode for which you want to generate the API key from the menu ribbon.
  3. Navigate to Settings.
  4. Click API Keys.
  5. Click Generate Key to generate key for the selected mode.

The Key Id and Key secret appear in a pop-out window. You also have the option to download the Key Details.

Watch the short animation below for more information.

Note:
After generating the keys from the Dashboard, download and save them securely. If you do not remember your API Keys, you need to re-generate it from the Dashboard and replace it wherever required.