3D secure fales to load options

The button 'Proceed to 3D Secure' simply has a link to the acquiring bank's 3D secure.
The URL for this link is provided by Opayo.

First of all we need to check/rule out issues with the URL.

You should be able to find the URL that Opayo instructs us to present by looking at the log message that contains 'transaction request response received' like below. In the test environment Opayo instructs us to present URL "https://test.sagepay.com/3ds-simulator/html_challenge" to the user.

[Wed, 12/13/2023 - 15:38] [Info] [commerce_opayo_pi] [client: 192.168.25.20, Anonymous] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: order 141 (uid: c9ec659d-c43e-47f2-88d7-5f94121ea0a9), mode: test, transaction request response received: https://pi-test.sagepay.com/api/v1/transactions/, response payload: {"statusCode":"2021","statusDetail":"Please redirect your customer to the ACSURL to complete the 3DS Transaction","transactionId":"EA8B43FD-5B8F-EB00-B519-5008C82F5699","acsUrl":"https://test.sagepay.com/3ds-simulator/html_challenge","acsTransId":"21b3a4fe-2ad6-4843-82d7-f15057aff810","dsTransId":"96f3bfff-578f-4a40-9a9a-de4e67a18e2e","status":"3DAuth","cReq":"ewogICJtZXNzYWdlVHlwZSIgOiAiQ1JlcSIsCiAgIm1lc3NhZ2VWZXJzaW9uIiA6ICIyLjIuMCIsCiAgInRocmVlRFNTZXJ2ZXJUcmFuc0lEIiA6ICI2ZGJiMmI5NC02YTZjLTRkMDAtOGRiNy05ZjAzYWE4OThiNTAiLAogICJhY3NUcmFuc0lEIiA6ICIyMWIzYTRmZS0yYWQ2LTQ4NDMtODJkNy1mMTUwNTdhZmY4MTAiLAogICJjaGFsbGVuZ2VXaW5kb3dTaXplIiA6ICIwMSIKfQ"}
[Wed, 12/13/2023 - 15:38] [Info] [commerce_payment] [client: 192.168.25.20, Anonymous] Opayo3DSReview::buildPaneForm: convert transaction ID EA8B43FD-5B8F-EB00-B519-5008C82F5699 to BASE64: RUE4QjQzRkQtNUI4Ri1FQjAwLUI1MTktNTAwOEM4MkY1Njk5 for 3DS challenge (order 141, uid: c9ec659d-c43e-47f2-88d7-5f94121ea0a9)

In 'live' this will be a URL associated with the customer's card bank.
First of all it's probably worth double-checking the URL and what actually gets sent if you press it. Obviously Chrome/Firefox 'Developer tools' is your friend here.

If there's an issue with the URL or the payload then I need some more details.

If the issue is with the bank-supplied URL or what happens once you press it then you may have to get Opayo involved: once the
button is pressed it's out of the control of the payment gateway until we get a redirect to
the /commerce_opayo_pi/3dSecure/{order} URL (which I assume never happened when the fault occured)

By the way, there's an issue with the current code where the 'payment gateway id' has been hardcoded in a few places.
I'm obviously refactoring to sort this out at the moment.
This could be the cause, depending on where your payment attempt gets stuck and how you've configured things.

I saw the id was hardcoded I’ve set it to the same. Want raise an Issue for this

If you want to test out on live env this is the site we can refund any test payments https://cigar-box.co.uk/

Can you work out on your if there was any 3D Secure redirect.

The 3DS checkout pane is logged on the webserver log and the Drupal log.
Webserver log:
GET /checkout/{order id}/threedsecure
Drupal log:
Opayo3DSReview::buildPaneForm

You can use the 'Network' tab on Chrome Developer Tools to see what might be
happening inside the iframe but it's effectively out of our hands until we get a redirect or my 20 minute timeout expires.

If you got anything returned from 3D secure it would show in the Drupal log with a message containing
'OpayoController::Process3DSecure: from {customer IP address}

A matching web server log would be
POST /commerce_opayo_pi/3dSecure/{order_id}

Please note: part of the refactoring in 1.0.0-beta2 moves a bunch of the configuration fields from the 'payment gateway' to a new settings form for the module (path /admin/commerce/config/opayo_pi/settings).
This allows multiple 'opayo_pi' payment gateways (which is something I'll need myself but I appreciate not needed for most).

Not sure I follow what your trying to achieve, if you need multiple you can create multiple gateways using the UI see:

Comment 7 was not directly related to the issue so please ignore.

Maybe it's best if I add a toggle to have the 3D secure inside an iFrame or not.

Then ... if not inside an iFrame the customer/tester will get taken away from your site completely during the 3D secure interaction.
Not pretty, imo, but perhaps better for testing and troubleshooting.

I've introduced an option in beta3 to have the 3D Secure interaction outside the iframe. This should help make it more obvious what's going on. IMO it will have to be combined with using the browser's 'Develop tools' to keep track of what's going on in the browser, also the request log on the server and the drupal log (or XDebug). Without that level of detail I can't diagnose further.

This seems to work for the form integration but can't test the direct one due to this bug https://www.drupal.org/project/commerce_opayo_pi/issues/3410544 🐛 Can't get to review screen with direct intergration Active