inertia.js get response message from Interia.post()

Question

I'm using Inertia.js React.js and Stripe a section of the website has a form that will allow contributions using stripe. I've got it working but struggling to get a message back if the payment was successful

This is my form component

export default () => {
    const { data, setData, processing, errors } = useForm<FormProps>({
        email: "",
        name: "",
        amount: "",
    });
    const stripe = useStripe();
    const elements = useElements();

    const handleSubmit = async (e: React.SyntheticEvent) => {
        e.preventDefault();

        const { errors, paymentMethod } = await stripe?.createPaymentMethod({
            type: "card",
            card: elements?.getElement(CardElement),
        });

        if (!errors) {
            const { id } = paymentMethod;

            try {
                const response = Inertia.post("/", {
                    name: data.name,
                    email: data.email,
                    amount: data.amount,
                    paymentId: id,
                });
                console.log(response, " response");
            } catch (errors) {
                console.log(errors, " Catch Errors");
            }
        }
    };
    return (
        <form onSubmit={handleSubmit} noValidate>
            <Errors errors={errors} />
            <Row>
                <Input
                    type="email"
                    name="email"
                    placeholder="Email Address"
                    required={true}
                    value={data.email}
                    onChange={(e) => setData("email", e.target.value)}
                />
                <Input
                    type="text"
                    name="name"
                    placeholder="Name on Card"
                    required={true}
                    value={data.name}
                    onChange={(e) => setData("name", e.target.value)}
                />
            </Row>
            <Row>
                <Input
                    type="number"
                    name="amount"
                    placeholder="£"
                    required={true}
                    css={{ width: "80px" }}
                    value={data.amount}
                    onChange={(e) => setData("amount", e.target.value)}
                />

                <CardElement
                    className="card"
                    options={{
                        style: {
                            base: {
                                backgroundColor: "white",
                            },
                        },
                    }}
                />
            </Row>
            <Row>
                <Button
                    processing={processing}
                    type={"submit"}
                    color={"secondary"}
                >
                    {processing ? "Sending..." : "Contribute"}
                </Button>
            </Row>
        </form>
    );
}; 

The console.log(response) just returns undefined

My contribution controller

class ContributionController extends Controller
{
    public function processContribution(Request $request)
    {

        $email = $request->get('email');
        $amount = $request->get('amount') * 100;
        $paymentMethod = $request->get('paymentId');

        $request->validate([
            'email' => 'required',
            'name' => 'required',
            'amount' => 'required',
        ]);

        try {

            (new User)->charge($amount, $paymentMethod, [
                'currency' => 'gbp',
                'receipt_email' => $email
            ]);
            return Inertia('Home', [
                'message' => 'Your contribution was successful, thank you.',
            ]);
        } catch (Exception $e) {

            return Inertia('Home', [
                'errors' => $e,
            ]);
        }
    }
}

Any help would be great, I was hoping I could pass and array of data into the return on my controller and access the message that way but I can't seem to get it.

Answer 1

Not sure if it's the correct way to do this but I discovered if I changed my post request from

Inertia.post("/", {
    preserveScroll: true,
});

to

post("/", {
    preserveScroll: true,
});

the message is displayed when the form is submitted.