Integrate Razorpay Magic Checkout on Website

You can integrate Razorpay Magic Checkout on your website to give your customers a seamless checkout experience. You can also offer Cash on Delivery as a payment method.

Prerequisites

Create a Razorpay account
.
Generate
API Keys
from the Razorpay Dashboard. You can use the Test Keys for a sandbox experience. No money will be deducted from your account when making test payments. Please use the Live Keys when going live with the application.

Integration Steps

Follow the steps given below:

1. Create Coupons and Shipping Info Webhooks

You need to create the Coupons and Shipping Info Webhooks using the relevant APIs. Please contact the

support team

for the APIs.

2. Enable/Disable Magic Checkout and Cash on Delivery

Raise a request with your Razorpay SPOC to get this feature enabled on your account. Once this feature is enabled, the customer address saving and coupon features are enabled.

3. Create an Order

You can create an order using the following API and send the additional information required for Magic Checkout. Pass the order_id received in response to the checkout code.

curl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-X POST https://api.razorpay.com/v1/orders \
-H "content-type: application/json" \
-d '{
  "amount": 50000,
  "currency": "INR",
  "receipt": "receipt#1",
  "notes": {},
  "line_items_total": 500000,
  "line_items": [
    {
      "type": "e-commerce",
      "sku": "1g234",
      "variant_id": "12r34",
      "other_product_codes": {
        "upc": "12r34",
        "ean": "123r4",
        "unspsc": "123s4"
      },
      "price": 500000,
      "offer_price": 500000,
      "tax_amount": 0,
      "quantity": 1,
      "name": "TEST",
      "description": "TEST",
      "weight": 1700,
      "dimensions": {
        "length": 1700,
        "width": 1700,
        "height": 1700
      },
      "image_url": "url",
      "product_url": "url",
      "notes": {}
    }
  ]
}'

3.1 Request Parameters

amount

mandatory

integer The transaction amount, expressed in the currency subunit, such as paise (in case of INR). For example, for an actual amount of ₹299.35, the value of this field should be 29935.

currency

mandatory

string The currency in which the transaction should be made. See the

list of supported currencies

. Default is INR. Length must be of 3 characters.

receipt

mandatory

string Your receipt id for this order should be passed here. Maximum length of 40 characters.

notes

optional

object Key-value pair that can be used to store additional information about the entity. Maximum 15 key-value pairs, 256 characters (maximum) each. For example, "note_key": "Beam me up Scotty”.

line_items_total

mandatory

integer Sum of offer_price for all line items added in the cart in paise. For example, if a shoe worth ₹8,000 and a shirt worth ₹10,000 are added to the cart, the line_item_total will be 180000. This is post-tax.

line_items

optional

object This will have the details about the specific items added to the cart.

type

optional

string Defines the category type. Possible values:

mutual_funds: For mutual funds.
e-commerce: For all other businesses.

sku

optional

string Alphanumeric. Unique product id defined by you.

variant_id

optional

string Alphanumeric. Unique variant_id defined by you.

other_product_codes

optional

object Array to collect different codes that can identify the item type. Possible values: upc: string Universal Product Code (UPC; redundantly: UPC code) is a barcode symbology used worldwide to track trade items in stores. UPC consists of 12 numeric digits that are uniquely assigned to each trade item

ean: string European Article Numbers (EAN) is a type of barcode that encodes an article number. Contains 8 (EAN-8) or 13 (EAN-13) numerical digits.
unspsc: string The United Nations Standard Products and Services Code (UNSPSC) is a taxonomy of products and services used in eCommerce. It is a four-level hierarchy coded as an eight-digit number, with an optional fifth level adding two more digits.

price

mandatory

integer Price of the product in paisa.

offer_price

optional

integer Price charged to the customer in paisa. This is after any adjustment such as product discount.

tax_amount

optional

integer The tax levied on the product.

quantity

mandatory

integer Number of units added in the cart.

name

mandatory

string Name of the product.

description

optional

string Description of the product.

weight

optional

integer Weight of the product in grams.

dimensions

optional

object The dimensions of the product.

length

optional

string The length of the product in centimeters.

width

optional

string The width of the product in centimeters.

height

optional

string The height of the product in centimeters.

product_url

optional

string URL of the product's listing page.

image_url _optional_ : string` URL of the product image.

notes

optional

object Key-value pair that can be used to store additional information about the entity. Maximum 15 key-value pairs, 256 characters (maximum) each. For example, "note_key": "Beam me up Scotty”.

shipping_fee

optional

integer Shipping fee charged on the line items in paisa.

sub_total

optional

integer Post-tax, COD, Shipping fee sub-total in paisa.

4. Integrate with Magic Checkout on Client-Side

Add the Pay button on your web page using the checkout code, handler function or callback URL.

Handy Tips

If your website is running on WooCommerce or Shopify, please integrate with the Razorpay

WooCommerce

Shopify

plugin based on your requirement.

4.1 Handler Function and Callback URL

Handler Function	Callback URL
When you use this: On successful payment, the customer is shown your web page. On failure, the customer is notified of the failure and asked to retry the payment.	When you use this: On successful payment, the customer is redirected to the specified URL, for example, a payment success page. On failure, the customer is asked to retry the payment.

4.2 Code to Add Pay Button

Copy-paste the parameters as options in your code:

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/magic-checkout.js"></script>
<script>
var options = {
    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
    "one_click_checkout": true,
    "name": "Acme Corp", //your business name
    "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1; mandatory
    "show_coupons": true, // default true; false if coupon widget should be hidden
    "callback_url": "https://eneqd3r9zrjok.x.pipedream.net/",
    "prefill": { //We recommend using the prefill parameter to auto-fill customer's contact information especially their phone number
        "name": "Gaurav Kumar", //your customer's name
        "email": "gaurav.kumar@example.com",
        "contact": "9000090000", //Provide the customer's phone number for better conversion rates
        "coupon_code": "COUPON50" // any valid coupon code that gets auto-applied once magic opens
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    }
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}
</script>

4.3 Checkout Options

key

optional

string API Key ID generated from the Razorpay Dashboard.

one_click_checkout

mandatory

boolean Determines whether to enable or disable the checkout flow. Possible values:

true: Enables Magic Checkout.
false (default): Disables Magic Checkout.

name

mandatory

string The business name shown on the Checkout form. For example, Acme Corp.

order_id

mandatory

string Order ID generated via

Orders API

show_coupons

optional

boolean Determines whether to show the coupons to customer on the checkout. Possible values:

true (default): Enables the Coupon feature.
false: Disables the Coupon feature.

prefill

optional

object You can prefill the following details at Checkout.

Boost Conversions and Minimise Drop-offs

Autofill customer contact details, especially phone number to ease form completion. Include customer’s phone number in the contact parameter of the JSON request's prefill object. Format: +(country code)(phone number). Example: “contact": "+919000090000").
This is not applicable if you do not collect customer contact details on your website before checkout, have Shopify stores or use any of the no-code apps.

name

optional

string Cardholder's name to be pre-filled if customer is to make card payments on Checkout. For example, Gaurav Kumar.

optional

string Email address of the customer.

contact

optional

string Phone number of the customer. The expected format of the phone number is + {country code}{phone number}. If the country code is not specified, 91 will be used as the default value. This is particularly important while prefilling contact of customers with phone numbers issued outside India. Examples:

+14155552671 (a valid non-Indian number)
+919977665544 (a valid Indian number).
If 9977665544 is entered, +91 is added to it as +919977665544.

coupon_cod

optional

string Applies relevant coupon as soon as the checkout modal opens.

notes

optional

object Set of key-value pairs that can be used to store additional information about the payment. It can hold a maximum of 15 key-value pairs, each 256 characters long (maximum).

theme

optional

object Thematic options to modify the appearance of Checkout.

color

optional

string Enter your brand colour's HEX code to alter the text, payment method icons and CTA (call-to-action) button colour of the Checkout form.

Handy Tips

This is an on-demand feature. Please raise a request with your SPOC or our

Support team

to get it activated on your Razorpay account.

backdrop_color

optional

string Enter a HEX code to change the Checkout's backdrop colour.

modal

optional

object Options to handle the Checkout 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 customer clicks outside the checkout form.

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 the escape key.

handleback

optional

boolean Determines whether Checkout must behave similar to the browser when back button is pressed. Possible values:

true (default): 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.
false: Checkout does not simulate a back press when browser's back button is pressed.

confirm_close

optional

boolean Determines whether a confirmation dialog box should be shown if customers attempts to close Checkout. Possible values:

true: Confirmation dialog box is shown.
false (default): Confirmation dialog box is not shown.

ondismiss

optional

function Used to track the status of Checkout. You can pass a modal object with ondismiss: function()\{\} as options. This function is called when the modal is closed by the user.

animation

optional

boolean Shows an animation before loading of Checkout. Possible values:

true(default): Animation appears.
false: Animation does not appear.

callback_url

optional

string Customers will be redirected to this URL on successful payment. Ensure that the domain of the Callback URL is allowlisted.

redirect

optional

boolean Determines whether to post a response to the event handler post payment completion or redirect to Callback URL. callback_url must be passed while using this parameter. Possible values:

true: Customer is redirected to the specified callback URL in case of payment failure.
false (default): Customer is shown the Checkout popup to retry the payment.

timeout

optional

integer Sets a timeout on Checkout, in seconds. After the specified time limit, the customer will not be able to use Checkout.

readonly

optional

object Marks fields as read-only.

contact

optional

boolean Used to set the contact field as readonly. Possible values:

true: Customer will not be able to edit this field.
false (default): Customer will be able to edit this field.

optional

boolean Used to set the email field as readonly. Possible values:

true: Customer will not be able to edit this field.
false (default): Customer will be able to edit this field.

name

optional

boolean Used to set the name field as readonly. Possible values:

true: Customer will not be able to edit this field.
false (default): Customer will be able to edit this field.

send_sms_hash

optional

boolean Used to auto-read OTP for cards and net banking pages. Applicable from Android SDK version 1.5.9 and above. Possible values:

true: OTP is auto-read.
false (default): OTP is not auto-read.

retry

optional

object Parameters that enable retry of payment on the checkout.

enabled

boolean Determines whether the customers can retry payments on the checkout. Possible values:

true (default): Enables customers to retry payments.
false: Disables customers from retrying the payment.

max_count

integer The number of times the customer can retry the payment. We recommend you to set this to 4. Having a larger number here can cause loops to occur.

Watch Out!

Web Integration does not support the max_count parameter. It is applicable only in Android and iOS SDKs.

config

optional

object Parameters that enable configuration of checkout display language.

display

object Child parameter that enables configuration of checkout display language.

language

string The language in which checkout should be displayed. Possible values:

en: English
ben: Bengali
hi: Hindi
mar: Marathi
guj: Gujarati
tam: Tamil
tel: Telugu

5. Verify Payment Status

Verify the payment status using the APIs and webhooks.

You can fetch the payment details using the

Fetch Payments API

6. Perform Post Payment Processing

Based on the response received in the order, you can perform the post-payment processing at your end. You can retrieve order details using the Fetch Orders API.

Use the following endpoint to retrieve the details of a particular order:

GET

/orders/:id

curl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET]\
-X GET https://api.razorpay.com/v1/orders/order_EKwxwAgItmmXdp \

Know more about the

Orders API.

Order Status

Prepaid orders: paid.
COD orders: placed.

Path Parameter

mandatory

string The unique identifier of the order to be retrieved.

Integrate Magic Checkout on Website

Prerequisites

Integration Steps

1. Create Coupons and Shipping Info Webhooks

2. Enable/Disable Magic Checkout and Cash on Delivery

3. Create an Order

3.1 Request Parameters

4. Integrate with Magic Checkout on Client-Side

4.1 Handler Function and Callback URL

4.2 Code to Add Pay Button

4.3 Checkout Options

5. Verify Payment Status

6. Perform Post Payment Processing

Path Parameter