Sell event tickets on a Webflow site

Key facts

• Webflow sites can sell tickets with one Code Embed and the Vihaya Events API.
• The snippet uses a checkout key, which is safe on a public page.
• Buyers pay by UPI, card, net banking or wallet through Razorpay Checkout.
• Every confirmed booking gets a QR ticket by email.
• You keep Webflow’s design; style the form with your own classes.

Step by step

1. 1

   Create a checkout key

   Sign up at Vihaya Events, open Developer → API keys and create a key with the checkout scope. Add your site’s domain under allowed origins. A checkout key can list your events and book tickets, but can never read your attendee list. Use a test key while you build.

2. 2

   Create your event

   Create the event in the Vihaya dashboard, or through the API. Set the price, ticket tiers and seats there. Your site only displays it and takes bookings.

3. 3

   Paste the snippet into a Code Embed

   Add a Code Embed element where the form should appear and paste this. Replace YOUR_CHECKOUT_KEY and YOUR_EVENT_ID. Custom code runs on the published site, so test it there.

   webflow-embed.html

   Copy

   <!-- Vihaya Events booking form. Paste into an HTML / custom code block. -->
   <div id="vihaya-book">
     <input id="vb-name" placeholder="Full name" />
     <input id="vb-email" type="email" placeholder="Email" />
     <input id="vb-phone" type="tel" placeholder="Phone" />
     <button id="vb-pay" type="button">Book ticket</button>
     <p id="vb-msg"></p>
   </div>
   <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
   <script>
   (() => {
     const KEY = 'YOUR_CHECKOUT_KEY';  // a Vihaya checkout key, locked to your domain
     const EVENT_ID = 'YOUR_EVENT_ID';
     const API = 'https://events.vihaya.app/api/v1/events/' + EVENT_ID + '/register';
     const $ = (id) => document.getElementById(id);
     const say = (t) => { $('vb-msg').textContent = t; };
     const post = (body) => fetch(API, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', 'x-api-key': KEY },
       body: JSON.stringify(body),
     }).then((r) => r.json());
   
     $('vb-pay').onclick = async () => {
       const name = $('vb-name').value.trim();
       const email = $('vb-email').value.trim();
       const phone = $('vb-phone').value.trim();
       if (!name || !email) return say('Please enter your name and email.');
       const start = await post({ name, email, phone });
       if (start.error) return say(start.error);
       if (!start.orderId) return say("You're booked. Your ticket is in your email.");
       new Razorpay({
         key: start.key, order_id: start.orderId,
         amount: start.amount, currency: start.currency,
         prefill: { name, email, contact: phone },
         handler: async (p) => {
           const done = await post({
             registrationId: start.registrationId,
             orderId: p.razorpay_order_id,
             paymentId: p.razorpay_payment_id,
             signature: p.razorpay_signature,
           });
           say(done.success ? "Payment received. Your ticket is in your email." : (done.error || 'Something went wrong.'));
         },
       }).open();
     };
   })();
   </script>

4. 4

   Test, then switch to a live key

   With a test key nothing is charged and no email is sent. When the flow works, swap in a live key and publish the event.

Questions

Guides for other tools

• Lovable
• Next.js
• API
• v0
• Bolt
• Replit
• Cursor
• Windsurf
• Claude Code
• GitHub Copilot

More guides

• Sell event tickets on a WordPress site
• Sell event tickets on a Framer, Wix, Squarespace or Carrd site
• Sell event tickets on your website without your own payment gateway
• Vihaya Events for developers