3ds2 submit password no callback

[wangxingxing123654]

we use "@adyen/adyen-web": "3.19.0", (3ds2 test account ) 4035501428146300 03/30 737

here is the test website https://harbor2-cdn.alpha.stylewe.com/checkout/payment-method/61e6a37ab1413132610687ec

[wangxingxing123654]

window.checkout = new this.AdyenCheckout({ environment: googleEnvironment, originKey: additionData.originKey, paymentMethodsResponse, onAdditionalDetails: this.handleOnAdditionalDetails, onError: this.handleBlikError, });

it should fired the onAdditionalDetails callback.

[ribeiroguilherme]

Hi @wangxingxing123654 ,

Thanks for reaching out. I tested the onAdditionalDetails callback on 3.19.0 and it is working fine, so the issue might be related to your configuration.

Sometimes a wrong origin on the /payments request can break this, since the iframe cannot communicate back to the merchant context. Can you double check if the origin is correct?

[MohsinActive8]

what are the callbacks that we can use other then onAdditionalDetails

[sponglord]

Hello @wangxingxing123654 There is no callback possible from the "Continue" button that you highlight - since what you are looking at here is an iframe whose content is entirely the responsibility of the relevant ACS/Issuer and as such is out-of-scope for Adyen-Web. The only callback you can expect to be called is onAdditionalDetails once the 3DS2 challenge process has completed and we are ready for you to submit the result to our /payments/details endpoint. I hope this answers your question.

[sponglord]

Hello @MohsinActive8

what are the callbacks that we can use other then onAdditionalDetails

You can see a list of the available callbacks here (for the Dropin): https://docs.adyen.com/online-payments/web-drop-in/optional-configuration#events And here (for the Card component): https://docs.adyen.com/payment-methods/cards/web-component#optional-configuration

[Nuranto]

Hi there,

I have the same issue, on a react app, and dev mode. After building, the problem disappear.

I guess I run in one of that string return : https://github.com/Adyen/adyen-web/blob/99668f7dfb0670ef34ed0d2ea90247f166a0652b/packages/lib/src/utils/get-process-message-handler.ts, However, it seems that those messages are not used/displayed anywhere (cf https://github.com/Adyen/adyen-web/blob/c2c75f0e19bdb1076da00c817fa3666673755323/packages/lib/src/components/ThreeDS2/components/Challenge/DoChallenge3DS2.tsx)

I think there should be some kind of refactor here. Exception throwing ? Even some logging into console would help.

[taimaiduc]

I have the same issue, on a react app, and dev mode onAdditionalDetails is not trigger

My config

window.checkout = await new AdyenCheckout({
                ...config,
                showPayButton: true,
                onAdditionalDetails: this.handleAdditionalDetails.bind(this),
                paymentMethodsResponse: paymentMethodsResponse,
                onSubmit: this.placeOrder.bind(this),
            });

[dimitriBouteille]

Hello,

Same issue again ... on react app (Next JS 12.3.4) and dev mode. Also, when I add the onAdditionalDetails option to AdyenCheckout the component validation no longer works.

adyen/adyen-web: 5.28.3

// Create AdyenCheckout
const adyenCheckout = useAdyenCheckout({
	onAdditionalDetails: (state) => {
		console.log('ADYEN::onAdditionalDetails', state);
	},
  });

...

// Mounted composant adyenCheckout.create('card', {...})
const secureFieldsRef = useRef<SecuredFieldsElement>(null);

...
const onPlaceOrder = useCallback(
    async (method: AvailablePaymentMethod) => {
      if (!secureFieldsRef.current) {
        return console.error('Checkout not initialized.');
      }

      secureFieldsRef.current.showValidation();
      if (secureFieldsRef.current.isValid === false) {
        return console.error('Invalid payment method options.');
      }

      ...
    }
  }
, [])
```	

When I trigger onPlaceOrder, secureFieldsRef.current.isValid return false :(

![Capture d’écran du 2023-05-12 19-21-59](https://github.com/Adyen/adyen-web/assets/34821762/876b1f3e-47eb-48ef-bf8a-90b6c208402b)

@sponglord Can you re-open this issue and try to fix this bug?

---

I also try with the last version `5.42.1` and I have this error in console : 

PrepareFingerprint3DS2::fingerprint timed-out:: errorCodeObject= {errorCode: 'timeout', message: 'ThreeDS2 timed out'}

 ---

@Nuranto  I also test in production mode (after build), but the bug is still there. 

[taimaiduc]

After checking this issue can be fixed by setting the origin URL on the server side. I am using Adyen PHP Magento2

[dimitriBouteille]

Hi @taimaiduc

Thank you very much, the 3D2S works perfectly now!

To complete your message, the configuration is in Payment Methods | Adyen | Advanced settings | Headless Integration | Payment Origin URL. If you use a single domain for all stores, the easiest way is to set this value to Default Store.

[sudha5555]

Hi @wangxingxing123654 ,

Thanks for reaching out. I tested the onAdditionalDetails callback on 3.19.0 and it is working fine, so the issue might be related to your configuration.

Sometimes a wrong origin on the /payments request can break this, since the iframe cannot communicate back to the merchant context. Can you double check if the origin is correct?

We were facing the same issue in angular js. Origin was the issue, we gave the wrong value here