Tailwind CSS Razorpay Checkout Form for Vue 3

<script setup>
import { ref } from 'vue';

// Razorpay Standard Checkout — https://razorpay.com/docs/payments/payment-gateway/web-integration/standard/
const RAZORPAY_KEY_ID = 'rzp_test_YOUR_KEY_ID'; // public key only — the secret stays on your server

function loadRazorpay() {
  if (window.Razorpay) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = 'https://checkout.razorpay.com/v1/checkout.js';
    s.onload = resolve;
    s.onerror = () => reject(new Error('Razorpay SDK failed to load'));
    document.head.appendChild(s);
  });
}

async function payWithRazorpay() {
  await loadRazorpay();
  // 1) Server creates the order (amount in paise) — never trust a client-side amount.
  const order = await fetch('/api/razorpay/order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ plan: 'pro-annual' })
  }).then((r) => r.json());
  // 2) Open Checkout for that order.
  const rzp = new window.Razorpay({
    key: RAZORPAY_KEY_ID,
    order_id: order.id,
    amount: order.amount,
    currency: order.currency,
    name: 'Acme Inc.',
    description: 'Pro plan — annual',
    prefill: {
      email: document.getElementById('rp-email')?.value,
      contact: document.getElementById('rp-phone')?.value
    },
    theme: { color: '#4f46e5' },
    // 3) Server verifies razorpay_signature before fulfilling.
    handler: (res) =>
      fetch('/api/razorpay/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(res) })
  });
  rzp.on('payment.failed', (res) => console.error(res.error));
  rzp.open();
}

const method = ref("upi");
</script>

<template>
  <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-6">
    <div>
      <div class="h-full p-6 bg-white border border-slate-200 shadow-sm rounded-xl">
        <h2 class="text-lg font-semibold text-slate-900">Order summary</h2>
        <div class="mt-4 flex items-start justify-between gap-4">
          <div>
            <p class="font-medium text-slate-900">Pro plan · annual</p>
            <p class="text-sm text-slate-500">Billed once, renews yearly</p>
          </div>
          <p class="font-medium text-slate-900">₹8,474</p>
        </div>
        <div class="mt-6 pt-4 flex flex-col gap-2 text-sm border-t border-slate-200">
          <div class="flex justify-between text-slate-500"><span>Subtotal</span><span>₹8,474</span></div>
          <div class="flex justify-between text-slate-500"><span>GST (18%)</span><span>₹1,525</span></div>
          <div class="flex justify-between text-base font-semibold text-slate-900"><span>Total</span><span>₹9,999</span></div>
        </div>
        <p class="mt-6 text-xs text-slate-500">Secured by Razorpay · PCI DSS compliant</p>
      </div>
    </div>
    <div>
      <form class="h-full p-6 flex flex-col gap-4 bg-white border border-slate-200 shadow-sm rounded-xl">
        <h2 class="text-lg font-semibold text-slate-900">Payment details</h2>
        <div>
          <label for="rp-email" class="block mb-1.5 text-sm font-medium text-slate-700">Email</label>
          <input id="rp-email" type="email" autocomplete="email" placeholder="you@company.com" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
        </div>
        <div>
          <label for="rp-phone" class="block mb-1.5 text-sm font-medium text-slate-700">Mobile number</label>
          <input id="rp-phone" type="tel" inputmode="tel" autocomplete="tel" placeholder="+91 98765 43210" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
        </div>
        <div>
          <p class="block mb-1.5 text-sm font-medium text-slate-700">Payment method</p>
          <div class="flex flex-wrap gap-2" role="group" aria-label="Payment method">
            <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" @click="method = 'upi'" :aria-pressed="method === 'upi'">UPI</button>
            <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" @click="method = 'card'" :aria-pressed="method === 'card'">Card</button>
            <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" @click="method = 'netbanking'" :aria-pressed="method === 'netbanking'">Netbanking</button>
          </div>
          <p class="mt-2 text-xs text-slate-500" v-show="method === 'upi'">Pay with any UPI app — GPay, PhonePe, Paytm or BHIM.</p>
          <p class="mt-2 text-xs text-slate-500" v-show="method === 'card'">Visa, Mastercard, RuPay and Amex credit or debit cards.</p>
          <p class="mt-2 text-xs text-slate-500" v-show="method === 'netbanking'">All major Indian banks supported.</p>
        </div>
        <button type="button" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[#4f46e5] hover:bg-[#433cc3] text-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white w-full" @click="payWithRazorpay($event)">Pay ₹9,999</button>
      </form>
    </div>
  </div>
</template>