⚛️ React Environment Properties

Environmental settings that determine how the checkout process functions

PropertyRequiredDescription
walletYSet the Solana wallet adapter
blockchainYThe blockchain for the purchase (solana)
merchantIdYThe merchant identifier - the target of the checkout (Contact Coinflow support for this)
connectionYThe Solana connection
envNThe environment - defaults to prod, for testing set it to staging
onSuccessNSpecify a function to run when the checkout process succeeds
transactionNTransaction for the user to run which redeems their credits with your smart contract. Create this transaction just like you would for a normal user who has USDC in their account.
partialSignersNKeypairs of Partial Signers to sign the transaction with, this is necessary when initializing new accounts as the new account Keypair must sign the transaction.
debugTxNSetting this to true will sign the transaction with the wallet, and send the transaction with no preflight checks allowing for easier debug of any issues.
tokenNThe token to use for the purchase. Defaults to USDC. Currently only supported for the Solana Blockchain.
planCodeNWhen a subscription is being purchased, the code of the subscription plan
settlementTypeNThe settlement method to use for the proceeds of a purchase. (Credits, USDC, or Bank)
amountNFix the amount of the purchase
webhookInfoNProduct or transaction based information that you want transmitted when you receive webhooks regarding the purchase (See example)
emailNSet the default email to use in email entry fields
chargebackProtectionDataNInformation to formulate the chargeback protection logic (See example)
disableApplePayNAbility to disable Apple Pay
disableGooglePayNAbility to disable Google Pay
customerInfoNAdditional information about the customer (See example)
supportsVersionedTransactionsNInstruct the system that you support versioned transactions
rentNSpecify the blockchain rent amount to add to the total (See example)

Usage

Base

import {useWallet} from '@solana/wallet-adapter-react';
const wallet = useWallet();
const connection = useConnection();

<CoinflowPurchase wallet={wallet} merchantId='<YOUR MERCHANT ID>' env='prod|sandbox|staging' connection={connection} />;

Webhook Info

// This is only an example - this is merchant defined
const webhookInfo = {
  productId: 'N421',
  code: 'PX8242342',
}

Chargeback Protection

const chargebackProtection = [
  {
    productName: 'Widget',
    productType: 'computingContract',
    quantity: 1,
    rawProductData: {
      description: 'Market best widgets'
    }
  } 
]

The product type settings:

inGameProduct
gameOfSkill
dataStorage
computingResources
sportsTicket
eSportsTicket
musicTicket
conferenceTicket
virtualSportsTicket
virtualESportsTicket
virtualMusicTicket
virtualConferenceTicket
alcohol
DLC
subscription
fundACause
realEstate
computingContract
digitalArt
topUp

The raw product data is optional but can be used to provide additional information to assist in the chargeback protection decision.

Customer Info

// All the fields are optional
const custonmerInfo = {
  name: 'Suzy Customer',
  verificationId: '123',
  displayName: 'Suzy',
  address: '123 Main St'
  city: 'Somewhereville',
  state: 'AK',
  zip: '99546',
  country: 'US',
  ip: '172.10.0.1'
  lat: '58.2005N',
  lng: '152.2100W'
}

Rent

const rent = { lamports: 100000 }