3D-Secure Auth iFrame

[rossparachute]

Hey folks,

I noticed when using the Dojo Wallet component on confirming the payment via Google Pay's modal window that a 3D-Secure iFrame gets output.

Currently it's getting inserted just before the body closes.

Is there a way to configure where this iFrame element is appended?

Cheers,
Ross

[martinhay1]

Hi Ross,
Thanks for your query. Did you use a real card or a test card in this example? I believe Google Pay should be a frictionless 3DS2 transaction in production and not prompt for the 2FA with this modal.
Thanks,
Martin

[RomanKondratyev]

Hey @rossparachute ,

Could you check this example: https://github.com/dojo-engineering/dojo-samples/blob/main/samples/accept-a-payment/prebuilt-checkout/client/react-cra/src/iframe.threeds.css

Please let us know if that was not helpful.

[rossparachute]

Yeah, I was in test mode for that. The styles have sorted things. Thanks to you both, Ross

…

On Thu, Aug 3, 2023 at 10:18 AM Roman Kondratyev ***@***.***> wrote: Hey @rossparachute <https://github.com/rossparachute> , Could you check this example: https://github.com/dojo-engineering/dojo-samples/blob/main/samples/accept-a-payment/prebuilt-checkout/client/react-cra/src/iframe.threeds.css Please let us know if that was not helpful. — Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQF745OCNYHDZX5CKUNOVX3XTNUFXANCNFSM6AAAAAA27X27RQ> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

-- Ross Hendry Director of Software t. 0141 846 1765 ***@***.*** | www.parachute.net <https://www.thisisparachute.com/> <https://www.facebook.com/ThisIsParachute/> <https://twitter.com/ThisIsParachute> <https://www.instagram.com/thisisparachute/?hl=en> <https://www.linkedin.com/company/parachute-digital-solutions-limited/> ***@***.***,-4.2789445,17z/data=!3m1!4b1!4m5!3m4!1s0x48884432181689e7:0x4857727e622e8aea!8m2!3d55.8741653!4d-4.2767505> Confidentiality Note: This email may contain confidential and/or private information. If you received this email in error please delete and notify sender.

[mbogdanel]

Hello there,

To style the card and wallet containers, we can use the config styles. How can we style the 3DS pop-up? The css above does a good job of positioning the iframe but I need some styles pulled into the box.

Thanks

[martinhay1]

Hi @mbogdanel
The pop-up in your screenshot is Dojo's 3DS2 emulator in test mode. With production transactions the content of the modal is provided by the card issuer and is not able to be edited.
Hope this helps. Any questions let us know, thanks!

[mbogdanel]

Hi Martin
Thank you for your response.
I have managed to test locally a successful and a declined payment without 3DS with the test card numbers provided on the go-live checklist page. Couldn't test a successful payment with 3DS, do I need a code for the verification?

[rossparachute]

At least for us the code on the cards usually matched the test cards mentioned here.

For testing Google Pay we used the Test Card Suite. Prior to that my own card worked in test mode. The Google Pay modal that pops up via the browser rather than an element on the page should note it's in test mode and there will be no charge.

Initially we managed to get the OTP: 1234 working in the 3DS modal that popped up for Google Pay. I think we did a similar thing for it with the card component too.

However, since then - 1234 doesn't appear to be valid for any of the cards in the Google test suite anymore.

Happy if anyone finds out what the valid OTP is for Google Pay testing!

[martinhay1]

Hi @mbogdanel
The code for the Dojo 3DS2 emulator is 1234