Q: Is there any way to NOT store the card in vault while using Drop-In?

[consp1racy]

Braintree 2.5.2, Drop-In 3.0.8

When I enter a card in Drop-In UI, confirm "Add card" and then immediately run another Drop-In request the card is present among recent payment methods. This is something that should be left up to the user to decide when a transaction is processed. How do I disable this behavior?

Tested in sandbox.

[sdcoffey]

Hey @consp1racy,

Sorry to let your question languish for a few days. It's important to note that there's a difference between vaulting a card and creating a transaction with a nonce created from a vaulted card.

In short, only you as the merchant can create transactions with a customer's card. Simply adding a card in Drop-in does not create a transaction with that card, it simply saves the details s.t. the customer does not have to enter them a second time. Let me know if you need additional clarification.

[consp1racy]

Hello @sdcoffey,

I understand the difference. The intent was to put a "Remember payment method" option in the UI to avoid unnecessary customer calls resembling "Hey, how come you remember my card number? I didn't allow this!".

[sdcoffey]

Got it, got it, apologize for the misunderstanding.

What I would recommend is using authorization privileges to your advantage. Drop-in will only vault a customer's payment information if you create it with a clientToken created with a customer id.

What you can do if you wish to allow customers the option of not vaulting their cards is to create client tokens with or without customer ids, based on the user's preference. Granted, this is an all-or-nothing approach, but it should do the trick. At this time we have no plans to expand Drop-in to allow payment method editing or selective vaulting by the customer, but I will let you know if that changes, as it's something we've talked about.

[consp1racy]

I wasn't aware of the tokenization key option, thanks.

So in order to create a hybrid solution that would cover the most popular case (use and optionally remember one card) in a manageable and approachable way, would this be possible?

1. The app asks for a token and the server would return
   • a client token, if the user already elected to remember a card,
   • otherwise a tokenization key
2. Store the payment method in vault on transaction success.

It's still all-or-nothing but the user is presented a one-time choice instead of remembering all payment methods right off the bat.

[sdcoffey]

That sounds like it would work! Let us know if you have any other issues

[lkorth]

@consp1racy you could also not supply a customer_id when generating a client token if you don't want Drop-in to vault the card. This may be a little simpler than managing two different forms of authorization.

[zappoo]

I had the same issue and found a way around it.

Once you load the drop in, you can then hook into the change event of your 'save details' checkbox. If u ticked, then set this variable to true.

Dropininstance._model.isGuestCheckout = true

This works very well.

[jvorcak]

I'll just add a more detailed code snippet based on @zappoo's comment. I've investigated a lot and it seems this is the best workaround.

<div id="dropin-container"></div>
    <input type="checkbox" id="remember-card" />
    <button id="submit-button">Request payment method</button>
    <script>
      var button = document.querySelector('#submit-button');
      braintree.dropin.create({
        authorization: "{{ client_token }}",
        container: '#dropin-container',
        vaultManager: true,
      }, function (createErr, instance) {
        button.addEventListener('click', function () {
          instance._model.isGuestCheckout = !document.getElementById("remember-card").checked;
          instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
            createPayment(payload.nonce).then(x => {
              console.log(x)
            })
          });
        });
      });
    </script>

[bhushan90]

yes you can do something like that card:{ vault: { vaultCard: true, allowVaultCardOverride:true } } add this code in your dropin create method

[dj835638078]

it don't work