Integrate Magic Checkout on React (Next.JS) Website - Shopify

curl -X POST https://api.razorpay.com/v1/magic/order/shopify?key_id=rzp_live_XXXXXX \
  -H "Content-Type: application/json" \
  -H "Accept: */*" \
  -H "Origin: https://api.razorpay.com" \
  -d '{
    "shopify_checkout_id": "gid://shopify/Cart/ashgad?key=abasab",
    "ga_id": "GA1.1.xxxxxxx.xxxxxxxx",
    "fb_analytics": {
      "external_id": "unique_fb_external_id",
      "fbp": "fb.1.xxxxxxx.xxxxxxxx",
      "fbc": "",
      "event_source_url": "https://your-store.com/"
    },
    "utm_parameters": {
      "landing_page_url": "https://your-store.com/",
      "user_agent": "Mozilla/5.0 (Linux; Android 12; SM-G991B)...",
      "utm_campaign": "feeding_bottle_sp",
      "utm_content": "ct", 
      "utm_medium": "product_sync",
      "utm_source": "google"
    },
    "analytics": {
      "fb_analytics": {
        "external_id": "unique_fb_external_id",
        "fbp": "fb.1.xxxxxxx.xxxxxxxx",
        "fbc": ""
      },
      "ga4": {
        "session_ids": {
          "_ga_XXXXXXXXXX": "GS1.1.xxxxxxxx.x.x.x.x.x"
        },
        "client_id": "GA1.1.xxxxxxxx.xxxxxxxx"
      },
      "google_ads": {
        "gclid": "",
        "wbraid": "",
        "gbraid": ""
      },
      "source_url": "https://your-store.com/"
    }
  }'
```json: Response
{
  "preferences": null,
  "order_id": "order_EKwxwAgItmmXdp"
}

// In your _app.js or specific page component
import Script from 'next/script';

export default function App({ Component, pageProps }) {
return (
    <>
    
    
    
);
}

// In your checkout component
import { useEffect } from 'react';

useEffect(() => {
const script = document.createElement('script');
script.src = 'https://checkout.razorpay.com/v1/magic-checkout.js';
script.async = true;
document.body.appendChild(script);

return () => {
    document.body.removeChild(script);
};
}, []);

const openMagicCheckout = () => {
  const options = {
    key: 'rzp_live_XXXXXX', // Enter the Key id generated from the Dashboard
    name: 'Acme Corp', // Your business name
    order_id: 'order_EKwxwAgItmmXdp', // Order id from Step 2
    show_coupons: true, // default true; false if coupon widget should be hidden
    prefill: {
      name: 'Gaurav Kumar',
      email: 'gauravkumar@example.com',
      contact: '9000090000',
      coupon_code: 'MY_COUPON_20', // Coupon from your cart to auto-apply
    },
    handler: function (response) {
      // Handle successful payment
      // response.razorpay_payment_id
      // response.razorpay_order_id
      // response.razorpay_signature
      
      // Call Complete Checkout API (Step 5)
      completeCheckout(response);
    },
    modal: {
      ondismiss: function () {
        // Handle checkout modal close
        console.log('Checkout modal closed');
      },
    },
  };
  const rzp = new window.Razorpay(options);
  rzp.open();
};

curl -X POST https://api.razorpay.com/v1/1cc/shopify/complete?key_id=rzp_live_XXXXXX \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -d '{
    "razorpay_payment_id": "pay_Rk3b76fSqXXXXX",
    "razorpay_order_id": "order_Rk3UmCXXW5XXXX"
  }'
```json: Response
{
  "id": 65157213390123,
  "order_id": "#32697",
  "payment_id": "pay_Rk3b76fSqXXXXX",
  "payment_method": "netbanking",
  "payment_currency": "INR",
  "total_amount": 659430,
  "total_tax": "543.91",
  "shipping_fee": 700,
  "cod_fee": 0,
  "promotions": [
    {
      "reference_id": "Auto Order Amount Discount",
      "code": "Auto Order Amount Discount",
      "type": "automatic",
      "value": 100000,
      "source": "shopify"
    }
  ],
  "shipping_country": "in",
  "customer_details": {
    "email": "gaurav.kumar@example.com",
    "contact": "+919876543210",
    "shipping_address": {
      "name": "Gaurav Kumar",
      "line1": "123 Main Street",
      "city": "Bengaluru",
      "state": "KARNATAKA",
      "zipcode": "560049",
      "country": "in"
    }
  },
  "order_status_url": "https://your-store.myshopify.com/orders/...",
  "is_new_customer": false
}