3DS V2 iframe events

General information

• SDK version: 3.46.0-beta-3ds.8
• Environment: Sandbox
• Browser and OS Chrome 75 on Windows 10

Issue description

In the 3DS v1 implementation it was possible to specify addFrame/removeFrame callbacks, allowing us to customize the modal dialog, hosting the banks iframe. These methods are apparently no longer being called as part of V2.

Specifically im looking for ways to:

• Inline (instead of modal) the content in the page on smaller devices (iphone 5/SE)
• Add an ‘X’ button in the top-left corner of the modal dialog (same behaviour as cancel)
• Adjust the height of the frame to avoid vertical scrolling on larger screens
• Detect when the ‘Cancel’ button has been pressed inside the iframe, to skip sending the nonce which is apparently always generated but with a liabilityshiftpossible = true liabilityshifted = false

Perhaps there is a new way ?

[crookedneighbor]

We’ve added an undocumented beta feature to use support the inline frame option provided by cardinal. You can try it out like this, by using a framework param instead of version:

braintree.threeDSecure.create({
  client: clientInstance,
  framework: 'inline-iframe'
}, function (createError, threeDSecure) {
  // set up lookup-complete listener
  // you may omit this and continue to use the onLookupComplete callback
  // in the verifyCard instead, if you wish
  threeDSecure.on('lookup-complete', function (data, next) {
    // check lookup data
    next();
  });
  // set up iframe listener
  threeDSecure.on('authentication-iframe-available', function (event, next) {
    var element = event.element; // an html element that contains the iframe

   document.body.appendChild(element); // put it on your page

    next(); // let the sdk know the element has been added to the page
  });

  // collect tokenized credit card
  threeDSecure.verifyCard({
    nonce: nonceFromTokenizationPayload,
    bin: binFromTokenizationPayload,
    amount: '100.00',
    // additional verify card params if available
  }).then(function (payload) {
    // inspect payload
    // send payload.nonce to your server
  });
});

We’re still solidifying the exact API for how to expose this, so keep an eye on the CHANGELOG for breaking changes. We will also keep this open until the feature is out of beta.

[crookedneighbor]

The error you were seeing should be fixed now in the latest release. Going to close this.