# Razorpay Magic Checkout

iframe
Razorpay Magic Checkout is a fast, intelligent, one-click checkout solution that streamlines the buying process by auto-filling customer details and supporting real-time integrations like coupons, delivery zones, and more from Fynd Commerce.

This guide walks you through activating the feature, configuring it on Razorpay, setting up webhooks and URLs, and installing the extension on your store.

This feature is not enabled by default and must be activated on request via Razorpay support.

## 1. Requesting Magic Checkout Access

To begin using Razorpay Magic Checkout, you must first request access:

1. Log in to your [Razorpay Dashboard](https://dashboard.razorpay.com/).
2. Raise a support ticket requesting activation of the **Magic Checkout** feature for your account.


If you want to enable **Cash on Delivery (COD)** through Magic Checkout, request it explicitly. COD is considered an add-on feature.

## 2. Configure Magic Checkout on Razorpay Dashboard

Once Razorpay enables Magic Checkout for your account, proceed with the following configurations.

### 2.1 Create Webhook

Webhooks are used by Razorpay to notify your Fynd Commerce platform about payment or refund-related events (e.g., successful payments, failed refunds). You must configure a webhook in your Razorpay dashboard before using Magic Checkout.

* **If you are a first-time merchant** or have never created a webhook before, you will need to generate a new one.
* **If you already have a webhook**, you can continue using it and simply re-enter the same **Webhook Secret** during extension login on the Fynd platform.


To create or update your webhook:

1. Go to your [Razorpay Dashboard](https://dashboard.razorpay.com/)
2. Navigate to **Settings → Webhooks**
3. Learn how to create a webhook here: [Razorpay Docs – Create Webhook](https://razorpay.com/docs/payments/dashboard/account-settings/webhooks/)


**Required Configuration:**

| Field | Value/Instruction |
|  --- | --- |
| **Webhook URL** | https://razorpay-magic.extensions.fynd.com/api/v1/webhook/razorpay |
| **Secret** | [Create a secret string of your choice or reuse an existing one – this will be used when logging into the extension] |
| **Events to Select** | The following events must be selected specifically for Magic Checkout to work correctly:  `payment.authorized`, `payment.failed`, `payment.captured`,`refund.processed`, `refund.failed`,`refund.created` |


Once set, save the webhook settings.

### 2.2 Configure Fynd-Specific Settings (Checkout Configuration)

Navigate to **Razorpay Dashboard > Magic Checkout > Setup & Settings**, and configure the following URLs inside the respective sections.

#### Checkout Settings (from left sidebar)

Update these inside the **Checkout Settings** panel:

| Field | Value |
|  --- | --- |
| URL for Get Promotion | https://razorpay-magic.extensions.fynd.com/open/coupons |
| URL for Apply Promotion | https://razorpay-magic.extensions.fynd.com/open/apply-coupon |


#### Shipping Setup (from left sidebar)

Update this inside the **Shipping Setup** panel:

| Field | Value |
|  --- | --- |
| API For Shipping Info | https://razorpay-magic.extensions.fynd.com/open/shipping-info |


These configurations ensure that the Magic Checkout popup (modal) reflects **real-time coupon codes, promotions, and delivery availability** as configured inside your Fynd Commerce store.

## 3. Install the Magic Checkout Extension on Fynd Commerce

Once your Razorpay account is configured, install the Razorpay Magic Checkout extension from your Fynd Commerce panel.

### 3.1 Log In with Credentials

During installation, you’ll be asked to enter the following details:

| Credential | Description |
|  --- | --- |
| **Razorpay Key ID** | [API Key generated in Razorpay dashboard. Learn how: [API Key Docs](https://razorpay.com/docs/payments/dashboard/account-settings/api-keys/) or go directly to: [Generate Keys](https://dashboard.razorpay.com/app/website-app-settings/business-website-details)] |
| **Razorpay Key Secret** | [Secret Key generated along with the Key ID] |
| **Razorpay Webhook Secret** | [The same secret you entered during webhook creation] |


Click **Submit**. A success message will confirm your setup.

## 4. Theme Editor Integration

To show the Razorpay Magic Checkout button on the Cart page of your store, follow the steps below:

1. Go to the **Theme Editor.**
2. Select the **Cart Page** from the top dropdown in the editor.
3. Open the **Cart Landing** Section from the left-hand sidebar.
4. Scroll to the **Blocks** area inside the section.
5. If you have not added the Magic Checkout block yet:
  1. Click on **Add Block**
  2. Select **Magic Checkout (mg)**
  3. The Magic Checkout button will now be added to the cart page.
6. If the block is already added, you can click on it to view or adjust its placement.
7. Click **Save** to apply and publish your changes.


Once this is done, the Magic Checkout button will appear to customers during the cart checkout step.

The **"Buy Now"** button on the product description page will automatically work once:

- The extension is configured.
- Fynd-specific URLs are added to the Razorpay dashboard. No additional setup is needed for this button.