Jquery or javascript validation

@kmoreira @shreya For dwolla card.js I have added styling and now it looks great. Along with that Can I also add jquery or javascript validation for fields? Is that possible? Because preview can’t be shown for error purpose

Hi @sud – I’m afraid there isn’t much that can be done with the form fields since they are iframes. They do contain validation though.

@shreya and @kmoreira
Like its showing errors in embed error list in JSON, So I want to show user a valid proper error message.

Hi @sud

Can you share more information on this? (code, screenshots, etc.)

I can see error here, But how can i show it in proper text format in UI.
This JSON is not proper way to show for end user.

Any suggestions?

Hi @sud

I would try doing a conditional and returning the response as an alert() as a first take.

Something like pseudo code:
// if successful
//return
//else
//return alert(error message here)

Or you could just do it in your .catch()

//.then((response) => response.json())
//.then(response => {Alert.alert(response.status, response)});

@kmoreira That doesn’t comes under response, It doesn’t displays when user clicks on “Go” button
That is something that displays when users enters card data.
As soon as we enter valid card details this “preview” updates

You can see in screenshot, if I just type 0 at the end and if I remove it, how preview is updated

Oh okay, I see. Sorry about that, @sud.

Would you be able to share your code?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdn-b.dwolla.com/1/dwolla-cards.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">

  $(document).ready(function () {

    const options = {

      stylesheets: ['/api/css/card.css'],

      styles: {

        buttonText: 'Go!'

      }

    };

    dwolla.configure('sandbox');

    const token = '<token  goes here';

    dwolla.cards.start(

      'cardContainer',

      token,

      options

    )((err, res) => {

        document.getElementById('cardContainer').style.display = 'none';

        if(err){

          const errorMessage = err.message || 'Something went wrong';

          alert(errorMessage);

        }

    });

  });

</script>
<div class="action">

  <h3>Add a payment card!</h3>

  <div style="padding-bottom: 25px">

    <div id="cardContainer"></div>

  </div>

</div>

<pre style="display: none" id="preview"></pre>

<pre style="display: none" id="bin"></pre>

Can i get status on it?

Is there a reason why your dwolla-cards.js script isn’t wrapped inside the <head>?

https://developers.dwolla.com/guides/dwolla-cards-js/add-a-debit-card/configure-and-call-function#dwolla-cardsjs-example