stripe-elements | Stripe Web Components | Ecommerce library

its been hours trying to run or start npm server so i can customize my project and preview changes when i use "npm start" command i get this error :

I'm using Stripe Elements on my site but running into some issues with the icon styling. I've done some searching and found this link but they have closed the ticket saying the issue was fixed.

As you can see on my screenshot here the icon is flush to the edge and I'd like some padding to the left.

I've tried adding padding via my JS like so but it doesn't change anything.

Any idea how to resolve this error? I get it when trying npm install:

npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.14.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from react-card-flip@1.1.0 npm ERR! node_modules/react-card-flip npm ERR! react-card-flip@"^1.0.11" from the root project

The package.json has: "react-card-flip": "^1.0.11",

I removed the node_modules directory and the package-lock.json file.

I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.

Thanks for any ideas or help you can provide.

Full content of the package.json below in case that helps.

package.json content:

We purchased a web app written in Vue from someone and we developing to change/improve it. One thing we added was Vuetify so we can use the Vuetify elements and everything has been working great while in development mode, but when we build for production the CSS for Vuetify elements is missing.

I have searched for this online already and have already tried what everybody is suggesting without any luck.

Anybody has an idea of what could be wrong and why npm run build would be missing some of the CSS?

What's weird is that all the UI functionality for Vue elements is working perfectly, just the CSS is missing.

Please see code samples below.

main.js:

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 working on a stripe backend in node and a react frontend, the idea being to create a platform for buyers and sellers. I have created the seller's side where users create connect accounts and add a bank to that account.

Now I want to set up the buyer's side. I want to be able to have a customer store their credit/debit card information to use to pay in the future. Below are my questions, they're a bit broad but I just want some basic guidance, not looking for code answers:

1. Should I aim to have users enter information and then have stripe create a customer object with all their information as a way of storing credit card info?

2. Can I use the react-stripe-elementslibrary to facilitate this process as it seems to be made to be secure? I've been looking at the examples but they seem to revolve around paying directly by inputting information to pay right away. Unless I am misunderstanding?

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

I am reading:

• https://docs.expo.io/versions/latest/sdk/payments/
• https://tipsi.github.io/tipsi-stripe/docs/running-apple-pay-on-a-real-device.html
• https://github.com/stripe/react-stripe-elements/issues/21
• https://pusher.com/tutorials/react-native-payments
• https://medium.com/@lyzhovnik/using-stripe-payment-service-with-react-native-and-fetch-4177c8d992cb
• https://github.com/expo/stripe-expo

I want to integrate stripe payment within a react-native app build with expo sdk 36.

My project is not ejected and I would like to keep it so I can still run and debug iOS app without needing apple hardware. (it's for developer experience, but I want to see if there's a way before squeezing that.)

1. To me, it seems that stripe just need an HTTP client to communicate, while I have fetch, am I correct?
2. Why exactly do I need to eject, what native library do I need to plug and why the http client is not sufficient?
   • How can I integrate stripe to target all of the platforms (web/ios/native) with the less effort (what library should I get started with to resolve my goal.)