React Eventbrite Checkout

A React component that loads and wraps Eventbrite's checkout widgets.

Install

If using NPM:

$ npm install react-eventbrite-popup-checkout --save

If using Yarn:

$ yarn add react-eventbrite-popup-checkout

Usage

Note: In-app checkout will only trigger when your app is served with HTTPS. Otherwise, the component directs the user to Eventbrite's website to complete the purchase.

Modal Example

Create a button that triggers a checkout modal.

import React from 'react';
import useEventbrite from 'react-eventbrite-popup-checkout';

const App = () => {
  const handleOrderCompleted = React.useCallback(() => {
    console.log('Order was completed successfully');
  }, []);
  const modalButtonCheckout = useEventbrite({
    eventId: 'YOUR-EB-EVENT-ID',
    modal: true,
    onOrderComplete: handleOrderCompleted,
  });
  
  return (
    <div id="my-app">
      {/* guard for null - resolves when Eventbrite loads */}
      {modalButtonCheckout && (
        <button id={modalButtonCheckout.id} type="button">
          Modal Checkout
        </button>
      )}
    </div>
  )
};

Embedded iFrame Example

Embed an iFrame checkout.

import React from 'react';
import useEventbrite from 'react-eventbrite-popup-checkout';

const App = () => {
  const handleOrderCompleted = React.useCallback(() => {
    console.log('Order was completed successfully');
  }, []);
  const iframeCheckout = useEventbrite({
    eventId: 'YOUR-EB-EVENT-ID',
    modal: false,
    onOrderComplete: handleOrderCompleted,
    iFrameHeight: 500, // optional
    iFrameAutoAdapt: 100, // optional - The widget's viewport percentage (between 75-100)
  });
  
  return (
    <div id="my-app">
      {/* guard for null - resolves when Eventbrite loads */}
      {iframeCheckout && (
        <div id={iframeCheckout.id} />
      )}
    </div>
  )
};

Auto Apply Promo Code

You can pass promoCode to the useEventbrite hook to automatically apply a promo code during checkout.