⚛️ React Environment Properties

Developers can use this documentation for environmental settings that determine how the checkout process functions.

This page is for advanced / cryptocurrency-native companies. If that’s not you, head back to the Quickstart for the standard flows.

Core props

PropertyRequiredDescription
merchantIdYThe merchant identifier - the target of the checkout (Contact Coinflow support for this)
envNThe environment - defaults to prod, for testing set it to staging
amountNFix the amount of the purchase
emailNSet the default email to use in email entry fields
onSuccessNSpecify a function to run when the checkout process succeeds
customerInfoNAdditional information about the customer (See example)
chargebackProtectionDataNInformation to formulate the chargeback protection logic (See example)
webhookInfoNProduct or transaction based information that you want transmitted when you receive webhooks regarding the purchase (See example)
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)
disableApplePayNAbility to disable Apple Pay
disableGooglePayNAbility to disable Google Pay
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.
originsNIf rendering the Coinflow component within multiple nested iframes, all ancestors in the chain must be provided as a comma-separated list.

Advanced: Solana integration props

These props are only required when integrating Coinflow with a Solana program. Card and ACH integrations can skip this section.

PropertyRequiredDescription
walletRequired for SolanaThe Solana wallet adapter. If your customers don’t have a wallet, see Wallet Implementation.
blockchainRequired for SolanaThe blockchain for the purchase (solana)
connectionRequired for SolanaThe Solana RPC connection
transactionNTransaction for the user to run which redeems their credits with your on-chain program. Create this transaction just like you would for any other Solana transfer.
partialSignersNKeypairs of partial signers to sign the transaction with — required when initializing new accounts as the new account keypair must sign the transaction.
tokenNThe token to use for the purchase. Defaults to USDC. Currently only supported on Solana.
supportsVersionedTransactionsNInstruct the system that you support versioned transactions
rentNSpecify the Solana network rent (in lamports) to add to the total. (See example)

Usage

Base (card or ACH checkout)

1<CoinflowPurchase
2 merchantId='<YOUR MERCHANT ID>'
3 env='prod|sandbox|staging'
4 amount={100}
5 email={'customer@example.com'}
6 onSuccess={() => console.log('Purchase complete')}
7/>;

Advanced: Solana integration

1import {useWallet, useConnection} from '@solana/wallet-adapter-react';
2const wallet = useWallet();
3const {connection} = useConnection();
4
5<CoinflowPurchase
6 wallet={wallet}
7 merchantId='<YOUR MERCHANT ID>'
8 env='prod|sandbox|staging'
9 connection={connection}
10 blockchain='solana'
11/>;

Advanced: Rent

const rent = { lamports: 100000 }

Webhook Info

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

Chargeback Protection

1const chargebackProtection = [
2 {
3 productName: 'Widget',
4 productType: 'computingContract',
5 quantity: 1,
6 rawProductData: {
7 description: 'Market best widgets'
8 }
9 }
10]

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

1// All the fields are optional
2const custonmerInfo = {
3 name: 'Suzy Customer',
4 verificationId: '123',
5 displayName: 'Suzy',
6 address: '123 Main St'
7 city: 'Somewhereville',
8 state: 'AK',
9 zip: '99546',
10 country: 'US',
11 ip: '172.10.0.1'
12 lat: '58.2005N',
13 lng: '152.2100W'
14}