vue-stripe | Stripe Checkout & Elements for Vue.js | Ecommerce library

Shown in an example screenshot on its GitHub page, Vue Stripe Checkout library displays a credit card input form with individual inputs for the card information (CC#, expiration, CVV) and also the name, country, and email:

Based on the Vue Stripe Elements example shown in the GitHub README.md, my single-file Vue component currently creates a single input for all the credit card information. It looks like this:

And this is the code that created it:

I was deploying to Heroku regularly and everything used to work just fine. Then, after changing just one line of code and pushing it to Heroku is failing.

I have not updated or installed anything. This behavior seems too odd for me.

I am using: npm install vue-stripe-checkout, but a i get this error:

What I mean by "Leaking" is the following. I have an About.vue with its own styling (About.scss) and it's own endpoint "/about". I also have the home page endpoint "/" and its corresponding Laravel blade template (Index.blade.php) with its own styling (Index.scss).

The Problem

The style from About.scss is affecting the Index.scss, and they're not even in the same html file that's returned by the server. And it's like this for my entire website. Everything was completely fine before I updated to Laravel Mix ^5.*.

composer.json

Same issue with other frontend framework and it fixed in some

I'm trying to use stripe in a Sapper app. Stripe requires to send credit card data using their secure stripe.js which you reference in the head of your page. I use svelte onMount() because stripe submit the data using their script and server is not involved.

I arrive at this payment component after I click on checkout button in my shopping cart component which uses goTo to direct me to this pay page/component:

Not sure if this question is appropriately titled. I am using Vue 2 and somewhat noob at it (it's my third day). I have a basic app with product pages. My payment system is through Stripe.

I'm using the npm module here https://www.npmjs.com/package/vue-stripe

If I browse around the site and click on a few products it seems like it is creating more and more instances of Stripe, because when I go to make a purchase, it makes the same amount of calls as number of times I clicked on product pages.

So if I only visit once product page, the stripe api only gets called once, on my second visit to a product page the stripe api gets called twice when I make a purchase, and so on.

The other thing is if I refresh the page by hitting the browser reload button it resets itself and only loads the one instance of Stripe.

My product.vue page has the following format

In my vue2 app I have a parent component with several child components. One such child component (I'll refer to it as PaymentComponent) is a simple dialog for capturing payment information.

Currently, there are a couple places in the application where it makes sense to display the payment dialog. However, I'm having trouble understanding how to display the dialog in PaymentComponent using buttons in other child components.

Below is the PaymentComponent. Any tips on how I can display the dialog using a button from another component which shares the same parent component?

I can't seem to access the process.env.baseUrl variable from the feathers client plugin. The variable returns an empty string. I can use the variable on server side. I can resolve it by hardcoding the url in env.baseUrl in nuxt.config.js, but I'd rather not. The weird thing is that it runs without any issues on a windows 10 machine in both prod and dev mode. However on Ubuntu vm in the Google Cloud it doesn't work. It also doesn't work when running from a docker container. Please advice. Am I missing something obvious?

system

I'm using vue as CDN because app is really simple. at this point when I add the code