API Errors When Adding Fake Card in Sandbox

Is there a specific set of mock debit card info we’re supposed to use when testing the dwolla-card.js add card functionality to achieve a successful response?

I’ve been playing with various garbage card/address data but I’m getting POST and CORS (yikes) errors. What should I do to get successful responses in the sandbox environment?

Input

Response

@shreya @spencer @kmoreira Any insight?

Hi Cody!

Try using 4111 1111 1111 1111 for the card number. It’s a mock card number for VISA.

In the meantime, we’ve created a ticket to add some test card info to our docs! Thanks for bringing this up!

2 Likes

Hey @shreya

Still no luck getting a successful response with that info unfortunately. I’m not getting an error message with the failure res so I think the CORs error is probably to blame.

What’s the next step in testing?

Also, as I type in the form fields, especially the card number field, the console is flooded with an Uncaught TypeError: Cannot set property 'innerHTML' of null. Is this a relevant issue?

Hi @Cody_Eddings! Apologies for the delay in response! :pray:

If this is from the codepen, it turns out I had omitted including the elements bin and preview in the html. This was what was causing the following error -

Uncaught TypeError: Cannot set property 'innerHTML' of null.

I have now updated the Codepen to include the elements, but have it hidden. That should get rid of those errors.

As for the CORS error, I wasn’t able to recreate it in my code. Would you be able to post the line in your code which triggers that error? Generally see a CORS error when a call to the API is being made from the Client side instead of the Server side. Is your card-funding-sources-token creation call perhaps coming from the Client side?

Let me know when you have a chance to update the code and if you see if any difference!

@shreya

I’ll add the missing elements, should fix the TypeError.

As for the CORS error, the error occurs when I click the dwolla-card.js submit button in my web app client after filling out the fields. The code to generate the card-funding-sources-token does indeed reside on my server and seems to be working fine. My web app calls my server to generate a token, the server returns the token, then I use the token to launch the dwolla-card.js iFrame. After filling out the form, I get the POST error I shared above.

Thoughts?

Not sure if it may be something to do with your app and how it’s set up :thinking: Would you be able to share any info about your app? And perhaps any code snippets of where you’re using the cards form code?

I tried both via the Codepen and locally, and I’m not running into any CORS errors. I had a team member try and they aren’t running into it either.

I did run into an error 401 Missing or invalid scopes for requested endpoint. after hitting submit, even though I have the correct account settings enabled for Cards in my Sandbox. The team is going to take a look into that error next week.

I just checked your account settings, and they look accurate as well. But in the meantime, if you do run into a similar error, let me know!

Hmm, I’ll share some snippets. Thanks Shreya

@shreya

<template>
  <div class="container-fluid" id="app">
    <div class="dwolla-form-container row" v-show="cardEntryFormLoaded">
      <div class="col">
        <div class="form-parent">
          <div id="cardContainer" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { AxiosError, AxiosResponse } from "axios";
const axios = require("axios").default;
const axiosHeader = {
  headers: {
  },
};

export default {
  methods: {
    getDwollaCardEntryToken(requestHeader) {
      axios
        .get(
          "http://localhost:8080/api/profiles/get_dwolla_card_entry_token",
          requestHeader
        )
        .then(function(response) {
          let dwollaToken = response.data;
          that.launchDwollaDebitCardEntry(dwollaToken);
        })
        .catch(function(error) {
        });
    },
    launchDwollaDebitCardEntry(token) {
      dwolla.configure("sandbox");
      dwolla.cards.start(
        "cardContainer",
        token,
        options
      )((err, res) => {
        console.log("launchDwolla err: " + err);
        console.log("launchDwolla res:" + res);
        //document.getElementById("cardContainer").style.display = "none";
        //document.getElementById("result").style.display = "block";
      });
      this.cardEntryFormLoaded = true;
    },
  },
  mounted() {
    let script = document.createElement("script");
    script.src = "https://cdn-b.dwolla.com/1/dwolla-cards.js";
    document.head.appendChild(script);
  },
};
</script>

Hi @Cody_Eddings – thanks for posting the code snippets! Apologies for the delay in getting back :pray:

I have an update! I was indeed able to recreate the CORs error by attempting to add a second card to a Customer using a previously used Card number. I wonder if that’s what’s happening in your case too?

I see that you were able to add a card to this Customer - 66c9216f-c2c7-4c20-9d47-74405b6814c4. Were you perhaps attempting to add another Card to the same customer using the card number 4111 1111 1111 1111? If so, maybe give one of the numbers here a try and let us know if it goes through with no errors!

Again, apologies for delay in figuring this out (I think this is what caused it on your end too).

2 Likes

That solved the CORs issue! Now I can get legitimate responses.

Great catch! Thanks.

2 Likes

Awesome! Glad we got it figured out!

Thanks for the update Cody!