Winter - Sell NFTs via credit card
  • Get started
    • Get Started
      • Project Testing
      • Push to Production
    • Marketplaces
    • How do I get paid?
    • Payment methods & locations
      • Foreign Currencies
      • Apple Pay
    • Whitelists/Allowlists
  • Marketplace integrations
    • Intro
    • Implementation strategy
      • Directly with smart contracts
      • Aggregation APIs
      • APIs to build a transaction
      • Build and submit a transaction
  • Primary Mint Smart Contracts
    • 🚨Requirements
    • ETH, Polygon, and EVM
      • Multi-contract
      • Drop types we support
    • Solana
    • Crypto pricing
  • Front End Integration
    • Customization
    • Pre-fill (email, wallet, etc)
    • React
    • React (Marketplace)
    • Plain HTML
    • Post-purchase
    • CSS customization
  • Platform API
    • Intro (read this first!)
    • testmode -> livemode
    • /createProject
    • /updateProject
    • /deleteProject
    • /updateWhitelist
    • /getProjects
  • Wallet API Docs
    • Intro
    • /getNFTs
    • /transferNFT
  • NFT Claim API
    • Intro
    • /mintNFT
    • /mintFreeNFT
    • /transferNFT
  • Cross-chain payments
    • Intro
    • Integration
Powered by GitBook
On this page
  1. Front End Integration

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 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)"
    }}
/>
PreviousReactNextPlain HTML

Last updated 2 years ago