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.

1 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.

  • This solved a bug for me. Thanks for this. I did switch it around so the ID becomes $parent.getCheckboxId($parentContext, agreementId) + '_' + $parentContext.$parentContext.$parentContext.$index(). This way, the ID doesn’t start with a number, making easier it to process as a selector.
    – ACJ
    Oct 19, 2020 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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