API ReferenceIntegrationsKnowledge Base

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.

Note:
This document covers customer side payment widget in Wix Editor. You will need to capture the payments manually using either Razorpay Dashboard or APIs.

Add a widget to your site#

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

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

  3. 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>
  4. Click Update once the API Key is added.

  5. In the preview and published site (as shown in the below screen), enter the amount and click on the Pay button.

  6. The payment screen appears as shown:

  7. 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>

Parameters Table#

data-key mandatory
string <Your_Key_ID>, refer to the Generate API Keys section for more details.
data-buttontext optional
string Use this option to replace the default text on the Pay button.
data-amount optional
integer Payment amount. For example, if the amount is ₹100,data-amount="10000".
data-currency optional
string The 3-letter ISO currency code for the payment. Must match the order currency. Defaults to INR. See the list of supported currencies.
data-name optional
string The merchant/company name shown in the Checkout form.
data-order_id optional
string Order ID generated using our Orders API.
data-description optional
string Description for the item being purchased shown in the Checkout form. Must start with an alphanumeric character.
data-image optional
string 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.
data-prefill.name optional
string Cardholder's name to be pre-filled on the Checkout. Applicable only when the payment method is card.
data-prefill.email optional
string Customer's email to be pre-filled when the Checkout opens.
data-prefill.contact optional
string Customer's phone number to be pre-filled when the Checkout opens.
data-prefill.method optional
string 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
data-notes.fieldname optional
string Any additional fields you want to associate with the payment. For example, shipping address. Up to 15 note fields can be specified this way.
data-theme.hide_topbar optional
boolean 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:
  • true - Hides the top bar
  • false (default) - Displays the top bar
data-theme.color optional
Brand color to alter the appearance of the Checkout form.
data-modal.backdropclose optional
boolean Indicates 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.
data-modal.escape optional
boolean Indicates 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.
data-modal.handleback optional
boolean When 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 true.

Customization#

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

Copy<!-- 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.

Generate API Key#

  1. Log into your Dashboard with appropriate credentials.
  2. Select the mode (Test or Live) for which you want to generate the API key. Note:
    You have to generate separate API Keys for the test and live modes. No real money is used in test mode.
  3. Navigate to SettingsAPI KeysGenerate Key to generate key for the selected mode.

The Key Id and Key Secret appear in a pop-out window as shown below:

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.