option to choose how to open 3ds payment site

[daniellizik]

using https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.60.0/adyen.js

Is your feature request related to a problem? Please describe. TableCheck's booking form is often embedded as an iframe in our client's websites, for instance Okura Amsterdam https://okura.staging.ilionxinteractivemarketing.nl/

However some payment providers like Ideal cannot be embedded in an iframe due to their content security policy. To get around this, I would need the Adyen web js sdk to allow to begin the 3ds payment in a new tab instead of in the same tab in an iframe, currently I do not see any way to configure this behavior.

Currently my js code looks like

// https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.60.0/adyen.js
// https://github.com/Adyen/adyen-web/blob/main/packages/lib/src/core/types.ts
const checkout = await AdyenCheckout({
  environment,
  clientKey,
  session: { id, sessionData },
  onPaymentCompleted,
  onError, // this is not triggered when the 3ds provider cannot be loaded in an iframe,
  paymentMethodsConfiguration,
  locale,
  translations
});

checkout.create('dropin').mount('#embeded_payment_modal');

I am able to check the issuer in the beforeSubmit prop such as

await AdyenCheckout({
  async beforeSubmit({ paymentMethod }, _, { resolve }) {
    if (paymentMethod.type === 'ideal') {
      // here I need to resolve the submit, but open in a new tab, not an iframe
    }
  }
})

Describe the solution you'd like

Something like

await AdyenCheckout({
  type: 'iframe' | 'tab' // or something...
})

Describe alternatives you've considered

TableCheck's clients can use our booking form outside an iframe, but one of our selling points is that our form is embeddable in a client's site so they can control the entire e2e guest experience.

[sponglord]

@daniellizik - The emvCo spec, that regulates/controls 3DS2, mandates that, on Web, the 3DS2 process must be shown in an iframe.

However, perhaps, a solution to your problem is to force the 3DS2 process to happen as a redirect rather than an "in-app" iframe. Then it will open in another window.

How you do this depends on what API version of Checkout you are using:

With API version <= 68, you need to add this object to your /payments request

additionalData: {
    threeDS2InMDFlow: true,
}

Whilst for With API version >= 69

authenticationData: {
    attemptAuthentication: 'always'
}

I hope this helps