Recipes

Add dynamic height to a Coinflow UI component

React
1function PurchaseForm({
2  amount,
3}: {
4  amount: number;
5}) {
6  const wallet = useLocalWallet();
7
8  const [height, setHeight] = useState<number>(0);
9
10  const handleHeight = useCallback((newHeight: string) => {
11    setHeight(Number(newHeight));
12  }, []);
13  
14  return (
15    
16  <div style={{ height: `${height}px` }} className={`w-full`}>
17          <CoinflowPurchase
18            wallet={wallet}
19            merchantId={"donation-site"}
20            env={"prod"}
21            connection={wallet.connection}
22            onSuccess={() => console.log('Success!')}
23            transaction={'Your transaction object here'}
24            blockchain={"solana"}
25            amount={amount}
26            loaderBackground={"#FFFFFF"}
27            handleHeightChange={handleHeight}
28            chargebackProtectionData={[]}
29          />
30        </div>
31  );
32}
Response Example
1{"success":true}

Add a React component for your purchase form

I’ll call this one

Something went wrong!
. It was be any react component.

Import the wallet object

This will be passed to Coinflow later on

Create a height state variable

You can set this to anything initially. I’m using 0 to start.

Create the handler function

As another state variable, initialize the function that will change the Coinflow UI height.

Set function on mount

Copy this code to set the handleHeightChange function. This will render the Coinflow UI.

Add the Coinflow UI Component

In this case, I’ll use

Something went wrong!
, but you can use any other Coinflow UI component.

Pass in your handleHeightChange function

Add your function to the

Something went wrong!
component

Set up a dynamic height wrapper

Use a style object to configure dynamic height using your state variable height