Install our React component for marketplaces with this command
npm i @usewinter/checkout
🚨Note: Depending on your marketplace's smart contracts, this integration may differ. Please contact us at marketplaces@usewinter.com and we can help you!
Then pass in the contract address and token ID! Copy the code snippet below!
<WinterCheckout
showModal={showWinterModal}
// optional
walletAddress={account.isConnected ? account.address : undefined}
// optional
email={customersEmail}
contractAddress={clickedContractAddress}
tokenId={clickedTokenId}
// This will be the domain of the marketplace you want to pull the orders from
orderSource={'opensea.io','x2y2.io', or 'looksrare.org' or any other evm marketplace}
// This will be the domain of the marketplace you want the order to be fulfilled on
fillSource={'opensea.io','x2y2.io', or 'looksrare.org' or any other evm marketplace}
production={process.env.WINTER_ENV == 'production' ? true : false }
// Language - supports spanish, chinese, chineseT (chinese traditional), japanese, korean, french
language={'chinese'}
onClose={() => {
setShowWinterModal(false)
}}
// If you want to customize the css of the checkout widget
appearance={{
leftBackgroundColor: "#131317",
rightBackgroundColor: "#22222d",
buttonTextColor: "black",
buttonColor: "#f59e0c",
primaryTextColor: "white",
secondaryTextColor: "#85868a",
fontFamily: "Montserrat,sans-serif",
buttonAndInputBoxShadow: "0 3px 6px 1px rgba(217, 119, 6, 0.2)",
buttonAndInputFocusBoxShadow: "0 3px 6px 1px rgba(217, 119, 6, 0.8)",
quantityButtonPlusMinusSvgFilter: "invert(100%) sepia(100%) saturate(1%) hue-rotate(135deg) brightness(105%) contrast(101%)",
inputBackgroundColor: "#131317",
mintingClipLoaderColor: "white",
borderColor: "rgba(245,158,11)"
}}
/>
