Add option to designate a default Payment Method

[lukeb0x]

Task Summary: I needed to customize our widget so that the "card" view would be displayed by default for everyone, with users being able to select one of the alternate options by clicking the "choose another way to pay" button.

How It Went: I could find only one mention of a requirement similar to mine way back in issue #458, and the takeaway from that thread was that I should probably just use hosted fields instead. But why would I change course and spend only a few hours doing the sensible thing when I could spend many hours doing it the unnecessarily complicated way? All to say, after throwing an embarrassing amount of spaghetti at the wall, I finally stumbled across this little gem in the source code:

this._mainView.setPrimaryView(this._model.getInitialViewId())

which I reworked ever so slightly to go into my dropin.create() function:

        braintree.dropin.create({
            authorization: '{{ client_token }}',
            container: '#dropin-container',
            paypal: {
                .....
            },
            venmo: {
                ...
            },
            applePay: {
             .....
        }, 
        function (createErr, instance) {
           // Reworking the setPrimaryView() to display my desired payment method view by default //
            instance._mainView.setPrimaryView('card');
          // I can't believe this is all it took I am a sham //
        ......
        .......

And wouldn't you know it, it actually worked.

In Closing: Although I'm almost positive there is a more elegant way of achieving this, I'm leaving it here to highlight a potential feature that at least two people would benefit from (i.e. an option to designate a default payment method) , as well as for anyone who may have a similar requirement for their widget

[cgdibble]

Hey @lukeb0x thanks for the submission! This is certainly a great suggestion, and we'll definitively be adding it to the backlog. I do, as a matter of caution, want to point out that referencing the pseudo "private" props, indicated with the underscore prefix (e.g. instance._mainView) is risky.

It does achieve what you are after, but it does so by using internal aspects of the SDK. This is risky simply because we do not adhere to semantic versioning with regards to internal functions/objects/data in the same way we do for publicly facing attributes.

While we don't have a plan, nor a motivation, to change instance._mainView, it is worth noting that it is still possible and thus is not advisable to use directly.

[lukeb0x]

Got it, thank you for the warning @cgdibble. Is there perhaps a less risky alternative to this method? Or is this forbidden solution the best that can be hoped for until an official implementation comes around?

[andrew-ignatiev]

Hey @lukeb0x, If you are interested you can try to achieve similar behaviour with help of paymentOptionPriority setting, you can find more details about it here https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html

So in general the idea can be described as follow:

• Create custom control element to Choose another way to pay
• By default use paymentOptionPriority: ['card'] it will open card view only even if you have settings for other payment methods.
• By clicking on custom button Choose another way to pay re create dropin instance with paymentOptionPriority containing all necessary payment methods.

I've not tried this method https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#updateConfiguration but seems you should be able to update paymentOptionPriority and as result update view without re creating dropin instance.

[hollabaq86]

Hey folks, closing this issue as it's a feature request and not a :bug:. We don't have an ETA on if or when this will get added to the library, but we are evaluating it!

For internal tracking, issue 1973