2

Environment: Magento 2.1.2

We are only using a unique payment method. We use a 2 steps checkout:

  1. Shipping Info
  2. Payment Method

The user needs to check the only option (Braintree). I think that's absurd and would like to know how to auto-select the first option. I found here in SE some Magento 1 solutions but doesn't work in the new Magento branch.

Thanks!

6

Create this file in your theme:

<theme_dir>/Magento_Braintree/web/js/view/payment/method-renderer/hosted-fields.js

Contents:

define([
    'jquery',
    'Magento_Braintree/js/view/payment/method-renderer/cc-form',
    'Magento_Braintree/js/validator',
    'Magento_Vault/js/view/payment/vault-enabler',
    'mage/translate'
], function ($, Component, validator, VaultEnabler, $t) {
    'use strict';

    return Component.extend({

        defaults: {
            template: 'Magento_Braintree/payment/form',
            clientConfig: {

                /**
                 * {String}
                 */
                id: 'co-transparent-form-braintree'
            },
            isValidCardNumber: false
        },

        /**
         * @returns {exports.initialize}
         */
        initialize: function () {
            this._super();
            this.vaultEnabler = new VaultEnabler();
            this.vaultEnabler.setPaymentCode(this.getVaultCode());

            this.selectPaymentMethod(); // added this line

            return this;
        },

        /**
         * Init config
         */
        initClientConfig: function () {
            this._super();

            // Hosted fields settings
            this.clientConfig.hostedFields = this.getHostedFields();
        },

        /**
         * @returns {Object}
         */
        getData: function () {
            var data = this._super();

            this.vaultEnabler.visitAdditionalData(data);

            return data;
        },

        /**
         * @returns {Bool}
         */
        isVaultEnabled: function () {
            return this.vaultEnabler.isVaultEnabled();
        },

        /**
         * Get Braintree Hosted Fields
         * @returns {Object}
         */
        getHostedFields: function () {
            var self = this,
                fields = {
                    number: {
                        selector: self.getSelector('cc_number')
                    },
                    expirationMonth: {
                        selector: self.getSelector('expirationMonth'),
                        placeholder: $t('MM')
                    },
                    expirationYear: {
                        selector: self.getSelector('expirationYear'),
                        placeholder: $t('YY')
                    }
                };

            if (self.hasVerification()) {
                fields.cvv = {
                    selector: self.getSelector('cc_cid')
                };
            }

            /**
             * Triggers on Hosted Field changes
             * @param {Object} event
             * @returns {Boolean}
             */
            fields.onFieldEvent = function (event) {
                if (event.isEmpty === false) {
                    self.validateCardType();
                }

                if (event.type !== 'fieldStateChange') {

                    return false;
                }

                // Handle a change in validation or card type
                if (event.target.fieldKey === 'number') {
                    self.selectedCardType(null);
                }

                if (event.target.fieldKey === 'number' && event.card) {
                    self.isValidCardNumber = event.isValid;
                    self.selectedCardType(
                        validator.getMageCardType(event.card.type, self.getCcAvailableTypes())
                    );
                }
            };

            return fields;
        },

        /**
         * Validate current credit card type
         * @returns {Boolean}
         */
        validateCardType: function () {
            var $selector = $(this.getSelector('cc_number')),
                invalidClass = 'braintree-hosted-fields-invalid';

            $selector.removeClass(invalidClass);

            if (this.selectedCardType() === null || !this.isValidCardNumber) {
                $(this.getSelector('cc_number')).addClass(invalidClass);

                return false;
            }

            return true;
        },

        /**
         * Trigger order placing
         */
        placeOrderClick: function () {
            if (this.validateCardType()) {
                $(this.getSelector('submit')).trigger('click');
            }
        },

        /**
         * @returns {String}
         */
        getVaultCode: function () {
            return window.checkoutConfig.payment[this.getCode()].ccVaultCode;
        }
    });
});

This is just overwriting the core script to add one line - this.selectPaymentMethod() in the initialize function.

You'll need to delete contents of pub/static (except for .htaccess file) and var/view_preprocessed and possible clear the browser cache to be sure the new script gets picked up.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.