2.0.14 • Published 6 months ago
react-eventbrite-popup-checkout v2.0.14
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.
2.0.13
7 months ago
2.0.14
6 months ago
2.0.12
10 months ago
2.0.11
12 months ago
2.0.7
1 year ago
2.0.9
1 year ago
2.0.10
1 year ago
2.0.8
1 year ago
2.0.5
1 year ago
2.0.4
1 year ago
2.0.6
1 year ago
2.0.3
2 years ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago