useCoralStripe

A React hook to provide styling for a Stripe form using Coral, based on the Stripe Elements Appearance API .

Import


import { useCoralStripe } from '@krakentech/coral';

Basic usage

Payment.tsx


import { Elements } from '@stripe/react-stripe-js';
import ElementsForm from 'components/ElementsForm';
 
import { Card, Container, useCoralStripe } from '@krakentech/coral';
 
const { appearance, fonts } = useCoralStripe();
 
<Container maxWidthPreset="md" marginX="auto">
    <Card theme="base100" borderless>
        <Elements options={{ appearance, fonts }}>
            <ElementsForm />
        </Elements>
    </Card>
</Container>;

ElementsForm.tsx


import { PaymentElement } from '@stripe/react-stripe-js';
import { Button, Stack } from '@krakentech/coral';
 
<form method="post">
    <Stack flexDirection="column" gap="lg">
        <PaymentElement />
        <Button color="secondary500" size="large" type="submit" fullWidth>
            Pay now
        </Button>
    </Stack>
</form>;

The code above will produce a Stripe form that looks like this:

Usage with Stripe API

In the example above we have only shown the display side of the work, as that is all Coral is concerned with, but you will still need to implement the Stripe API to render the form.

If you would like to see a working example with Stripe loading correctly, please visit our with-stripe app to see more.