I am trying to implement 3DS with braintree recurrent payments and I am using drop-in UI. I do the following steps:
- I make a braintree.dropin.create in order to obtain a dropin instance.
- I make a braintree.threeDSecure.create (version: 2) in order to obtain a threeDSecure instance.
- I make a requestPaymentMethod call on the dropin instance using { threeDSecure: { amount: "AMOUNT", email: "EMAIL" }} object.
- I use the nonce obtained from requestPaymentMethod to make a customer->create call.
- I create a new nonce based on the token obtained from the new customer, using paymentMethodNonce()->create.
- I make a verifyCard call on the threeDSecure instance, with the obtained nonce, in order to get a new nonce upgraded with 3DS.
- I make a subscription()->create call using the upgraded nonce.
For testing, I'm using their cards (https://developers.braintreepayments.com/guides/3d-secure/testing-go-live/php). The problem is that when I'm testing the cards related to Challenge, after making the Challenge (entering the code) and submitting, a popup with the error "Integration Error: Detected a 3DS 1.0 Form POST to a 3DS 2.0 Endpoint" appears. If I use any of the other cards, everything works fine, the subscriptions are made in sandbox and the transactions appear to be realised using 3DS. Does somebody have any idea what is that error?
Thanks
The problem is connected to
window.postMessage()
messaging. If your application, or like in the example above browser extension, use this kind of communication, it affects Braintree. This is because Braintree doesn't filter messages in this channel, and they treat all the messages like internal Braintree communication. Because of that, if any message doesn't fit into the internal Braintree format exception occurs, and 3DS will fail.Support is not helpful at all here. They ignored me ;)