Ecommerce SDK error in console

Question

question

kirank asked Apr 15, '20 David Marginian Deactivated commented Apr 28, '20

Ecommerce SDK error in console

Hi,

We are seeing an error in sdk.js. :

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.t.registerElementEventListener (sdk.js:formatted:133)
    at e.addEventListener (sdk.js:formatted:385)
    at my_setup (mypayment.js:439)

SDK: https://checkout.sandbox.dev.clover.com/sdk.js

mypayment.js:439:

                const clover = new Clover('xyz');
                const elements = clover.elements();
                const styles = {
                    input: {
                      'width'      : '20em',
                      'font-size'  : '20px',
                      'color'      : '#43b02a',
                      'border'     : '1px gray dotted',
                      'padding'    : '5px',
                      'margin'     : '3px',
                      'font-weight': 'bold'
                    }
                  };
                  
                  const card = elements.create('CARD', styles);
                  card.mount('#clover-card-element');
                // Create an instance of the card Element.
                // Handle real-time validation errors from the card Element.

//Below is Line 439:  *********************************
                card.addEventListener('change', function(event) {
                    if (event.error) {
                    displayError.textContent = event.error.message;
                    } else {
                    displayError.textContent = '';
                    }
                });

I'm fairly sure this did not occur couple of weeks back when we completed this feature.

Is this a known issue?

e-commerce api

9

10 |2000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

David Marginian ♦♦ commented · Apr 15, 2020 at 11:00 AM

When did the change handler for card used to fire? It looks like the listeners are split up per field (perhaps this changed) - https://docs.clover.com/clover-platform/docs/using-the-clover-hosted-iframe.

0 ·

kirank David Marginian ♦♦ commented · Apr 15, 2020 at 03:31 PM

It used to fire for any of the elements. Upon rereading the docs, the document has changed. Now I don't follow how it actually works - its pretty confusing. We didn't seem to have any issue following old document.

For instance in https://docs.clover.com/clover-platform/docs/using-the-clover-hosted-iframe

const card = new elements.create('CARD', styles);

There is Sample iframe validation response section. It doesn't say when that is fired. Not sure how its intended consumed also.

The new document removes card's 'change' event. This make use handle every single element's error. For simple use cases, this is not necessary and leads to bloated code.

Can we get clarification on what need to be doing for handling errors?

Our preference would be fire a single event on card and we display all errors in in one place (UX wise its pretty ok - User generally makes 1 mistake at a time).

0 ·

David Marginian ♦♦ kirank commented · Apr 15, 2020 at 03:45 PM

I have passed your concerns along to the ecomm team, I'll get back to you when I hear back.

0 ·

kirank David Marginian ♦♦ commented · Apr 15, 2020 at 03:43 PM

I tried to continue with the latest doc... But there is more errors (the card number was intentionally wrong):

card-cvv_10.entry.js:262 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
    at cardNumberValidator (card-cvv_10.entry.js:262)
    at card-cvv_10.entry.js:231
    at Array.forEach (<anonymous>)
    at validate (card-cvv_10.entry.js:229)
    at MessageElement.onGetFieldData (card-cvv_10.entry.js:13672)
    at MessageElement.postMessageHandler (card-cvv_10.entry.js:13593)
    at index-59093e9f.js:871

Just as basic principle SDK should not error out like this. It should handle the error and log them in console. Quiet failures are very scary for production.

0 ·

David Marginian ♦♦ kirank commented · Apr 15, 2020 at 05:47 PM

Can you please include a link to a codepen or github repo where the problem can be reproduced?

0 ·

Show more comments

Welcome to the
Clover Developer Community

Answer 1 · 2020-04-28T18:25:19Z

kirank answered Apr 28, '20 David Marginian Deactivated commented Apr 28, '20

Writing here to avoid too deeply nested comments. @ do we have an update? Is this a narrow issue that only we are observing. This prevents payments if user made one small error and we have no way of notifying the user. We can't even catch this error in code.

1

10 |2000

Attachments: Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

David Marginian ♦♦ commented · Apr 28, 2020 at 06:49 PM

I am watching the issue and will provide you an update when I see one.

0 ·

question