Sample Vue 3 App for Push-To-Debit Integration?

API Support Funding Sources
#1

Does anyone have sample code showing an example of integrating the dwolla-card.js library into a Vue 3 app?

Specifically i’m getting a bit tripped up with the correct way to include the dwolla-card.js lib when i’m using Vue Single File Components which don’t allow in the page HTML code(the block, where the UI code lives).

Here’s my attempted code:


//UI code goes here

<script lang="ts">
export default defineComponent({
  mounted() {
    let recaptchaScript = document.createElement("script");
    recaptchaScript.setAttribute(
      "src",
      "https://cdn-b.dwolla.com/1/dwolla-cards.js"
    );
    document.head.appendChild(recaptchaScript);

 //ERROR: dwolla not recognized
dwolla.configure("sandbox");
  },
});
</script>

I’m not importing the dwolla lib correctly because I can’t make calls to the dwolla client for .configure()

#2

Is there an import I should be adding to the beginning of my script? Something like import dwolla from "dwolla";?

#3

Hi @Cody_Eddings, thanks for posting!

According to this article on loading external scripts to a Vue component, you look to be on the right path in terms of including the cdn script in your component using the mounted function. I’d check that your syntax is accurate, and that you’re using the dwolla function after you’ve included the script. You might need to include the dwolla configuration line outside of the mounted() function for it to be recognized by your app.

Let me know if that works!

1 Like
#4

Continuing down this path ended up being correct.

The biggest hurdle was realizing that the IDE errors I was seeing were caused by TypeScript not knowing how to type the Dwolla client correctly, but the importing via the method I posted indeed works.

Thanks Shreya

1 Like
#5

Thanks for posting an update, Cody!

1 Like