How to implement opt-in and opt-out functionality in braintree drop-in UI

Question

I have added Braintree drop-in UI in my angular project. In that, I am showing exiting payment methods from the vault. Now I want to implement functionality so that when the user checked the checkbox, in that case, the only card(Payment method) will add to vault.

Answer 1

_{Full disclosure, I work at Braintree. If you have any further questions, I recommend contacting Support.}

For your use case, I recommend using the API to store cards in the Vault, rather than the built-in functionality in the Drop-in UI. Reason being, it'd be much simpler to set the vaultCard option to false, rather than dynamically updating the Drop-in configuration.

From there, you can submit the payment method nonce of the selected card to your server to perform a PaymentMethod.create() API request. As an example, here is how a request may look like using the .NET SDK:

var request = new PaymentMethodRequest
{
    CustomerId = "THE_CUSTOMER_ID",
    PaymentMethodNonce = NonceFromTheClient
};

Result<PaymentMethod> result = gateway.PaymentMethod.Create(request);

Using the payment method nonce provided from the Drop-in in the above request will store that payment method in your Vault.