Magento 2 - build a unique id for the term's checkbox for payment methods using vault

Question

For payment methods using vault, the id generated for term's checkbox is duplicated as the payment method name is same.

/**
         * build a unique id for the term checkbox
         *
         * @param {Object} context - the ko context
         * @param {Number} agreementId
         */
        getCheckboxId: function (context, agreementId) {
            var paymentMethodName = '',
                paymentMethodRenderer = context.$parents[1];

            // corresponding payment method fetched from parent context
            if (paymentMethodRenderer) {
                // item looks like this: {title: "Check / Money order", method: "checkmo"}
                paymentMethodName = paymentMethodRenderer.item ?
                  paymentMethodRenderer.item.method : '';
            }

            return 'agreement_' + paymentMethodName + '_' + agreementId;
        },

I see this code in checkout-agreements.js. However, in my case, cybersource vault method results in same paymentMethodName, leading it to duplication if there is more than one stored payment/ saved card.

I need help in coding the id attribute of term's checkbox dynamically here:

<input type="checkbox" class="required-entry"
                       data-bind="attr: {
                                    'id': $parent.getCheckboxId($parentContext, agreementId),
                                    'name': 'agreement[' + agreementId + ']',
                                    'value': agreementId
                                    }"/>

and its respective 'for' attribute of label.

Answer 1

I could resolve the issue in this way.

I added $index property of $parentContext. However in this case the parent is 3 levels up.

<input type="checkbox" class="required-entry"
                       data-bind="attr: {
                                    'id': $parentContext.$parentContext.$parentContext.$index() + '_' + $parent.getCheckboxId($parentContext, agreementId),
                                    'name': 'agreement[' + agreementId + ']',
                                    'value': agreementId
                                    }"/>

I added $index as prefix to existing id. One can add as suffix also.

$parentContext.$parentContext.$parentContext.$index() same is added for 'for' attribute of respective label.