Forms & API requests (Laravel&Vue)

[talelmishali]

Hello!
Wondering how others in the community utilizing $inertia.form for an API request, I'll describe my use case and how I work with it at the moment.

I have a checkout page where a user submits a form (new order), the controller generates a payment link, and returns it as part of data object. Upon success, opening a modal with an iframe where the src attribute is the generated payment link. At the moment I am using axios.

Checkout.vue

axios
        .post('endpoint', this.form)
        .then(({ data }) => {
            if (data.success) {
                this.showLoadingBar = false

                this.order_id = data.data.order_id

                this.paymentUrl = data.data.url

                this.showPaymentModal = true

                window.addEventListener(
                    'message',
                    function (event) {
                        if (event.data.success == true) {
                            this.successPayment()
                        }
                    }.bind(this)
                )
            }
        })
        .catch((error) => {
            this.showLoadingBar = false

            this.$page.props.errors = error.response.data.errors
        })

ApiOrderController.php

    /**
     * Store a newly created resource in storage.
     *
     * @param  \App\Http\Requests\OrderRequest $request
     * @return \App\Models\Store\Order
     */
    public function store(OrderRequest $request)
    {
        try {
            $order = $this->orderService->create($request);

            $peymentLink = $this->paymentService->generatePayment($order, new PaymentService());

            $response = [
                'success' => true,
                'code' => 201,
                'data' => [
                    'url' => $peymentLink,
                    'order_id' => $order->id
                ],
               'error' => []
            ];
        } catch (\Throwable $th) {
            $response = [
                'success' => false,
                'code' => 406,
                'data' => [],
                'error' => [
                    'message' => $th->getMessage(),
                ],
            ];
        }

        return new JsonResponse($response, $response['code']);
}

How would you go about it using Inertia without axios both on the server-side and the client-side?

Thanks!