Customer Data error for ParadoxLabs Authnetcim plugin

[delfidream]

After fixing an issue with region-updater.js for this plugin I'm running into another error.

This plugin for authorize.net allows to save a credit card in "My Payment Methodths" under "My Account" . After completing credit card information and clicking on submit, saving the credit card fails.
It works under Luma so it's a breeze integration issue.
It seems to break at function from line 284 in customer-data.js

$(document).on('submit', function (event) {
       var names;

       if (!event.target.method.match(/post|put|delete/i)) {
           return;
       }

       names = sectionConfig.getAffectedSections(event.target.action);

       if (!names.length) {
           return;
       }

       customerData.invalidate(names);
       $.storage.remove(names);
   });

giving this error:

Any help or clue to get this solved?

[vovayatsyuk]

I wonder why it's working on Luma without errors 🤔

Looks like this line was recently updated in Luma, but not released yet: magento/magento2@f3c3f7e

I've just applied the same fix in Breeze: breezefront/module-breeze@1bb8975

[delfidream]

thank you Vova. That error seems to be gone now, I'm struggling though to make the rest work.
My goal is to make this Paradox Labs authorize.net plugin compatible and it's getting very difficult.

I'm reading the documentation, I have a quick example now see if I understand correctly.

In order to make this cardFormatter component work, I've added this line:

 `   component: 'ParadoxLabs_TokenBase/js/cardFormatter', // This line is required in Breeze`

here:

define([
    "jquery",
    'Magento_Payment/js/model/credit-card-validation/credit-card-number-validator'
], function($, cardNumberValidator) {
    "use strict";


    $.widget('mage.tokenbaseCardFormatter', {
        component: 'ParadoxLabs_TokenBase/js/cardFormatter', // This line is required in Breeze
        options: {
            ccInputSelector: '[autocomplete="cc-number"]',
            separator: ' ',
            ccTypeSelector: '',
            ccTypeContainer: ''
        },

        _create: function() {
            var ccInput = this.element.find(this.options.ccInputSelector);

            if (ccInput.length > 0) {
                ccInput.on('keydown', this.handleKeydown.bind(this))
                       .on('input paste', this.formatCc.bind(this));
                console.log('si soy');
            }

            if (this.options.ccTypeSelector !== '' && this.options.ccTypeContainer !== '') {
                ccInput.on('input change keyup paste', this.detectCcType.bind(this));
            }
        },

        /**
         * Track cursor through the separator for deletes, etc.
         */
        handleKeydown: function(e) {
            var ccInput = this.element.find(this.options.ccInputSelector)[0];
            var cursor = ccInput.selectionStart;

            if (ccInput.selectionEnd !== cursor) {
                return;
            }

            if (e.which === 46 && ccInput.value[cursor] === this.options.separator) {
                ccInput.selectionStart++;
            } else if (e.which === 8 && cursor && ccInput.value[cursor - 1] === this.options.separator) {
                ccInput.selectionEnd--;
            }
        },

        /**
         * Format the CC number element with nice separators.
         */
        formatCc: function() {
            var ccInput = this.element.find(this.options.ccInputSelector)[0];
            var value   = ccInput.value;
            var cursor  = ccInput.selectionStart;

            if (value.substring(0,4) === "XXXX") {
                return;
            }

            var matches = value.substring(0, cursor).match(/[^0-9]/g);
            if (matches) {
                cursor -= matches.length;
            }

            value = value.replace(/[^0-9]/g, "").substring(0, 19);

            // AmEx cards get separated different, because they're special.
            var typeIsAmEx = false;
            if (value.substring(0,2) === "34" || value.substring(0,2) === "37") {
                typeIsAmEx = true;
            }

            var formatted = "";
            for (var i=0, n=value.length; i<n; i++) {
                if (this.shouldSeparate(i, typeIsAmEx)) {
                    if (formatted.length <= cursor) {
                        cursor++;
                    }

                    formatted += this.options.separator;
                }

                formatted += value[i];
            }

            if (formatted === ccInput.value) {
                return;
            }

            ccInput.value = formatted;
            ccInput.selectionEnd = cursor;
        },

        /**
         * Determine whether a card number should be separated at the given index.
         *
         * @param int i
         * @param bool isAmEx
         * @returns bool
         */
        shouldSeparate: function(i, isAmEx) {
            // Separate AmEx cards at 4 and 10 rather than quadruplets.
            if (isAmEx === true) {
                return i === 4 || i === 10;
            }

            return i && i % 4 === 0;
        },

        /**
         * Detect CC type as number is entered, and update active type.
         */
        detectCcType: function() {
            this.updateCcType(null);

            var cc_no = this.element.find(this.options.ccInputSelector).val().replace(/\D/g,'');
            var result = cardNumberValidator(cc_no);

            if ((result.isPotentiallyValid || result.isValid) && result.card !== null) {
                this.updateCcType(result.card.type);
            }
        },

        /**
         * Update active CC type to the selected value.
         *
         * @param string creditCardType
         */
        updateCcType: function (creditCardType) {
            this.element.find(this.options.ccTypeSelector).val(creditCardType).trigger('change');

            var typeContainer = $(this.element).find(this.options.ccTypeContainer);
            typeContainer.find('._active').removeClass('_active');
            typeContainer.find('[data-type=' + creditCardType + ']').addClass('_active');
        }
    });

    return $.mage.tokenbaseCardFormatter;
});

am I supposed to do something else than adding that line? I'm lost on how to integrate it properly

[vovayatsyuk]

1. You need to create breeze_default.xml with component registration. After this step, if done properly, the file should be downloaded by Breeze if this component found on the page. Use developer toolbar to check if this file gets downloaded.
2. Then you need to add component: .... After this step, if done properly, breeze will execute _create method if this component found on the page.

Can you share the link to your integration repo? It would be much easier to help in this case.

[delfidream]

Hi Vova, first of all thank you for your help. I'm very sorry I cannot share code in an easier way for you to help, I still appreciate it.
Here are some screenshots, I did create breeze_default.xml with no luck. The js is called under ParadoxLabs/Authnetcim but the js is placed in ParadoxLabs/TokenBase. Could the location affect? I've registered breeze_default in ParadoxLabs/TokenBase only

ParadoxLabs/TokenBase/view/base/layout/breeze-default.xml

ParadoxLabs/TokenBase/view/base/web/js/cardFormatter.js

ParadoxLabs/Authnetcim/view/frontend/templates/customer/form/cc.phtml

[vovayatsyuk]

If I understand properly ParadoxLabs uses tokenbaseCardFormatter name for its component in cc.phtml

Try changing the name in breeze_default.xml from ParadoxLabs_TokenBase/js/cardFormatter to tokenbaseCardFormatter.

[delfidream]

tried with no luck, first only changing name in breeze_default. Then I also changed the component name in cardFormatter.js.
None worked :(

[vovayatsyuk]

I just tried to do the same, and it works fine:

My phtml:

<script type="text/x-magento-init">
    {
        "[data-gallery-id='<?= $galleryId ?>']": {
            "mage/gallery/gallery": {
                "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
                "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>
            },
            "tokenbaseCardFormatter": {}
        }
    }
</script>

My XML:

<item name="default" xsi:type="array">
    <item name="items" xsi:type="array">
        <item name="tokenbaseCardFormatter" xsi:type="array">
            <item name="path" xsi:type="string">Swissup_Breeze/js/components/aaa</item>
        </item>
...

aaa.js - is the copy of your js script.

[delfidream]

Hi @vovayatsyuk I still have no luck making this work, there's probably something else missing.
This is the full plugin https://store.paradoxlabs.com/magento2-authorize-net-cim-payment-module.html
can you help get it integrated properly?
It works for payments @ checkout. The only thing not working is under my account / my payment options the ability to add a new card there. It doesn't work, but like I mentioned it works fine at checkout.
And it works properly in luma theme.
Thank's in advance in case you can give it a try.

[vovayatsyuk]

No, since it wasn't released yet. I recommend applying it manually.

[delfidream]

Ok, I applied it manually and tested but cannot get it to work

https://watch.screencastify.com/v/siZbYnCqp1vMbxgtypvd

tested it on original breeze blank and I also get the "Accept is not defined" error.

[vovayatsyuk]

Thank you!

For some reason, accept.js is not used in my environment. Maybe it's because I use a sandbox account? I will finish the integration on Monday.

Have a nice weekend!

[delfidream]

monday is perfect, thank you so much for the help. Have a nice weekend as well!

[vovayatsyuk]

Fixed: breezefront/module-breeze-paradoxlabs-authnetcim@592e458

[delfidream]

Hi Vova!
Wowo! It's working now!! Thank you so much for your assistance.

To summarize, in order for paradox authorize.net module to work, your integration module is needed (and the patch stated in the repo):
https://github.com/breezefront/module-breeze-paradoxlabs-authnetcim

but also fixes un customer-data.js and region-data.js already added to breeze:

breezefront/module-breeze@1bb8975
breezefront/module-breeze@ee66a4a

as well as this one:
breezefront/module-breeze@0e2c8c5

Thank you for such great support