Search code examples
braintree

How to make a braintree subscription with dropin UI and 3DS2?


I want to create a subscription page using drop-in UI.

Client Side: I am done with the client-side. I have Drop-in UI implemented and I obtain a payment nonce.

Server Side: On the server side I receive the nonce from the client but I can't create a subscription with that nonce(I received an unvaulted payment method). I need to create a payment method with this nonce. After this the nonce is consumed, so I need another nonce with 3DS secure (for the subscription creation).

From their documentation I understand that I need to create a second nonce (payment method nonce) and send again to the client for verification. I didn't found any sample of this verification...

The question is how I obtain a second nonce that I need for subscription creation?


Solution

  • The drop-in UI generates a nonce, but this nonce is associated with a vaulted payment method, only if you provide a customer_id when you generate the client_token. In this way you can obtain a bounce that you can use in gateway.subscription.create.

    To summary the steps are:

    1. (server) Create a customer without a payment method

    2. (server) Generate a client_token with customer_id from step 1

    3. (client) Generate drop-in UI using client token from step 2

    4. (client) When the end-user adds his payment details drop-in generate a nonce associated with an already vaulted payment method

    5. (server) Call subscription.create with the nonce from step 4

      gateway.subscription.create({ "payment_method_nonce": clientNonce, "plan_id": planId, "merchant_account_id": merchantAccountId })