Braintree, How do I delete a users credit card with the nonce from the client?

Question

Server side there is a function to delete a payment method (result = Braintree::PaymentMethod.delete("the_token")) but it takes a payment method token. How do I get the payment methods token with the nonce from the client?

edit: I'm not using the drop in UI. I have a custom list of credit cards the user has (using the Javascript v3 SDK). I want to have a button to delete cards. The JS SDK dosnt give the credit cards token, just a nonce. What is the process for turning the data available to the client into something I can use to delete the card on the server?

edit2: The list of credit cards on the clent side uses the VaultManager from the JavaScript v3 SDK. It returns a fetchPaymentMethodsPayload.

This is the client side code:

_loadPaymentMethods() {
    this.paymentService.getBraintreeToken().then( token => {
      this.braintreeClient.create({
        authorization: token
      }, (clientErr, clientInstance) => {

        if (clientErr) {
          // Handle error in client creation
          return;
        }

        var options = {
          client: clientInstance,
        };

        this.vaultManager.create(options, (err, vaultInstance) => {
          if (err) {
            console.log(err);
            return;
          }
          vaultInstance.fetchPaymentMethods({ defaultFirst: true }, (err, paymentMethods) => {
            paymentMethods.forEach( paymentMethod => {
              if(paymentMethod.type == 'CreditCard') {
                this.cards.push(paymentMethod);
                if(paymentMethod.default) {
                  this.card = paymentMethod;
                }
              }
            });
          });
        });

      });
    });
  }

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

If using VaultManager on the client-side to populate your cards, you will not have the functionality to allow a user to delete one of those cards. The reason for this goes back to what you said, that nonces are what's returned on the fetchPaymentMethodsPayload method. VaultManager can populate a nonce that's associated with an already created card, since it's only passing that nonce into a Transaction.sale() call. Since the nonce is populated when the form is rendered, you can not search for that nonce compared to a payment method in the vault, since it will not exist previously and nonces are meant for one time use. This is why nonces aren't passed into PaymentMethod.find() calls.

To accomplish your task you would need to build out custom logic that mimics what Vault Manager does; however, would need to returns the tokens. One way would be as mentioned in my comment: by finding the customer object and grabbing the customer's payment methods, and then pulling out the tokens associated with those payment methods.