Add dynamic height to a Coinflow UI component

function PurchaseForm({
  amount,
}: {
  amount: number;
}) {
  const wallet = useLocalWallet();
  const [height, setHeight] = useState<number>(0);
  const handleHeight = useCallback((newHeight: string) => {
    setHeight(Number(newHeight));
  }, []);
  
  return (
    
  <div style={{ height: `${height}px` }} className={`w-full`}>
          <CoinflowPurchase
            wallet={wallet}
            merchantId={"donation-site"}
            env={"prod"}
            connection={wallet.connection}
            onSuccess={() => console.log('Success!')}
            transaction={'Your transaction object here'}
            blockchain={"solana"}
            amount={amount}
            loaderBackground={"#FFFFFF"}
            handleHeightChange={handleHeight}
            chargebackProtectionData={[]}
          />
        </div>
  );
}

Add dynamic height to a Coinflow UI component

Add dynamic height to a Coinflow UI component

Add a React component for your purchase form

Import the wallet object

Create a `height` state variable

Create the handler function

Set function on mount

Add the Coinflow UI Component

Pass in your handleHeightChange function

Set up a dynamic height wrapper

Add a React component for your purchase form

Import the wallet object

Create a `height` state variable

Create the handler function

Set function on mount

Add the Coinflow UI Component

Pass in your handleHeightChange function

Set up a dynamic height wrapper

1	function 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	}

Add a React component for your purchase form

Import the wallet object

Create a height state variable

Create the handler function

Set function on mount

Add the Coinflow UI Component

Pass in your handleHeightChange function

Set up a dynamic height wrapper

Add a React component for your purchase form

Import the wallet object

Create a height state variable

Create the handler function

Set function on mount

Add the Coinflow UI Component

Pass in your handleHeightChange function

Set up a dynamic height wrapper

Create a `height` state variable

Create a `height` state variable