Braintree - Why is only the default card being used for starting a subscription?

Question

I am trying to understand how to give an option for the user to choose a non-default payment method / card for their subscription. Please see image below: I have two cards. The Visa is the default payment card. But if the user chooses the MasterCard (not default), only the default payment is used to start a subscription.

I am using a payment nonce to start a subscription. The customer is saved in a different view and their payment methods are validated.

Client Side:

  let paymentNonce;
  initiateDropin().then((dropinInstance) => {
    dropinInstance.requestPaymentMethod(function (error, payload) {
      paymentNonce = payload.nonce;
    });
  });

Server Side:

result = braintree_gateway.subscription.create({
           'payment_method_nonce': payment_nonce,
           'plan_id': tier_chosen,
           'merchant_account_id': settings.BRAINTREE_MERCHANT_ACCOUNT_ID
         })

Thank you for the help!

Answer 1

I figured it out. My client side code needed some restructuring. The request payment method function was called after the "Confirm" button was clicked. This created a nonce that corresponded to the non-default card.

braintree.dropin
  .create({
    authorization: braintreeClientToken,
    container: '#braintree_dropin',
  })
  .then(function (dropinInstance) {
    document
      .getElementById('confirm_button')
      .addEventListener('click', function () {
        dropinInstance.requestPaymentMethod().then(function (payload) {
          let paymentNonce = payload.nonce;
  })

This is documented here.