Can't get to review screen with direct intergration

I don't think the console error is related to the problem.

When you say 'direct integration' I'm assuming you mean: with the '3D Secure challenge inside iFrame' payment gateway setting un-checked.

Assuming the 'Review' step is part of your checkout flow, do you see the 'Review' checkout pane?

That should show a 'Pay and complete purchase' button.

If you click you should see the '3D Secure' checkout pane with a 'Proceed to 3D Secure' button.

Clicking that should forward you to the customer's bank's 3D secure screen.

Where exactly does it stop and what have you got in corresponding log messages?

I used the

Use Opayo Drop-In form - easier PCI compliance (SAQ-A) but less customer friendly checkout experience.

I've had some people say they can't complete as its asking them for a phone number even tho they entered one.

The step we can't get past is first pane where you enter your payment details

I think your right that JS error is the wrong rabbit hole.

To replicate this I'm on the order_information using a live connection.

I enter card details and click Continue to review

On clicking the screen just reloads the same page and I do not get the review pane as expected.

In the drupal logs I see OpayoPiPaymentGateway::getNewMerchantSessionKey:… and OpayoPiPaymentGateway::requestMerchantSessionKey: new…

I'm using Use custom Commerce form - more customer-friendly checkout experierce but higher PCI compliance (SAQ-A-EP) burden. (default) and have not checked 3D Secure challenge inside iFrame this makes no difference in the console I see no errors or red flags.

Normally, when you can't progress from the 'Payment Information' page, it's because there are validation issues.
However, I would expect there to be 'feedback' saying what field was the issue.

The sequence (simplified), after the customer clicks 'Continue to review' is:

(1) javascript intercepts and uses AJAX to call /commerce_opayo_pi/merchantsessionkey/....
(2) back-end requests a merchant session key from Opayo and returns it to the javascript
(3) javascript calls Opayo with the merchant session key and card details to tokenise and gets a 'card identifier' back
(4) javascript copies 'card identifier' into hidden form field (along with a bunch of other things) and submits the form
(5) method 'validateConfigurationForm' on class 'PaymentMethodAddForm' gets called as a result of the form submit

This checks the submitted fields, if it finds any issues it sets some 'errors' which cause the form to get redisplayed with error messages.

If there are no issues it (6) saves the details in a new 'payment method' and continues onto the 'Review' checkout page (if enabled).

It would be good if we could establish where in the (1)-(6) things are getting stuck.
Can you provide anything that could help me reproduce?

From about step (6) onwards the most useful (outside of XDebug sessions) diagnostic are the log messages.
Could you install the file log module ( https://www.drupal.org/project/filelog → )
and have it log cannels 'commerce_opayo_pi' and 'commerce_payment', see 'filelogsettings.png'

Log will be /drupal/web/sites/default/files/logs/drupal.log

if the issue is with step (5) then I may temporarily need to add a bunch more logging to the validation.

This is the output of the log, I can replicate locally in test mode too:

[Sat, 12/23/2023 - 19:16] [Debug] [commerce_opayo_pi] [client: 172.23.0.6, testuser] OpayoPiPaymentGateway::requestMerchantSessionKey: Before merchant session key request, mode: test
[Sat, 12/23/2023 - 19:16] [Debug] [commerce_opayo_pi] [client: 172.23.0.6, testuser] OpayoPiPaymentGateway::requestMerchantSessionKey: Successful merchant session key response, mode: test
[Sat, 12/23/2023 - 19:16] [Info] [commerce_opayo_pi] [client: 172.23.0.6, testuser] OpayoPiPaymentGateway::requestMerchantSessionKey: new merchant session key: SESSION_KEY (expiry: 2023-12-23T19:23:34.937Z), mode: test
[Sat, 12/23/2023 - 19:16] [Debug] [commerce_opayo_pi] [client: 172.23.0.6, testuser] OpayoPiPaymentGateway::getNewMerchantSessionKey: sequence nr: 9 for session key: SESSION_KEY (expiry: 2023-12-23T19:23:34.937Z) for order 45 (uid: UID), mode: test

It would be good to know if it got from step (4) to step (5), i.e. whether the form submit is taking place.
If you've got access to your web server logs then look out for the following 2 log entries:

"POST /commerce_opayo_pi/merchantsessionkey/141/tokenize_and_submit?_wrapper_format=drupal_ajax HTTP/1.1" 200 286 "http://drupal-dev3.ihbristol.com/checkout/141/order_information"

"POST /checkout/141/order_information HTTP/1.1" 303 454 "http://drupal-dev3.ihbristol.com/checkout/141/order_information"

"POST /commerce_opayo_pi/merchantsessionkey/" is step (2)
If we get to step (5) there should be a follow-up entry "POST /checkout//order_information"

Have you been able to replicate this locally as I have been able to on test mode. But no more debugging has been able to be find.

I have been doing some additional testing at the request of @c_archer, and can provide some additional information.

Running through checkout, following the same steps as @c_archer, the only additional thing to note is the following error being noted in the console:

sagepayOwnForm.tokeniseCardDetails result: false(merchant session key undefined: ....)

This is despite the noted session key matching in both the console log, and the watchdog matching.

I have obfuscated the session key both above and below, in order to avoiding sharing potentially sensitive information.

Watchdog entries:

$ drush watchdog:show --type=commerce_opayo_pi

  ID            Date                Type                          Severity   Message

  238853   19/Jan 16:41   commerce_opayo_pi   Info       Opayo Cron::deleteExpiredCommercePaymentMethods, method IDs queued for deletion:
  238852   19/Jan 16:41   commerce_opayo_pi   Debug      Opayo Cron::deleteExpiredCommercePaymentMethods: cleanup 'nr days' set to -1, delete
                                                         expired entries before 19-01-2024 16:41:17
  238848   19/Jan 16:40   commerce_opayo_pi   Debug      OpayoPiPaymentGateway::getNewMerchantSessionKey: sequence nr: 2 for session key:
                                                         .... (expiry: 2024-01-19T16:46:41.825Z) for order 16
                                                         (uid: 00960914-1542-48
  238847   19/Jan 16:40   commerce_opayo_pi   Info       OpayoPiPaymentGateway::requestMerchantSessionKey: new merchant session key:
                                                         .... (expiry: 2024-01-19T16:46:41.825Z), mode: test
  238846   19/Jan 16:40   commerce_opayo_pi   Debug      OpayoPiPaymentGateway::requestMerchantSessionKey: Successful merchant session key
                                                         response, mode: test
  238845   19/Jan 16:40   commerce_opayo_pi   Debug      OpayoPiPaymentGateway::requestMerchantSessionKey: Before merchant session key request,
                                                         mode: test

I was otherwise seeing the same behaviour as @c_archer, namely:

I enter card details and click Continue to review

On clicking the screen just reloads the same page and I do not get the review pane as expected.

I've added a whole lot of logging that I'm hoping will help pinpoint the issue.

Commit '2f451c17' - please note it's not tagged so you won't be able to use composer to install.

There's a configuration setting for the payment gateway called 'Gateway log level', set this to 'Extra Verbose Debugging Info'.

This will cause verbose logging to the browser console and the Drupal log.

For the browser console, make sure you have 'Preserve Log' (Chrome) checked so that it keeps the 'history'.

For Drupal I strongly suggest installing and enabling File Logger ( https://www.drupal.org/project/filelog → ) and log to the following
specific channels: commerce_opayo_pi, commerce_payment.

An example where I deliberately put in an illegal value for the 'cardholder name'.

Browser console log shows:

opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm form submit button clicked, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm request merchant session key using URL: /commerce_opayo_pi/merchantsessionkey/12/tokenize_and_submit, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm request merchant session key sent (URL: /commerce_opayo_pi/merchantsessionkey/12/tokenize_and_submit), form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm - Ajax command opayoMerchantSessionKey: returned merchant session key: 56E97238-664F-43F9-B259-FFE4C7BF7B57, expiry: 2024-01-26T16:18:57.053Z, instruction: tokenize_and_submit, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm.callCardDetailTokenisation: about to call sagepayOwnForm.tokeniseCardDetails with merchant session key: 56E97238-664F-43F9-B259-FFE4C7BF7B57 for card: *********0006, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm.callCardDetailTokenisation: called sagepayOwnForm.tokeniseCardDetails with merchant session key: 56E97238-664F-43F9-B259-FFE4C7BF7B57, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo
sagepay.js:14     POST https://sandbox.opayo.eu.elavon.com/api/v1/card-identifiers 422 (Unprocessable Entity)
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm.cardDetailsTokenised result: false, merchant session key used: 56E97238-664F-43F9-B259-FFE4C7BF7B57, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm.cardDetailsTokenised set card identifier result to: false
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm.cardDetailsTokenised failed response processed - about to submit form, HTTP error code: 422, first error (code: 1005): The cardholder name contains invalid characters
opayo-pi-ownform.js?v=1:346 OpayoPiOwnForm.cardDetailsTokenised failed response processed - form submitted
Navigated to http://drupal-dev5.ihbristol.com/checkout/12/order_information

Output from the corresponding Drupal file log:

[Fri, 01/26/2024 - 16:12] OpayoController::MerchantSessionKey requesting new merchant session key
[Fri, 01/26/2024 - 16:12] OpayoPiPaymentGateway::requestMerchantSessionKey: Before merchant session key request, mode: test
[Fri, 01/26/2024 - 16:12] OpayoPiPaymentGateway::requestMerchantSessionKey: Successful merchant session key response, mode: test
[Fri, 01/26/2024 - 16:12] [Info] [commerce_opayo_pi] [client: 192.168.200.147, admin] OpayoPiPaymentGateway::requestMerchantSessionKey: new merchant session key: 56E97238-664F-43F9-B259-FFE4C7BF7B57 (expiry: 2024-01-26T16:18:57.053Z), mode: test
[Fri, 01/26/2024 - 16:12] OpayoPiPaymentGateway::getNewMerchantSessionKey: sequence nr: 2 for session key: 56E97238-664F-43F9-B259-FFE4C7BF7B57 (expiry: 2024-01-26T16:18:57.053Z) for order 12 (uid: a2ed16f4-36c7-4dd6-a65a-5c423e131df8), mode: test
[Fri, 01/26/2024 - 16:12] OpayoController::MerchantSessionKey returned merchant session key settings: @"merchantSessionKey":"56E97238-664F-43F9-B259-FFE4C7BF7B57","merchantSessionKeyExpirySecs":400,"merchantSessionKeyExpiry":"2024-01-26T16:18:57.053Z","paymentGateway":"opayo","orderId":"12","instruction":"tokenize_and_submit"
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateConfigurationForm - payment method bundle: credit_card_opayo, form id: commerce_checkout_flow_opayo_checkout_flow, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo, form token: GAsIScUIXchTCungS6sn_c_1mAZz-Yp-2-51UX6Ft-c
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation attempted: 1 (form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo)
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation result: false (form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo)
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateOpayoPiOwnForm - HTTP error code: 422 (form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo)
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateOpayoPiOwnForm - error detail 0: code 1005, message The cardholder name contains invalid characters (form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo)
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateOpayoPiOwnForm - filter errors  (form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo)
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateOpayoPiOwnForm - no card identifier returned, http error code: 422 (form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo)
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateOpayoPiOwnForm - detected validation error feedback  (form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo)
[Fri, 01/26/2024 - 16:12] PaymentMethodAddForm::validateConfigurationForm finished, nr validation errors detected: 1, form build id: form-dXHdCYdJOjqFeKy8xJ_sTAtcP_v_nMt2UOJ3ys0W6Wo

In the example above Opayo reports issues with the tokenisation of the card details: "HTTP error code: 422, first error (code: 1005): The cardholder name contains invalid characters"

This gets returned with a form submit (in a hidden field) and should be picked up by PaymentMethodAddForm::validateConfigurationForm
"nr validation errors detected: 1".

You should then see 1 or more warning messages returned above the checkout form.

My apologies for the delay in getting back to you with more information, I have been able to do some further testing today and will following up tomorrow after doing some deeper debugging.

I have been able to test using both our custom theme, as well as using Claro (to rule any theme-specific causes) and can provide the log output for review.

Using custom theme:

Browser console log:

Uncaught TypeError: checkoutFormButton is null
    attach https://cigarbox.ddev.site:441/modules/contrib/commerce_opayo_pi/js/opayo-pi-ownform.js?v=1:69
    attach https://cigarbox.ddev.site:441/modules/contrib/commerce_opayo_pi/js/opayo-pi-ownform.js?v=1:20
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:166
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:162
    insert https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1387
    jQuery 2
    insert https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1385
    commandExecutionQueue https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1046
    promise callback*Drupal.Ajax.prototype.commandExecutionQueue/< https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1039
    commandExecutionQueue https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1036
    success https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1095
    success https://cigarbox.ddev.site:441/themes/contrib/bootstrap/js/misc/ajax.js?s8qqck:137
    success https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:584
    jQuery 8
    eventResponse https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:796
    Ajax https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:646
    jQuery 8
    Ajax https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:635
    ajax https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:267
    loadAjaxBehavior https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:47
    loadAjaxBehavior https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:44
    attach https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:52
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:166
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:162
    <anonymous> https://cigarbox.ddev.site:441/core/modules/big_pipe/js/big_pipe.js?v=10.2.2:148
    <anonymous> https://cigarbox.ddev.site:441/core/modules/big_pipe/js/big_pipe.js?v=10.2.2:179
opayo-pi-ownform.js:69:9
Navigated to https://cigarbox.ddev.site:441/checkout/20/order_information?check_logged_in=1
Some cookies are misusing the recommended “SameSite“ attribute 6
OpayoPiOwnForm form submit button clicked, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM opayo-pi-ownform.js:357:15
OpayoPiOwnForm request merchant session key using URL: /commerce_opayo_pi/merchantsessionkey/20/tokenize_and_submit, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM opayo-pi-ownform.js:357:15
OpayoPiOwnForm request merchant session key sent (URL: /commerce_opayo_pi/merchantsessionkey/20/tokenize_and_submit), form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM opayo-pi-ownform.js:357:15
OpayoPiOwnForm - Ajax command opayoMerchantSessionKey: returned merchant session key: 82FD0584-DCED-4D08-9DE9-53D196898AD3, expiry: 2024-02-12T11:55:39.632Z, instruction: tokenize_and_submit, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM opayo-pi-ownform.js:357:15
OpayoPiOwnForm.callCardDetailTokenisation: about to call sagepayOwnForm.tokeniseCardDetails with merchant session key: 82FD0584-DCED-4D08-9DE9-53D196898AD3 for card: ************0003, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM opayo-pi-ownform.js:357:15
OpayoPiOwnForm.callCardDetailTokenisation: called sagepayOwnForm.tokeniseCardDetails with merchant session key: 82FD0584-DCED-4D08-9DE9-53D196898AD3, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM opayo-pi-ownform.js:357:15
Navigated to https://cigarbox.ddev.site:441/checkout/20/order_information?check_logged_in=1
OpayoPiOwnForm.cardDetailsTokenised result: true, merchant session key used: 82FD0584-DCED-4D08-9DE9-53D196898AD3, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM opayo-pi-ownform.js:357:15
OpayoPiOwnForm.cardDetailsTokenised set card identifier result to: true opayo-pi-ownform.js:357:15
OpayoPiOwnForm.cardDetailsTokenised success response processed - about to submit form, card identifier: 7BD32E33-A6EB-423B-9395-733505E82E90, merchant session key: 82FD0584-DCED-4D08-9DE9-53D196898AD3 opayo-pi-ownform.js:357:15
OpayoPiOwnForm.cardDetailsTokenised success response processed - form submitted opayo-pi-ownform.js:357:15
Some cookies are misusing the recommended “SameSite“ attribute 4

Output from the Drupal file log:

[Mon, 02/12/2024 - 11:44] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateConfigurationForm finished, nr validation errors detected: 0, form build id: form-4lYJQD_fZN6s3_YvsjJEDQ1GA86x7rXla7wsVHiTUQc
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateConfigurationForm - payment method bundle: credit_card_opayo, form id: commerce_checkout_flow_opayo_checkout_flow, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM, form token: 6MxNsfxcocvVtqkmtXHDPDuPy677BqgdIKMJcqlYWVg
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation attempted: 1 (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation result:  (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - HTTP error code:  (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - filter errors  (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - no card identifier returned, http error code:  (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - no card identifier returned and no http error code: (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateConfigurationForm finished, nr validation errors detected: 1, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoController::MerchantSessionKey requesting new merchant session key
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::requestMerchantSessionKey: Before merchant session key request, mode: test
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::requestMerchantSessionKey: Successful merchant session key response, mode: test
[Mon, 02/12/2024 - 11:48] [Info] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::requestMerchantSessionKey: new merchant session key: 82FD0584-DCED-4D08-9DE9-53D196898AD3 (expiry: 2024-02-12T11:55:39.632Z), mode: test
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::getNewMerchantSessionKey: sequence nr: 1 for session key: 82FD0584-DCED-4D08-9DE9-53D196898AD3 (expiry: 2024-02-12T11:55:39.632Z) for order 20 (uid: 6c07d9ab-74f7-4ecd-8198-a628c881beb4), mode: test
[Mon, 02/12/2024 - 11:48] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoController::MerchantSessionKey returned merchant session key settings: @"merchantSessionKey":"82FD0584-DCED-4D08-9DE9-53D196898AD3","merchantSessionKeyExpirySecs":400,"merchantSessionKeyExpiry":"2024-02-12T11:55:39.632Z","paymentGateway":"opayo_pi","orderId":"20","instruction":"tokenize_and_submit"
[Mon, 02/12/2024 - 11:49] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateConfigurationForm - payment method bundle: credit_card_opayo, form id: commerce_checkout_flow_opayo_checkout_flow, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM, form token: 6MxNsfxcocvVtqkmtXHDPDuPy677BqgdIKMJcqlYWVg
[Mon, 02/12/2024 - 11:49] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation attempted: 1 (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:49] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation result: true (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:49] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card identifier: 7BD32E33-A6EB-423B-9395-733505E82E90 (form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM)
[Mon, 02/12/2024 - 11:49] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateConfigurationForm finished, nr validation errors detected: 0, form build id: form-8r-JYHZqsW2FB7BNH3pwZ4xc2aXl_3t7rSO9geWn7MM

Using Claro.

Browser console log:

Uncaught TypeError: checkoutFormButton is null
    attach https://cigarbox.ddev.site:441/modules/contrib/commerce_opayo_pi/js/opayo-pi-ownform.js?v=1:69
    attach https://cigarbox.ddev.site:441/modules/contrib/commerce_opayo_pi/js/opayo-pi-ownform.js?v=1:20
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:166
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:162
    insert https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1387
    jQuery 2
    insert https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1385
    commandExecutionQueue https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1046
    promise callback*Drupal.Ajax.prototype.commandExecutionQueue/< https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1039
    commandExecutionQueue https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1036
    success https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:1095
    success https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:584
    jQuery 8
    eventResponse https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:796
    Ajax https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:646
    jQuery 8
    Ajax https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:635
    ajax https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:267
    loadAjaxBehavior https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:47
    loadAjaxBehavior https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:44
    attach https://cigarbox.ddev.site:441/core/misc/ajax.js?v=10.2.2:52
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:166
    attachBehaviors https://cigarbox.ddev.site:441/core/misc/drupal.js?v=10.2.2:162
    <anonymous> https://cigarbox.ddev.site:441/core/misc/drupal.init.js?v=10.2.2:32
    listener https://cigarbox.ddev.site:441/core/misc/drupal.init.js?v=10.2.2:20
    domReady https://cigarbox.ddev.site:441/core/misc/drupal.init.js?v=10.2.2:26
    <anonymous> https://cigarbox.ddev.site:441/core/misc/drupal.init.js?v=10.2.2:31
    <anonymous> https://cigarbox.ddev.site:441/core/misc/drupal.init.js?v=10.2.2:34
opayo-pi-ownform.js:69:9
Navigated to https://cigarbox.ddev.site:441/checkout/20/order_information
Some cookies are misusing the recommended “SameSite“ attribute 6
OpayoPiOwnForm form submit button clicked, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA opayo-pi-ownform.js:357:15
OpayoPiOwnForm request merchant session key using URL: /commerce_opayo_pi/merchantsessionkey/20/tokenize_and_submit, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA opayo-pi-ownform.js:357:15
OpayoPiOwnForm request merchant session key sent (URL: /commerce_opayo_pi/merchantsessionkey/20/tokenize_and_submit), form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA opayo-pi-ownform.js:357:15
OpayoPiOwnForm - Ajax command opayoMerchantSessionKey: returned merchant session key: 08968DA2-EB4A-4DF3-91DE-87DA1D32B05B, expiry: 2024-02-12T16:26:55.157Z, instruction: tokenize_and_submit, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA opayo-pi-ownform.js:357:15
OpayoPiOwnForm.callCardDetailTokenisation: about to call sagepayOwnForm.tokeniseCardDetails with merchant session key: 08968DA2-EB4A-4DF3-91DE-87DA1D32B05B for card: *********0006, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA opayo-pi-ownform.js:357:15
OpayoPiOwnForm.callCardDetailTokenisation: called sagepayOwnForm.tokeniseCardDetails with merchant session key: 08968DA2-EB4A-4DF3-91DE-87DA1D32B05B, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA opayo-pi-ownform.js:357:15
OpayoPiOwnForm.cardDetailsTokenised result: true, merchant session key used: 08968DA2-EB4A-4DF3-91DE-87DA1D32B05B, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA opayo-pi-ownform.js:357:15
OpayoPiOwnForm.cardDetailsTokenised set card identifier result to: true opayo-pi-ownform.js:357:15
Navigated to https://cigarbox.ddev.site:441/checkout/20/order_information
OpayoPiOwnForm.cardDetailsTokenised success response processed - about to submit form, card identifier: EEEA87F1-7609-42A4-9207-B71AEEC198DE, merchant session key: 08968DA2-EB4A-4DF3-91DE-87DA1D32B05B opayo-pi-ownform.js:357:15
OpayoPiOwnForm.cardDetailsTokenised success response processed - form submitted opayo-pi-ownform.js:357:15
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. node.js:401:1
Some cookies are misusing the recommended “SameSite“ attribute 4

Output from the Drupal file log:

[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoController::MerchantSessionKey requesting new merchant session key
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::requestMerchantSessionKey: Before merchant session key request, mode: test
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::requestMerchantSessionKey: Successful merchant session key response, mode: test
[Mon, 02/12/2024 - 16:20] [Info] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::requestMerchantSessionKey: new merchant session key: 08968DA2-EB4A-4DF3-91DE-87DA1D32B05B (expiry: 2024-02-12T16:26:55.157Z), mode: test
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoPiPaymentGateway::getNewMerchantSessionKey: sequence nr: 2 for session key: 08968DA2-EB4A-4DF3-91DE-87DA1D32B05B (expiry: 2024-02-12T16:26:55.157Z) for order 20 (uid: 6c07d9ab-74f7-4ecd-8198-a628c881beb4), mode: test
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] OpayoController::MerchantSessionKey returned merchant session key settings: @"merchantSessionKey":"08968DA2-EB4A-4DF3-91DE-87DA1D32B05B","merchantSessionKeyExpirySecs":400,"merchantSessionKeyExpiry":"2024-02-12T16:26:55.157Z","paymentGateway":"opayo_pi","orderId":"20","instruction":"tokenize_and_submit"
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateConfigurationForm - payment method bundle: credit_card_opayo, form id: commerce_checkout_flow_opayo_checkout_flow, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA, form token: 6MxNsfxcocvVtqkmtXHDPDuPy677BqgdIKMJcqlYWVg
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation attempted: 1 (form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA)
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation result: true (form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA)
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card identifier: EEEA87F1-7609-42A4-9207-B71AEEC198DE (form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA)
[Mon, 02/12/2024 - 16:20] [Debug] [commerce_opayo_pi] [client: 172.18.0.6, markb] PaymentMethodAddForm::validateConfigurationForm finished, nr validation errors detected: 0, form build id: form-VjwVMzphbhSvYQ3PFSem-Y6tAvLEDsddIItAmx5TEdA

Did a whole day of testing myself yesterday, for the first time on a test setup with shipping enabled.
Looking at the logs, similar to mine.
I found an issue yesterday while testing:

Both the 'dropin' style javascript and 'own form' use javascript to trigger the form submit rather than a physical click.
However, with Drupal forms, submitting a form by javascript is not enough because it seems to be missing out on collecting the
settings that tell the back-end the form has been submitted (there are some comments in elementTriggeredScriptedSubmission in Drupal's FormBuilder.php)
Instead we explictily tell the backend about the form triggering element by setting the '_triggering_element_name' form field in the javascript. However (and this is the issue I found) we need to set '_triggering_element_value' as well because on checkout with additional delivery related form elements it was getting confused about which button triggered the submit and never progressing to the 'submit' handler of the payment gateway form.

I'm working on a new release but it you wanted to test in the meantime, replace lines 284-290 of opayo-pi-ownform.js with this

if (ds.commerceopayopi.opayoCheckout.hasOwnProperty('useTriggeringElement')) {
          // Set the triggering element to the submit button
          input = document.createElement("input");
          input.setAttribute("type", "hidden");
          input.setAttribute("name", "_triggering_element_name");
          input.setAttribute("value", ds.commerceopayopi.opayoCheckout.submitButton.getAttribute("name"));
          checkoutForm.appendChild(input);
          input = document.createElement("input");
          input.setAttribute("type", "hidden");
          input.setAttribute("name", "_triggering_element_value");
          input.setAttribute("value", ds.commerceopayopi.opayoCheckout.submitButton.value);
          checkoutForm.appendChild(input);
        }

Thats great let me know when its released will this release resolve the phone number issue too?

Release 4 has the updated javascript. Please keep the verbose logging for now, it's the best tool to get diagnostic info (well, without engaging actual debuggers) to me.

Sadly this still seems like an issue, we'll try and provide more info soon

With the updated Javascript, I am now able to progress to the 'Review' stage.

However, on clicking 'Pay and complete purchase' I am taken to'Order Information (/checkout/[order_id]/order_information) with the following errors displayed:

Error message

    Warning: Trying to access array offset on value of type int in Drupal\Core\Logger\LogMessageParser->parseMessagePlaceholders() (line 32 of core/lib/Drupal/Core/Logger/LogMessageParser.php).
    Warning: Trying to access array offset on value of type int in Drupal\Core\Logger\LogMessageParser->parseMessagePlaceholders() (line 32 of core/lib/Drupal/Core/Logger/LogMessageParser.php).
    Warning: Trying to access array offset on value of type int in Drupal\Core\Logger\LogMessageParser->parseMessagePlaceholders() (line 32 of core/lib/Drupal/Core/Logger/LogMessageParser.php).
    Warning: Trying to access array offset on value of type int in Drupal\Core\Logger\LogMessageParser->parseMessagePlaceholders() (line 32 of core/lib/Drupal/Core/Logger/LogMessageParser.php).
    Warning: Trying to access array offset on value of type int in Drupal\Core\Logger\LogMessageParser->parseMessagePlaceholders() (line 32 of core/lib/Drupal/Core/Logger/LogMessageParser.php).
    Warning: Trying to access array offset on value of type int in Drupal\Core\Logger\LogMessageParser->parseMessagePlaceholders() (line 32 of core/lib/Drupal/Core/Logger/LogMessageParser.php).
    We encountered an unexpected error processing your payment. Please try again later.

Warning message
Contains invalid characters

And the following is in the file log (potentially sensitive details redacted):

Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoController::MerchantSessionKey requesting new merchant session key
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::requestMerchantSessionKey: Before merchant session key request, mode: test
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::requestMerchantSessionKey: Successful merchant session key response, mode: test
[Fri, 02/16/2024 - 15:10] [Info] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::requestMerchantSessionKey: new merchant session key: [RANDOM_CHARACTERS] (expiry: 2024-02-16T15:16:57.621Z), mode: test
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::getNewMerchantSessionKey: sequence nr: 6 for session key: [RANDOM_CHARACTERS] (expiry: 2024-02-16T15:16:57.621Z) for order 24 (uid: [RANDOM_CHARACTERS]), mode: test
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoController::MerchantSessionKey returned merchant session key settings: @"merchantSessionKey":"[RANDOM_CHARACTERS]","merchantSessionKeyExpirySecs":400,"merchantSessionKeyExpiry":"2024-02-16T15:16:57.621Z","paymentGateway":"opayo_pi","orderId":"24","instruction":"tokenize_and_submit"
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::validateConfigurationForm - payment method bundle: credit_card_opayo, form id: commerce_checkout_flow_opayo_checkout_flow, form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU, form token: RIHfFvfjgVeDdij8gXWzuIIyyJwCzykIyUQYBBbl9RI
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation attempted: 1 (form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU)
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card tokenisation result: true (form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU)
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::validateOpayoPiOwnForm - card identifier: [RANDOM_CHARACTERS] (form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU)
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::validateOpayoPiOwnForm - filter errors  (form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU)
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::validateConfigurationForm finished, nr validation errors detected: 0, form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::submitConfigurationForm - payment method bundle: credit_card_opayo, form id: commerce_checkout_flow_opayo_checkout_flow, form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU, form token: RIHfFvfjgVeDdij8gXWzuIIyyJwCzykIyUQYBBbl9RI
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::submitOpayoPiOwnForm called (form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU)
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] PaymentMethodAddForm::submitOpayoPiOwnForm card identifier: [RANDOM_CHARACTERS] returned for merchant session key: [RANDOM_CHARACTERS] (form build id: form-Efk_JEMWYGWVn2ejyYJmI885YZgKLkdRpghLkMlolPU)
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::createPaymentMethod - called
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::createPaymentMethod - updated and saved payment method (id: 6), remote ID: [RANDOM_CHARACTERS]:[RANDOM_CHARACTERS]
[Fri, 02/16/2024 - 15:10] [Info] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::createPaymentMethod: order 24 (uid: 6cc5a30f-853b-4268-ba94-47c65f6406f5), mode: test, saved payment method 6 with remote ID [RANDOM_CHARACTERS]:[RANDOM_CHARACTERS]: merchant session key: [RANDOM_CHARACTERS], card identifier: [RANDOM_CHARACTERS]
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::createPayment called for cart 24
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction called for cart 24 using URL: https://pi-test.sagepay.com/api/v1/transactions/
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: cart 24 (uid: 6cc5a30f-853b-4268-ba94-47c65f6406f5), mode: test, create transaction payload: {"transactionType":"Payment","paymentMethod":{"card":{"merchantSessionKey":"[RANDOM_CHARACTERS]","cardIdentifier":"[RANDOM_CHARACTERS]","reusable":"false","save":"false"}},"vendorTxCode":"[VENDOR_TX_CODE]","amount":6092,"currency":"GBP","description":", items: Hoyo De Monterrey Petit Robusto","apply3DSecure":"UseMSPSetting","applyAvsCvcCheck":"UseMSPSetting","customerFirstName":"Mark","customerLastName":"Burns","billingAddress":{"address1":"88","address2":"Inveralmond Industrial Estate","city":"Perth","postalCode":"412","country":"GB","state":null},"entryMethod":"Ecommerce","strongCustomerAuthentication":{"website":"https:\/\/cigarbox.ddev.site:441\/","notificationURL":"https:\/\/cigarbox.ddev.site:441\/commerce_opayo_pi\/3dSecure\/24","browserIP":"[IP_ADDRESS]","browserAcceptHeader":"text\/html, application\/xhtml+xml, image\/avif, image\/webp, application\/xml, *\/*","browserUserAgent":"Mozilla\/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko\/20100101 Firefox\/123.0","browserJavaEnabled":false,"browserColorDepth":"30","browserScreenHeight":512,"browserScreenWidth":"1274","browserTZ":"0","browserLanguage":"en-GB","browserJavascriptEnabled":"true","challengeWindowSize":"Small"},"customerEmail":"mark.burns+test@whiskyauctioneer.com","customerPhone":"+441738245576"}
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: cart 24, payment transaction request using https://pi-test.sagepay.com/api/v1/transactions/
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: cart 24, payment transaction request completed
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: re-set payment method 6 Remote Id to 'null' to indicate single-use MSK and card identifier have been 'used'.
[Fri, 02/16/2024 - 15:10] [Info] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: cart 24, response payload: {"errors":[{"description":"Contains invalid characters","property":"strongCustomerAuthentication.browserColorDepth","code":1005}]}
[Fri, 02/16/2024 - 15:10] [Warning] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: cart 24, payment transaction failed with response http code 422
[Fri, 02/16/2024 - 15:10] [Warning] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::submitNewOpayoPiTransaction: cart 24, transaction response error 1005, property strongCustomerAuthentication.browserColorDepth, error description: @errorDescr
[Fri, 02/16/2024 - 15:10] [Warning] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] Opayo3DSReview::orderPaymentTransactionFailed: cart 24, unset payment method (ID: 6, remote ID: 
[Fri, 02/16/2024 - 15:10] [Debug] [commerce_opayo_pi] [client: [IP_ADDRESS], markb] OpayoPiPaymentGateway::gatewayFailureResponse, message: Errors in Opayo Pi transaction response, HTTP code: 422, Contains invalid characters 
[Fri, 02/16/2024 - 15:10] [Error] [commerce_payment] [client: [IP_ADDRESS], markb] Technical failure during payment request, details: Errors in Opayo Pi transaction response, HTTP code: 422, Contains invalid characters

I will do some further debugging to try get some more info as to what is happening.

Opayo doesn't seem to like the value for browserColorDepth. In your testing this was value '30', supplied by the browser to the payment gateway backend and forwarded with the payment transaction request to Opayo.

I've just checked Opayo's API again and I think they've added some details: there are only certain color depths acceptable and '30' isn't one of them.

I will change line 1629 of OpayoPiPaymentGateway.php to:

        if (array_search($extra_info->colorDepth, ['1', '4', '8', '15', '16', '24', '32', '48']))
          $strongCustomerAuthentication->browserColorDepth = $extra_info->colorDepth;
        else
          $strongCustomerAuthentication->browserColorDepth = 32;

... furthermore, have had a look again at the API documentation and there are more details about the request payload, particularly the StrongCustomerAuthentication section than I remember.
I suspect it might throw up more issues for you until I get that part of the code checked and updated.

'Beta5' release has got the fix to deal with the colordepth issue

Testing using 'Beta5', and can confirm that the colordepth issue has been resolved.

Have noted a related issue, where when using the gateway in Test mode with test card details, I get an unsupported card error. Appears to be due to the live url being used instead of the sandbox one?

See https://www.drupal.org/project/commerce_opayo_pi/issues/3423018 🐛 Test Mode: OpayoPiOwnForm uses the live url to tokenize card details. Active

Closing the issue. I've fixed - as far as I can ascertain - the issues that were tracked down and reported and haven't heard any more about the earlier and vaguer ones.