Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 Razorpay Checkout Form for Vanilla JS — Glassmorphism

A production-ready glassmorphism razorpay checkout form: a two-column checkout with an order summary (subtotal, GST, total in INR), contact fields, a UPI / card / netbanking selector and a pay button that opens Razorpay Checkout. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vanilla JS code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<div class="w-100 mw-4xl row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="h-100 p-4 glass shadow-lg rounded-3">
      <h2 class="fs-5 fw-semibold text-body-emphasis">Order summary</h2>
      <div class="mt-3 d-flex align-items-start justify-content-between gap-3">
        <div>
          <p class="fw-medium text-body-emphasis">Pro plan · annual</p>
          <p class="small text-body-secondary">Billed once, renews yearly</p>
        </div>
        <p class="fw-medium text-body-emphasis">₹8,474</p>
      </div>
      <div class="mt-4 pt-3 d-flex flex-column gap-2 small border-top">
        <div class="d-flex justify-content-between text-body-secondary"><span>Subtotal</span><span>₹8,474</span></div>
        <div class="d-flex justify-content-between text-body-secondary"><span>GST (18%)</span><span>₹1,525</span></div>
        <div class="d-flex justify-content-between fw-semibold text-body-emphasis"><span>Total</span><span>₹9,999</span></div>
      </div>
      <p class="mt-4 small text-body-secondary">Secured by Razorpay · PCI DSS compliant</p>
    </div>
  </div>
  <div class="col">
    <form class="h-100 p-4 d-flex flex-column gap-3 glass shadow-lg rounded-3">
      <h2 class="fs-5 fw-semibold text-body-emphasis">Payment details</h2>
      <div>
        <label for="rp-email" class="form-label small fw-medium">Email</label>
        <input id="rp-email" type="email" autocomplete="email" placeholder="you@company.com" class="form-control rounded-2" required>
      </div>
      <div>
        <label for="rp-phone" class="form-label small fw-medium">Mobile number</label>
        <input id="rp-phone" type="tel" inputmode="tel" autocomplete="tel" placeholder="+91 98765 43210" class="form-control rounded-2" required>
      </div>
      <div>
        <p class="form-label small fw-medium">Payment method</p>
        <div class="d-flex flex-wrap gap-2" role="group" aria-label="Payment method">
          <button type="button" class="btn btn-outline-secondary choice fw-semibold rounded-2" data-set="method:upi" data-pressed="method:upi" aria-pressed="true">UPI</button>
          <button type="button" class="btn btn-outline-secondary choice fw-semibold rounded-2" data-set="method:card" data-pressed="method:card" aria-pressed="false">Card</button>
          <button type="button" class="btn btn-outline-secondary choice fw-semibold rounded-2" data-set="method:netbanking" data-pressed="method:netbanking" aria-pressed="false">Netbanking</button>
        </div>
        <p class="mt-2 small text-body-secondary" data-when="method:upi">Pay with any UPI app — GPay, PhonePe, Paytm or BHIM.</p>
        <p class="mt-2 small text-body-secondary" data-when="method:card" hidden>Visa, Mastercard, RuPay and Amex credit or debit cards.</p>
        <p class="mt-2 small text-body-secondary" data-when="method:netbanking" hidden>All major Indian banks supported.</p>
      </div>
      <button type="button" class="btn btn-brand fw-semibold rounded-2 w-100" data-call="payWithRazorpay">Pay ₹9,999</button>
    </form>
  </div>
</div>

<script>
  (() => {
    // 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 state = { method: "upi" };
    const actions = { payWithRazorpay };
    const pair = (s) => s.split(':');
    const sync = () => {
      document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
      document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
      document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
      document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
      document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
    };
    document.addEventListener('click', (e) => {
      const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
      if (!t) return;
      const { toggle, open, close, set, call } = t.dataset;
      if (call) actions[call]?.(e);
      if (toggle) state[toggle] = !state[toggle];
      if (open) state[open] = true;
      if (close) state[close] = false;
      if (set) { const [k, v] = pair(set); state[k] = v; }
      sync();
    });
    sync();
  })();
</script>

More Bootstrap components for Vanilla JS

All components →

Free Bootstrap 5 Razorpay Checkout Form for Vanilla JS — Glassmorphism by pGento

Install Bootstrap 5 for Vanilla JS

Include Bootstrap 5.3 from the CDN (or npm install bootstrap) and the generated theme.css:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css">

Use the razorpay checkout form in Vanilla JS

Paste the markup where the component should appear. The small inline <script> wires up the interactive state with one delegated click listener — no framework needed.

Connecting the form to Razorpay

  1. Create an order on your server with the Orders API using your key_secret and return { id, amount, currency } from /api/razorpay/order.
  2. Replace rzp_test_YOUR_KEY_ID with your public key_id (test keys first).
  3. In /api/razorpay/verify, compute HMAC_SHA256(order_id + "|" + payment_id, key_secret) and compare it with razorpay_signature before marking the order paid. Also handle the payment.captured webhook as the source of truth.

The preview never contacts Razorpay — clicking “Pay” there only shows where checkout would open.

Accessibility & customization

Payment methods are toggle buttons with aria-pressed, totals are real text (not images), the phone field uses inputmode="tel" and autocomplete tokens, and the pay button states the exact amount.

Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryPlain HTML + optional vanilla JS
Interactive statemethod
Dark modeYes — toggle in the editor
StyleGlassmorphism (backdrop blur)

Frequently asked questions

How do I install this Bootstrap razorpay checkout form in Vanilla JS?
Create a web page, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the razorpay checkout form?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the razorpay checkout form support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the razorpay checkout form accessible?
Payment methods are toggle buttons with aria-pressed, totals are real text (not images), the phone field uses inputmode="tel" and autocomplete tokens, and the pay button states the exact amount.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Bootstrap 5 Razorpay Checkout Form for Vanilla JS — Glassmorphism

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.