Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

talel's avatar
Level 16

Forms & API requests (Laravel&Vue&Inertia.js)

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!

0 likes
4 replies
trin's avatar

offtopic.

u use arrow functions

...
then(({ data }) => {
	if (data.success) {
...

and es5 style

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

in one place. it is not are bug or error, but not true. u can always use es6 style

window.addEventListener(
	'message',
	event => {
		if (event.data.success == true) {
			this.successPayment()
		}
	}
)

less code, no need to bind this etc

https://gist.github.com/JacobBennett/7b32b4914311c0ac0f28a1fdc411b9a7

1 like
talel's avatar
Level 16

Thanks for pointing this out!

jlrdw's avatar

Also careful here, there has been problems on some mobile devices with embedded iframes.

Test as you go, not mock but something like browserstack where you do for real test.

talel's avatar
Level 16

Thanks for the heads-up! Checked it with Expose with multiple mobile devices!

Please or to participate in this conversation.