What is the best method for incorporating card components from Stripe into a Vue.js application?

Question

What is the best method for incorporating card components from Stripe into a Vue.js application?

I am currently facing an issue with implementing Stripe in my Vue.js project. Despite following the documentation provided, I am encountering errors such as "stripe is not defined" and "Uncaught ReferenceError: h is not defined".

Initially, I created a payment.vue page to include the Stripe element form, and attempted various methods like linking the JavaScript file to this page, adding the script given by Stripe, or placing both scripts in the index.html file. However, none of these solutions seem to work. Can someone offer guidance on the best approach for integrating the Stripe element form and where to position the script (https://js.stripe.com/v3/)? Thank you for any assistance provided.

javascript vue.js stripe-payments

Answer 1

Answer №1

One way I prefer to do it is by loading the Stripe script in the footer or header of my site or application template outside of the Vue app element.

<!--- start of vue app container -->
<div id="app"> 
   <v-content>
      //...
   </v-content> 
</div>
<!--- end of app container -->

<script src="{{url('/js/app.js')}}"></script>
<script src="https://js.stripe.com/v3/"></script>

This method is recommended by Stripe for improved security.

To maximize Stripe’s fraud detection capabilities, it's advised to include this script on all pages of your site, not just the checkout page. This enables Stripe to identify suspicious activity that may indicate fraudulent behavior as customers navigate your website.

https://stripe.com/docs/stripe-js/reference#including-stripejs

If you still wish to directly include the script in your component, you can achieve it within the component's mounted() function as shown below:

<script>
  export default {
    data: () {
       return {
          //...
       }
    },
    mounted() {
       let stripeJs = document.createElement('script');
       stripeJs.setAttribute('src', 'https://js.stripe.com/v3/');
       document.head.appendChild(stripeJs);
    },
  }
</script>

Answer 2

One way I prefer to do it is by loading the Stripe script in the footer or header of my site or application template outside of the Vue app element.

<!--- start of vue app container -->
<div id="app"> 
   <v-content>
      //...
   </v-content> 
</div>
<!--- end of app container -->

<script src="{{url('/js/app.js')}}"></script>
<script src="https://js.stripe.com/v3/"></script>

This method is recommended by Stripe for improved security.

To maximize Stripe’s fraud detection capabilities, it's advised to include this script on all pages of your site, not just the checkout page. This enables Stripe to identify suspicious activity that may indicate fraudulent behavior as customers navigate your website.

https://stripe.com/docs/stripe-js/reference#including-stripejs

If you still wish to directly include the script in your component, you can achieve it within the component's mounted() function as shown below:

<script>
  export default {
    data: () {
       return {
          //...
       }
    },
    mounted() {
       let stripeJs = document.createElement('script');
       stripeJs.setAttribute('src', 'https://js.stripe.com/v3/');
       document.head.appendChild(stripeJs);
    },
  }
</script>

What is the best method for incorporating card components from Stripe into a Vue.js application?

Answer №1

Similar questions

Having trouble retrieving state parameters when trying to launch a modal in AngularJS

Storing sound recordings with GridFS

disable event listeners on the DOM

There was an error trying to read properties of undefined, specifically the 'prototype', in a code using Next.Js and Express

Learn how to easily alter the background color of a div in real-time by utilizing a color picker or color swatches feature in your

Is there a method to globally import "typings" in Visual Code without having to make changes to every JS file?

How can I utilize the "remark" tool to handle Markdown files with URLs that don't adhere to Markdown formatting? Are there any supplemental plugins available for this

I want to search through an array of tuples to find a specific value in the first index, and if there is a match, I need to return the value in the second index of the matching tuple

What is the best way to develop a unique animation for every v-card?

Unable to remove the most recently added Object at the beginning

Command is not displaying JavaScript

Firebase onSnapshot error when retrieving data from Snapchot

Explain the functioning of the Node.js event loop and its ability to manage numerous requests simultaneously

"Exciting Changes in Color According to the Active State of vue-route-link

Guide to retrieving a .txt file from a separate domain using server-side JavaScript and transferring it to the client side

Error: Trying to set a value to an undefined object in the bind() method

The mathematical logic behind navigating forward and backward in Angular

Is there a way to send an array of objects as parameters in JavaScript?

What is the best way to store JSON data in Mongoose database?

The nested directive link function failed to execute and the controller was not recognized