React (Marketplace)

Insert this typescript component
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 [email protected] 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)"
    }}
/>
Front End Integration - Previous
React
Next - Front End Integration
Plain HTML
Last modified 3mo ago