Integrate Magic Checkout on Website
Steps to integrate Magic Checkout on your Website.
Follow these steps to integrate the Razorpay Magic Checkout on your website.
- .
- Generate from the Razorpay Dashboard.
Follow the steps given below:
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.
Handy Tips
If you do not want to use Magic Checkout, raise a request with our
to disable this feature on the Razorpay Dashboard.Follow the steps given below to create promotions and shipping info API endpoints:
Watch Out!
Ensure that the URLs are publicly accessible, require no authentication, and are hosted on your server.
- Log in to the and navigate to Magic Checkout.
- In the Platform Setup, select Custom E-Commerce Platfrom from the drop-down list and click Next.
- Navigate to Setup & Settings → Checkout Settings.
- In the Coupon Settings section, enter the following:
- URL for get promotions: The API URL should return a list of promotions applicable to the specified order_id and customer. Magic Checkout uses this endpoint to fetch these promotions from your server and display them to your customers in the checkout modal.
- URL for apply promotions: The API URL validates the promotion code applied by the customer and should return the discount amount. Magic Checkout uses this endpoint to apply promotions via your server.
- Click Save settings.
- Navigate to Shipping Setup.
- Select API as the Shipping Service type from the drop-down list.
- Enter the URL for shipping info. The API URL should return shipping serviceability, COD serviceability, shipping fees, and COD fees for a given list of customer addresses. Magic Checkout uses this endpoint to retrieve shipping information from your server.
- Click Save Settings.
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": 500000, // in paise. Here 50000 = 50000 paise, which equals to ₹500"currency": "INR","receipt": "receipt#1","notes": {},"line_items_total": 500000, // in paise."line_items": [{"sku": "1g234","variant_id": "12r34","other_product_codes": {"upc": "12r34","ean": "123r4","unspsc": "123s4"},"price": 500000, // in paise."offer_price": 500000, // in paise."tax_amount": 0,"quantity": 1,"name": "TEST","description": "TEST","weight": 1700, // in grams"dimensions": {"length": 1700,"width": 1700,"height": 1700},"image_url": "url","product_url": "url","notes": {}}]}'
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
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 Total of offer_price for all line items added to the cart, in paise. For example, if a shoe worth ₹8,000 and a shirt worth ₹10,000 are added, the line_item_total will be 1800000. This amount is post-tax.
Watch Out!
To ensure the order is considered as a Magic Checkout order, you must pass this parameter. Otherwise, it will default to Standard Checkout order, and customers will view the Standard Checkout UI instead of Magic Checkout. Know more about
.line_items
mandatory
object This will have the details about the specific items added to the cart.
sku
mandatory
string Alphanumeric. Unique product id defined by you.
variant_id
mandatory
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:stringEuropean Article Numbers (EAN) is a type of barcode that encodes an article number. Contains 8 (EAN-8) or 13 (EAN-13) numerical digits.unspsc:stringThe 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 paise.
offer_price
mandatory
integer Final price charged to the customer in paise, after applying any adjustments, such as product discounts.
Handy Tips
If no discount is applied, price and offer_price will be the same.
tax_amount
mandatory
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
mandatory
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 The URL of the product image. This parameter is mandatory if you want to display product images on our iframe.
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”.
Descriptions for the response parameters are present in the
parameters table.The error response parameters are available in the
.This API should return shipping serviceability, COD serviceability, shipping fees, and COD fees for a given list of customer addresses.
{"order_id": "SomeReceiptValue", // This is the receipt field set in the Razorpay order"razorpay_order_id": "EKwxwAgItmmXdp", // This is the RZP order created without the `order_` prefix"email": "gaurav.kumar@example.com", // Email field will be set if the customer enters an email"contact": "+919900000000", // Customer phone number with country code"addresses": [{"id": "0","zipcode": "560060","state_code": "KA","country": "IN"}]}
order_id
mandatory
string Unique identifier of the order created
razorpay_order_id
mandatory
string Unique identifier for the order returned by Checkout.
mandatory
string Customer's email address.
contact
mandatory
string Customer's phone number.
addresses
mandatory
array Customer's address details.
id
mandatory
string Unique identifier of the customer's address.
zipcode
mandatory
string Customer's ZIP code.
state_code
optional
string The code of the state where the customer resides.
country
mandatory
string Country where the customer resides. The length cannot exceed 2 characters.
addresses
mandatory
array Customer's address details.
id
mandatory
string Unique identifier of the customer's address.
zipcode
mandatory
string Customer's ZIP code.
country
mandatory
string Country where the customer resides. The length cannot exceed 2 characters.
shipping_methods
mandatory
array Details regarding the shipping methods.
id
mandatory
string Unique identifier of the shipping method.
description
integer Brief description of the shipping method.
name
mandatory
string Name of the shipping method.
serviceable
mandatory
boolean Indicates whether you deliver orders to the zipcode entered by the customer. This is based on the zipcodes you have added in the serviceability setting on the Razorpay Dashboard. Possible values:
true: Orders can be delivered to the added zipcodes.false: Orders cannot be delivered to the added zipcodes.
shipping_fee
mandatory
integer Shipping charge applicable to be paid by the customer.
cod
mandatory
boolean Indicates whether you support cash on delivery on this order.
true: COD payment method is supported.false: COD payment method is not supported.
cod_fee
mandatory
integer Additional amount charged by for you COD. This is based on the amount you have added to the COD setting on the Razorpay Dashboard.
Handy Tips
If the cod field is false, set the cod_fee field to 0.
This API should return the list of promotions applicable for the given order_id and customer.
{"order_id": "SomeReceiptValue", // this is the receipt field set in Razorpay order"contact": "+919000090000","email": "gaurav.kumar@example.com"}'
order_id
mandatory
string Unique identifier of the order created
contact
optional
string Customer's phone number.
optional
string Customer's email address.
promotions
mandatory
array Details of the promotions created.
code
mandatory
string Unique identifier of the promotion.
summary
mandatory
string Summary about the promotion. For example, 10% off on total cart value.
description
optional
string Brief description of the promotion. For example, 10% on total cart value upto ₹300.
This API should validate the promotion code applied by the customer and return the discount amount.
{"order_id": "SomeReceiptValue", // this is the receipt field set in Razorpay order"contact": "+919000090000","email": "gaurav.kumar@example.com","code": "500OFF"}'
order_id
mandatory
string Unique identifier of the order created
contact
optional
string Customer's phone number.
optional
string Customer's email address.
code
mandatory
string Promotion code used to avail discount on checkout.
promotion
mandatory
object Used to pass all offer or discount-related information, including promotion code discount, method discount and so on.
reference_id
mandatory
string Id of the offer you create.
code
optional
string Promotion code used to avail discount on checkout.
type
optional
string Type of offer. Possible values:
coupon: A discount applied by customers during checkout. For example, customers can use a coupon like Diwali Sale 500 Off to get ₹500 off the total cart value.offer: A promotion you create for your customers. For example, you create an offerBuy 4 t-shirts and get 2 free. In this case, when customers add 4 t-shirts to their cart, the 2 additional t-shirts will be automatically added for free.
value
optional
integer The offer value that needs to be applied in paise. For example, if you want to offer a discount of ₹500, enter 50000.
value_type
optional
string The type of value like:
fixed_amount: A fixed amount discount value in the currency of the order. For example, ₹500.percentage: A percentage discount value. For example, 10%.BXGY: Buy X and Get Y. For example, if you buy 2 tshirts, you a get a cap for free or at a discounted value.
Handy Tips
Regardless of the value_type, the amount specified in the value parameter is applied as-is. For example, if value_type is percentage and the value is 5000, 5000 is considered in currency subunits (paise).
description
optional
string Description of the promotion applied. For example, New Year Sale Offer.
Add the Pay button on your web page using the handler function or callback URL.
Handy Tips
If your website is running on WooCommerce or Shopify, please integrate with the Razorpay
or plugin based on your requirement.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_EKwxwAgItmmXdp", // 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/","redirect": "true","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": "500OFF" // any valid coupon code that gets auto-applied once magic opens},"notes": {"address": "ABC Office"}};var rzp1 = new Razorpay(options);