Open Wix Editor and add the "HTML Code" element.
Resize and position the element appropriately. The recommended size is
In the HTML Settings window, select the radio button Code and paste the following code in the Add your code here (HTTPS only): box. In the code, ensure to edit and replace
<YOUR_KEY_ID>with API Keys generated from your Dashboard.Copy
<script src="https://cdn.razorpay.com/static/checkout/wix.js" data-key="<YOUR_KEY_ID>" ></script>
Click Update once the API Key is added.
In the preview and published site (as shown in the below screen), enter the amount and click on the Pay button.
The payment screen appears as shown:
Once the payment is completed, the screen appears as shown:
Razorpay Payment Extension for Wix
Wix is a cloud-based development platform that allows users to create HTML5 websites and mobile sites through the use of online drag and drop tools. Wix is user-friendly and makes it possible to build a professional website without knowing how to code.
One of its products, Wix Editor is a fully immersive platform that offers you total control over every aspect of your website, helping you create a professional one. Using the Wix Editor, you can drag and drop any feature you want and customize it to match the look and feel of your site.
This document covers customer side payment widget in Wix Editor. You will need to capture the payments manually using either Razorpay Dashboard or APIs.
Additional parameters can be passed using
data- attributes. For example, below is the code to customize Pay button text.
<script src="https://cdn.razorpay.com/static/checkout/wix.js" data-key="<YOUR_KEY_ID>" data-buttontext="Donate!" ></script>
string<Your_Key_ID>, refer to the Generate API Keys section for more details.
stringUse this option to replace the default text on the Pay button.
integerPayment amount. For example, if the amount is ₹100,
stringThe 3-letter ISO currency code for the payment. Must match the order currency. Defaults to
INR. See the list of supported currencies.
stringThe merchant/company name shown in the Checkout form.
stringOrder ID generated using our Orders API.
stringDescription for the item being purchased shown in the Checkout form. Must start with an alphanumeric character.
stringLink 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.
stringCardholder's name to be pre-filled on the Checkout. Applicable only when the payment method is
stringCustomer's email to be pre-filled when the Checkout opens.
stringCustomer's phone number to be pre-filled when the Checkout opens.
stringPre-selection of the payment method for the customer. Will only work if
stringAny additional fields you want to associate with the payment. For example,
shipping address. Up to 15
notefields can be specified this way.
booleanUsed 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:
true- Hides the top bar
false(default) - Displays the top bar
- Brand color to alter the appearance of the Checkout form.
booleanIndicates whether clicking the translucent blank space outside the Checkout form should close the form. Possible values:
true- Closes the form when your customer clicks outside the checkout form.
false(default) - Does not close the form when the customer clicks outside the checkout form.
booleanIndicates whether pressing the escape key should close the Checkout form. Possible values:
true(default) - Closes the form when the customer presses the escape key.
false- Does not close the form when the customer presses escape key.
booleanWhen set to
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. Defaults to
You can also select a logo and theme color for payment window in Razorpay Dashboard.
<!-- Amount = ₹20 --> <script src="https://cdn.razorpay.com/static/checkout/wix.js" data-key="<YOUR_KEY_ID>" data-amount="2000" ></script>
If the data-amount parameter has been used in the script, the customer will not be prompted to enter the amount.
- Log into your Dashboard with appropriate credentials.
- Select the mode (Test or Live) for which you want to generate the API key.
You have to generate separate API Keys for the test and live modes. No real money is used in test mode.
- Navigate to Settings → API Keys → Generate Key to generate key for the selected mode.
Key Id and
Key Secret appear in a pop-out window as shown below:
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.
If you have a query, raise a ticket on our Support Portal