BigCommerce EmbeddedCheckout component

EmbeddedCheckout.tsx

import React from 'react';
import axios from 'axios';
import { embedCheckout } from '@bigcommerce/checkout-sdk';
import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart';
import { nanoid } from 'nanoid';

export default function EmbeddedCheckout(props: { containerId?: string }) {
    const { data } = useCart();
    const [checkoutLoaded, setCheckoutLoaded] = React.useState(false);

    const containerId = props.containerId || nanoid();

    React.useEffect(() => {
        const handleEmbed = async () => {
            const resp = await axios.post('/api/embedded-checkout', { cartId: data?.id });
            const url = resp.data.data.embedded_checkout_url;

            try {
                await embedCheckout({
                    containerId,
                    url,
                    onError: (err) => console.error(err),
                    onFrameError: (err) => console.error(err),
                });
                setCheckoutLoaded(true);
            } catch (err) {
                console.error(err);
            }
        };

        if (data && !checkoutLoaded) handleEmbed();
    }, [data]);

    return <div id={containerId} />;
}