I'm Trying to build a headless shop on vue.js. Everything is going fine so far. The only part which i can't find any documentation is how to handle redirects after 3D Secure payments.
If i'm submitting the "/actions/commerce/payments/pay" method with ajax i will get the redirect url for 3D Secure Auth back and can successfully confirm or deny the payment but im always gettting redirected to the root of my Page. Is there a way to submit the desired locations for successful and denied payments with ajax?
return $this->asJson([
// Loads of other stuff
'checkoutRedirect' => Craft::$app->getSecurity()->hashData('/order?number={number}'),
'checkoutCancel' => Craft::$app->getSecurity()->hashData('/checkout#pay')
Then I used that in my Vue component when posting the payment to Commerce. I had to use stripe.createPaymentMethod() first to get the payment method ID, and then send that in the commerce/payments/pay request in the paymentMethodId param, as well as gatewayId and then redirect and cancelUrl populated from my state API.
I am having the same issue as OP, but the proposed solution by @mildlygeeky does not seem to work for me. I have added the event listener:
Event::on(
Order::class,
Order::EVENT_BEFORE_COMPLETE_ORDER,
function (Event $event) {
$order = $event->sender;
$order->cancelUrl = UrlHelper::url("/payment-complete");
$order->returnUrl = UrlHelper::url("/payment-complete");
But once I confirm the payment in the Stripe iFrame, I still get redirect to /index.php when clicking on Return to merchant. Changing this line manually solves the problem, but obviously is not a solution.
