> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-60c89f9a-mintlify-audit-missing-sections-1778528421.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate Payment Pages with  Magic Checkout

> Use Magic Checkout to help customers easily complete transactions on your Razorpay Payment Page. Customers can add and securely save their addresses and preferred payment details at checkout as a one-time activity. They can then re-use these details while making repeat payments across any Payment Page in the Razorpay network.

## Advantages

* 20% rise in conversion rates as we prefill customer details for every subsequent purchase.
* Frictionless checkout experience reduces cart abandonment rates and increases sales.
* Customers can securely save their addresses and use them for repeat transactions, thus leading to lesser clicks and smoother checkout.

## Integration Steps

You can integrate your Payment Page with Magic Checkout using the following steps.

<Steps>
  <Step title="Step 1">
    Log in to the Dashboard and navigate to Payment Pages.
  </Step>

  <Step title="Step 2">
    Click the **+ Create Payment Page** button.
  </Step>

  <Step title="Step 3">
    Select a template from the list or click **Create your Own**.
  </Step>

  <Step title="Step 4">
    Click **Magic Checkout Settings**.
  </Step>

  <Step title="Step 5">
    Enable **Magic Checkout**. This will remove your customer input fields such as shipping and customer details.
  </Step>

  <Step title="Step 6">
    Select the required **Delivery Charge**. The three different categories for delivery charges are:

    * **No extra charge**: No charges applied for delivery.
    * **Yes, a flat amount**: Add the amount the customer should pay for delivery charges. For example, if the order value is ₹500 and the delivery charge is ₹50, then the customer should pay ₹550 in total.
    * **Depends on the order amount**: Specify the minimum and maximum order value and the respective delivery charge. For example, if the order value is between ₹0 to ₹100, the delivery charge can be ₹10.
  </Step>

  <Step title="Step 7">
    Click **Save**. After you save the changes, the following address fields are removed, and the customer's shipping address will be collected at checkout. Click **Confirm and Save**.

    * Email
    * Phone
    * Address
    * City
    * State
    * Pincode
  </Step>

  <Step title="Step 8">
    Continue with the creation of your Payment Page. Know more about how to [Create a Payment Page](/payments/payment-pages/create#step-2-add-page-details/).
  </Step>
</Steps>

## Edit Payment Page

To edit a Payment Page:

<Steps>
  <Step title="Step 1">
    Navigate to **Payment Page** on the Dashboard.
  </Step>

  <Step title="Step 2">
    In the list of **Payment Pages** that appears, click on the link of the page that you want to edit.
  </Step>

  <Step title="Step 3">
    In the top right corner of the page, click the **Edit** button.
  </Step>

  <Step title="Step 4">
    The page appears in edit mode. You can now edit any of the fields from [step 4](/payments/payment-pages/plugins-add-ons/magic-checkout#integration-steps:~:text=Click%20Magic%20Checkout%20Settings.) onwards.
  </Step>
</Steps>

## Customer Experience

After you publish the page and share it with your customers, they can perform the following steps to complete the payment successfully.

Watch the GIF to understand the end-to-end payment flow.

When a customer clicks the Pay button, they should complete these steps on the Magic Checkout pop-up page:

<Steps>
  <Step title="Step 1">
    Enter the **Contact Details** which includes **Mobile Number** and **Email**. Click **Continue**.
  </Step>

  <Step title="Step 2">
    Enter the **Pincode** and **Address**.
  </Step>

  <Step title="Step 3">
    Enter **Full Name**.
  </Step>

  <Step title="Step 4">
    Select the check box if the **Billing address is same as delivery address**.
  </Step>

  <Step title="Step 5">
    Select the check box to **Save address** and use them for repeat transactions if required. Click **Continue**.
  </Step>

  <Step title="Step 6">
    Enter the **OTP** to verify the mobile number.
  </Step>

  <Step title="Step 7">
    Select a **Payment Method** and click **Pay Now**.
  </Step>

  <Step title="Step 8">
    Enter the relevant details and complete the payment.
  </Step>
</Steps>

## Shipping and Customer details

Navigate to **Transactions** and select the relevant **Order Id** to view the shipping and customer details.

<Info>
  **Handy Tips**

  After you integrate Payment Pages with Magic Checkout, you can also integrate with [Shiprocket](/payments/payment-pages/plugins-add-ons/shiprocket) if required.
</Info>

<Warning>
  **Watch Out!**

  If you choose to disable magic checkout, your website/app will automatically fall back to your default Checkout experience
</Warning>