question

kirank avatar image
kirank asked ·

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 comments
10 |2000 characters needed characters left characters exceeded

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

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 Likes 0 ·
kirank avatar image kirank David Marginian ♦♦ ·

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 Likes 0 ·

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

0 Likes 0 ·
kirank avatar image kirank David Marginian ♦♦ ·

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 Likes 0 ·

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

0 Likes 0 ·
Show more comments

1 Answer

· Write an Answer
kirank avatar image
kirank answered ·

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 comment
10 |2000 characters needed characters left characters exceeded

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

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

0 Likes 0 ·

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

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

Welcome to the
Clover Developer Community