Search code examples
javascriptbraintree

How to get Braintree v.zero to show existing payment methods?


Setting up a payment form with the Braintree v.zero SDK:

braintree.setup(response.value, 'dropin', {
  container : 'xyz',
  onPaymentMethodReceived : function(payment) { 
    pay(payment.nonce);
  },
});

After entering payment information, the form shows:

enter image description here

...but only until the page is reloaded. Is there a way to initialize the dropin payment form to list a customer's existing payment methods?


Solution

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

    The key would seem to lie with your response.value (i.e. your client token). I would guess that your server code used to generate it isn't specifying a customerId for that user. ​ From the Braintree documentation on generating client tokens:

    Your server is responsible for generating a client token, which contains all authorization and configuration information your client needs to initialize the client SDK to communicate with Braintree. Including a customerId when generating the client token lets returning customers select from previously used payment method options, improving user experience over multiple checkouts. Set Up Your Client covers the client side of the exchange.

    Bottom-line: Drop-in will display multiple cards if you generate your Client Token using the customer_id that matches your customer.

    client_token = braintree.ClientToken.generate({
         "customer_id": a_customer_id
    })