Payment SDK iframe.

Question

question

Saher asked Mar 23, '20 Saher commented Mar 24, '20

Payment SDK iframe.

Does anyone know how to get the validation error message from clover.createToken() function, while initiating the payment.

Please help me below is the code.

$("#clover-payment").on("submit",function(e){
        event.preventDefault();
        clover
        .createToken()
          .then(function(result) {
            if (result.errors) {
              Object.values(result.errors).forEach(function (value) {
                displayError.textContent = value;
              });
            } else {
              cloverTokenHandler(result.token);
            }
          }).catch(function(e){
              debugger
              console.log(e)
          });
    })

I didn't get the error message, but the sdk print some error in console with the default field is required.

Payments

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 · Mar 23, 2020 at 03:06 PM

Can you provide the error you are seeing in the console?

0 ·

Welcome to the
Clover Developer Community

Answer 1 · 2020-03-23T19:38:19Z

kirank answered Mar 23, '20 David Marginian Deactivated commented Mar 23, '20

In the form, a div with id = "card-errors" is needed. See documents (Search for card-errors).

Then in your JS where you mount the card elements handle the 'change' event for "card" object. Same place in docs where you find HTML for card-errors, click the javascript tab to see sample code.

3

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 · Mar 23, 2020 at 07:49 PM

Are you answering your own question here?

0 ·

kirank David Marginian ♦♦ commented · Mar 23, 2020 at 09:18 PM

I was not the OP. :)

0 ·

David Marginian ♦♦ kirank commented · Mar 23, 2020 at 09:19 PM

Losing my mind, thanks.

0 ·

Answer 2 · 2020-03-24T05:44:45Z

Saher answered Mar 24, '20 Saher commented Mar 24, '20

I already added the things , please look into my code -

<form method="POST" id='clover-payment' class="payment-form">
        {
                 { csrf_field()}}
        <input type="hidden" name="payment_token" id="payment_token"/>
        <div class="form-row top-row">
            <div id="amount" class="field">
                <!-- <input name="amount" placeholder="Amount"> -->
                Pay 10.50
            </div>
        </div>
        
        <div class="form-row">
            <div id="card-number" class="field"></div>
            <span  id="card_error" class="error_message"></span>
        </div>
        <div class="form-row">

            <div id="card-date" class="field third-width"></div>
            <span  class="error_message"></span>

        </div>
        <div class="form-row">

            <div id="card-cvv" class="field third-width"></div>
            <span  class="error_message"></span>

        </div>
        <div class="form-row">

            <div id="card-postal-code" class="field third-width"></div>
            <span  class="error_message"></span>

        </div>
        
        <div id="card-errors" role="alert"></div>
        
        <div class="button-container">
            <button>Submit Payment</button>
        </div>
    </form>

And here is my javascript code -

$("#clover-payment").on("submit",function(e){
                debugger
                event.preventDefault();
                clover
                .createToken()
                .then(function(result) {
                    if (result.errors) {
                        console.log('result',result)
                        Object.values(result.errors).forEach(function (value) {

                            displayError.innerHTML = value;
                        });
                    } else {
                        cloverTokenHandler(result.token);
                    }
                }).catch(function(e){
                    debugger
                    console.log(e)
                });
            })
            
            const styles = {
                input: {
                    'width': '20em',
                    'font-size': '15px',
                    'color': '#4262ff',
                    'border': '1px gray solid',
                    'padding': '3px',
                    'margin': '3px',
                    'height' : '30px'
                }
            };
            
            const card =  elements.create('CARD', styles);
            
            const cardNumber = elements.create('CARD_NUMBER', styles);
            const cardDate = elements.create('CARD_DATE', styles);
            const cardCvv = elements.create('CARD_CVV', styles);
            const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);
            
            cardNumber.mount('#card-number');
            cardDate.mount('#card-date');
            cardCvv.mount('#card-cvv');
            cardPostalCode.mount('#card-postal-code');    
            
            const displayError = document.getElementById('card-errors');
            // Handle real-time validation errors from the card Element.
            cardNumber.addEventListener('change', function(event) {
                if (event.error) {
                    $('#card_error').html(event.error.message)
                } else {
                    $('#card_error').html('')
                }
            });
            
            cardDate.addEventListener('change', function(event) {
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });
            
            cardCvv.addEventListener('change', function(event) {
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });
            
            cardPostalCode.addEventListener('change', function(event) {
                debugger
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });

2

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.

kirank commented · Mar 24, 2020 at 08:27 AM

Assuming you have the following, then:

const clover = new Clover(publickey);

const elements = clover.elements();

Few things need to be cleaned up:

1. cardNumber error handler is using Jquery and potentially unavailable ID (card_error)

2. cardPostalCode handler -- has an extra 'debugger' ?

0 ·

Saher kirank commented · Mar 24, 2020 at 09:07 AM

My main concern is I didn't getting the error when submit the form without input anything in any of the fields. then how will I validate the form.

0 ·

question