Add Dynamic Height to Apple Pay Button

JavaScript

1 import {CoinflowApplePayButton} from '@coinflowlabs/react';
2 
3 
4 function App() {
5   const [height, setHeight] = useState<number>(0);
6 
7   const handleHeight = useCallback((newHeight: string) => {
8     setHeight(Number(newHeight));
9   }, []);
10 
11   return (
12     <div style={{height: `${height}px`}} className="w-full">
13       <CoinflowApplePayButton
14         env={'sandbox | prod'}
15         wallet={wallet} 
16         blockchain={'solana | eth | base | polygon | arbitrum'}
17         merchantId={'myMerchantId'}
18         handleHeightChange={handleHeight}
19         amount={amount}
20         color={'black'} // Backgroung color of apple pay button
21       />
22     </div>
23   );
24 }
25 
26 export default App;

Response Example

1 {"success":true}

Install Coinflow Package

Run npm i @coinflowlabs/react and import the CoinflowApplePayButton component.

Handle Height Changes

Initialize the height state and create a handler to dynamically update the height of the button when the size changes.

Render CoinflowApplePayButton

Pass the required props such as wallet, blockchain, merchantId, and amount. The button will dynamically adjust its height with the handleHeightChange function.

1	import {CoinflowApplePayButton} from '@coinflowlabs/react';
2
3
4	function App() {
5	const [height, setHeight] = useState<number>(0);
6
7	const handleHeight = useCallback((newHeight: string) => {
8	setHeight(Number(newHeight));
9	}, []);
10
11	return (
12	<div style={{height: `${height}px`}} className="w-full">
13	<CoinflowApplePayButton
14	env={'sandbox \| prod'}
15	wallet={wallet}
16	blockchain={'solana \| eth \| base \| polygon \| arbitrum'}
17	merchantId={'myMerchantId'}
18	handleHeightChange={handleHeight}
19	amount={amount}
20	color={'black'} // Backgroung color of apple pay button
21	/>
22	</div>
23	);
24	}
25
26	export default App;