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 <YOUR_KEY_ID> shown below with API Keys generated from your Dashboard.

    Copy<script src="https://cdn.razorpay.com/static/checkout/wix.js" data-key="<YOUR_KEY_ID>" ></script>
  4. You should see pay button and amount field in preview and published site after saving.

  5. The payment screen appears as shown:

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

Additional Parameters#

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

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

Possible Parameters#

Field Name (Manual)

Field Name (Automatic)

Required

Description

key

data-key

Yes

Merchant Key-ID

amount

data-amount

Yes

Payment amount. Accepted datatype is integer. For example, if the amount is ₹100,data-amount="10000".

currency

data-currency

Yes

The currency in which the payment should be made by the customer. See the list of supported currencies.

If you are using Razorpay Orders, the currency in which the payment is made must match the Order currency.

name

data-name

Yes

The merchant/company name shown in the Checkout form.

description

data-description

No

Description of the purchase item shown in the Checkout form. Must start with an alphanumeric character.

image

data-image

No

Link to an image (usually merchant's logo) shown in the Checkout form. Can also be a base64 string, if loading the image from a network is not desirable.

order_id

data-order_id

Yes

Order ID generated via Razorpay Orders.

prefill.name

data-prefill.name

No

Cardholder's name to be pre-filled when the Checkout opens.

prefill.email

data-prefill.email

No

Customer's email to be pre-filled when the Checkout opens.

prefill.contact

data-prefill.contact

No

Customer's phone number to be pre-filled when the Checkout opens.

prefill.method

data-prefill.method

No

Pre-selection of the payment method for the customer. Will only work if contact and email are also pre-filled. Possible values:
card
netbanking
wallet
emi
upi.

notes.fieldname

data-notes.fieldname

No

Any additional fields you want to associate with the payment. For example, shipping address. Up to 15 note fields can be specified this way.

theme.hide_topbar

data-theme.hide_topbar

No

Used to display or hide the top bar on the checkout form. This bar shows the selected payment method, phone number and gives the customer the option to navigate back to the start of the checkout form. Possible values are:
true - Hides the top bar
false - Displays the top bar.

theme.color

data-theme.color

No

Brand color to alter the appearance of Checkout form.

modal.backdropclose

data-modal.backdropclose

No

Indicates whether clicking the translucent blank space outside the Checkout form should close the form. Possible values are:
true - Closes the form when your customer clicks outside the checkout form
false - Does not close the form when customer clicks outside the checkout form.

Defaults to false.

modal.escape

data-modal.escape

No

Indicates whether pressing escape key should close the Checkout form. Possible values are:
true - Closes the form when customer presses escape key
false- Does not close the form when customer presses escape key.

Defaults to true.

modal.handleback

data-modal.handleback

No

When set as 'true', Checkout behaves similarly to the browser. That is, when the browser's back button is pressed, the Checkout also simulates a back press. This happens as long as the Checkout modal is open. By default, this is set to true.

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="<YOUR_KEY_ID>" 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.