Repository: braintree/braintree-web-drop-in (js)

Issue:
`options.preselectVaultedPaymentMethod` does not preselect the active vaulted payment method
### General information

* SDK/Library version: 1.23.0
* Environment: sandbox and production
* Browser and OS: any

### Issue description

When initializing with `braintree.dropin.create` with a token connected to a customer ID the [`preselectVaultedPaymentMethod` is `true` by default](https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html#.create), but a different card shows at the top of the UI and is selected than the users active payment method.

The below is what I would expect and to me this seems like an issue... or I'm doing something wrong. Would someone clarify if this is expected?

**Expected**:
The users active payment method should show selected at the top of the UI list of payment methods.

**Actual**:
A random payment method is selected and shown at the top of the list of payment methods in the UI.

> payload from `gateway.paymentMethod.find(token)`
> https://developers.braintreepayments.com/reference/request/payment-method/find/node
<img width="212" alt="Screen Shot 2020-08-22 at 2 13 25 PM" src="https://user-images.githubusercontent.com/747743/90962928-c4afef80-e481-11ea-87df-c6cbcba11bb3.png">

> issue (note the text we add from the user's active payment method conflicting with the selected card.
<img width="889" alt="Screen Shot 2020-08-22 at 2 13 51 PM" src="https://user-images.githubusercontent.com/747743/90962962-12c4f300-e482-11ea-8c06-5dbb0d6bd549.png">


Pull request:
Add `showDefaultPaymentMethodFirst` option to create
closes #652

### Summary

Allows whether to show the default payment method first when displaying vaulted payment methods to be configured.

### Checklist

- [x] Added a changelog entry

### Authors
> List GitHub usernames for everyone who contributed to this pull request.

- @crookedneighbor 


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 33f34aa..1bdb6f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ CHANGELOG
 unreleased
 ----------
 - Fix issue where payment method text may be clipped
+- Add ability to let the Braintree API decide which payment method to show first (typically, the last payment method added to the customer) instead of showing the payment method designated as the customer's default in the Braintree control panel
+  ```js
+  braintree.dropin.create({
+    // other config options
+    showDefaultPaymentMethodFirst: false
+  });
+  ```
 
 1.25.0
 ------
diff --git a/src/dropin-model.js b/src/dropin-model.js
index 2e51614..41006d7 100644
--- a/src/dropin-model.js
+++ b/src/dropin-model.js
@@ -301,7 +301,7 @@ DropinModel.prototype.getVaultedPaymentMethods = function () {
   }
 
   return self._vaultManager.fetchPaymentMethods({
-    defaultFirst: true
+    defaultFirst: this.merchantConfiguration.showDefaultPaymentMethodFirst !== false
   }).then(function (paymentMethods) {
     return self._getSupportedPaymentMethods(paymentMethods).map(function (paymentMethod) {
       paymentMethod.vaulted = true;
diff --git a/src/index.js b/src/index.js
index 3213d98..dda8e14 100644
--- a/src/index.js
+++ b/src/index.js
@@ -267,6 +267,8 @@ var VERSION = '__VERSION__';
  *
  * @param {boolean} [options.preselectVaultedPaymentMethod=true] Whether or not to initialize Drop-in with a vaulted payment method pre-selected. Only applicable when using a [client token with a customer id](https://developers.braintreepayments.com/reference/request/client-token/generate/#customer_id) and a customer with saved payment methods.
  *
+ * @param {boolean} [options.showDefaultPaymentMethodFirst=true] When `true` or left out, the customer's default payment method will be displayed first in the list of vaulted payment methods. When `false`, the Braintree API will determine which payment method to display first, typically the latest payment method added to the customer. Only applicable when using a [client token with a customer id](https://developers.braintreepayments.com/reference/request/client-token/generate/#customer_id) and a customer with saved payment methods.
+ *
  * @param {function} [callback] The second argument, `data`, is the {@link Dropin} instance. Returns a promise if no callback is provided.
  * @returns {(void|Promise)} Returns a promise if no callback is provided.
  * @example


Test patch:
diff --git a/test/unit/dropin-model.js b/test/unit/dropin-model.js
index 64cc904..0773f08 100644
--- a/test/unit/dropin-model.js
+++ b/test/unit/dropin-model.js
@@ -1246,6 +1246,21 @@ describe('DropinModel', () => {
       }
     );
 
+    test(
+      'fetches last used payment method instead of default when configured',
+      () => {
+        testContext.model.merchantConfiguration.showDefaultPaymentMethodFirst = false;
+        testContext.model.isGuestCheckout = false;
+        testContext.vaultManager.fetchPaymentMethods.mockResolvedValue([]);
+
+        return testContext.model.getVaultedPaymentMethods().then(() => {
+          expect(testContext.vaultManager.fetchPaymentMethods).toBeCalledWith({
+            defaultFirst: false
+          });
+        });
+      }
+    );
+
     test('only resolves supported payment method types', () => {
       testContext.model.isGuestCheckout = false;
       testContext.vaultManager.fetchPaymentMethods.mockResolvedValue([{