React

Example

See here for an example React integration.

Steps

npm i @usewinter/checkout
OR
yarn add @usewinter/checkout
Use the component in your React app
import { WinterCheckout } from '@usewinter/checkout';
<WinterCheckout
projectId={YOUR_PROJECT_ID}
production={false}
showModal={showWinter}
// testnet need when production is false
testnet={'goerli' or 'rinkeby'}
// pass in a function to be called when a successful purchase happens
onSuccess={() => setParty(true)}
// pass in a function to be called when the modal is closed
onClose={() => setShowWinter(false)}
// Extra mint params are params besides 'address, amount, proof'
// The key needs to exactly match the name of the param provided to Winter
// The value will be passed in as the param
extraMintParams={{tier: 'diamond', type: 'super-rare'}}
// Price function params
// The key needs to exactly match the name of the param provided to Winter
// The value will be passed in as the param
priceFunctionParams={{tier: 'gold', type: 'rare'}}
/>
ProjectId - Get this from the Winter team!
Production - false while testing, true when you go live
showModal - this variable toggles true or false depending on the state of your "Pay with Card" button
Make sure to handle the close modal and post purchase properly. You can find the details here post purchase.
Copy link
On this page
Example
Steps