Chakra UI Stripe Checkout Button

There are 2 types for the checkout buttons. While one of them is the standard checkout button, the other one is suited to be used for a dark or even highlighted option.

page.tsx

    <Button
        py="20px"
        px="16px"
        fontSize="sm"  
        variant="checkout" 
        mx="auto"
        borderRadius="45px"
        w="100%"
        h="54px"
        onClick={() => handleCheckout(price)}
    >
        {subscription ? 'Manage' : 'Get started now'}
        <Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
    </Button>

page.tsx

    <Button
        py="20px"
        px="16px"
        fontSize="sm"
        variant="checkoutDark" 
        mx="auto"
        borderRadius="45px"
        w="100%"
        h="54px"
        onClick={() => handleCheckout(price)}
    >
        {subscription ? 'Manage' : 'Get started now'}
        <Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
    </Button>

Chakra UI Chat AI Chakra UI Dashboard Tables