如何将令牌从反应发送到我的服务器？

Question

I am currently working on adding stripe payments to my Laravel app - I have the system all working with blate templates but I am now attempting to implement it into a react project I have.

I am searching for the best way to send a token I receive in a response to my server this is what I currently have:

const CheckoutForm = ({intent}) => {
    const stripe = useStripe();
    const elements = useElements();

    const handleSubmit = async (event) => {
        event.preventDefault();

    const { data, setData, transform , post } = useForm({
        //Token here maybe?
    })

        if (!stripe || !elements) {
            return;
        }

        const result = await stripe.confirmCardSetup(intent.client_secret, {
            payment_method: {
                card: elements.getElement(CardElement),
            },
        });

        if (result.error) {
            console.log(result.error.message);
        } else {
            // maybe add: result.setupIntent.payment_method to data?
            // post(route('subscriptions'));
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <CardElement/>
            <Button disabled={!stripe}>
                Pay Now
            </Button>
        </form>
    )
};

I am very new to React so struggling to even google my answer - I am assuming I need an inertia post route as this is how I did it in the blade template application. However, this doesn't work now due to react states not updating in that way?

Basically, I have no idea the best way to get result.setupIntent.payment_method to my server after card setup.

Thanks for your time!

Answer 1

Found a solution using Inertia.visit

...
            Inertia.visit(
                route('subscriptions.start'),
                {
                    method: 'post',
                    data: {
                        token: result.setupIntent.payment_method,
                    }
                }
            );
...