Sell event tickets on a WordPress site

Key facts

• WordPress sites can sell tickets with one Custom HTML block.
• No WooCommerce, ticketing plugin or payment gateway plugin is required.
• The snippet uses a checkout key, which is safe on a public page.
• Every confirmed booking gets a QR ticket by email.
• Developers can also use the official PHP SDK: composer require vihaya/events.

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 Custom HTML block

   In the block editor add a Custom HTML block and paste this. Replace YOUR_CHECKOUT_KEY and YOUR_EVENT_ID. Only administrators can save script tags on most WordPress setups.

   wordpress-block.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 Webflow 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