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!