react-stripe-elements | Moved to stripe/react-stripe-js | Ecommerce library
kandi X-RAY | react-stripe-elements Summary
kandi X-RAY | react-stripe-elements Summary
React components for Stripe.js and Stripe Elements. This project is a thin React wrapper around Stripe.js and Stripe Elements. It allows you to add Elements to any React app, and manages the state and lifecycle of Elements for you. The Stripe.js / Stripe Elements API reference goes into more detail on the various customization options for Elements (e.g. styles, fonts).
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-stripe-elements
react-stripe-elements Key Features
react-stripe-elements Examples and Code Snippets
Lines of Code : 58License : Strong Copyleft (CC BY-SA 4.0)
Copy// somewhere else vvvvv
// pseudo
const StripeWrapper = ({ children }) => {
let stripe,
if (no window) stripe = null
if (window.Stripe) stripe = window.Stripe(...)
eimport { CardElement, injectStripe, ReactStripeElements } from 'react-stripe-elements'
ReactStripeElements.StripeProps
Community Discussions
Trending Discussions on react-stripe-elements
QUESTION
I have the following package.json for my React project.
ANSWER
Answered 2022-Jan-14 at 10:32If you are using color package, make sure that you are importing the package on theme.tsx
QUESTION
I'm trying to handle credit card payments using stripe and reactjs. I'm following the tutorial here https://github.com/stripe-archive/react-stripe-elements. See the get started section. The only problem I have is that I need to submit the credit card form on the component page where the code is (the first page that is created) and not the CheckoutForm page. How do I do that?
I tried doing the following
...ANSWER
Answered 2021-Dec-31 at 02:21First, the library you've linked to is deprecated, the new version is this one. Since you're using the hooks you must be using the new library already, though.
If you're using Class components, the documentation provides an example of an alternate integration pattern using the provider and explicitly.
QUESTION
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 :
...ANSWER
Answered 2021-May-16 at 23:02In your package.js file, there were some bugs.
QUESTION
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.
...ANSWER
Answered 2021-Feb-26 at 22:13You need to be changing the style of the container you mount the Element to, not the Element itself. For example, if you were mounting your card element to #card-element you could add some basic styling like this:
QUESTION
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:
...ANSWER
Answered 2021-Feb-24 at 01:31The solution was to update the package.json file and change the react-card-flip entry.
From:
"react-card-flip": "^1.0.11",
To:
"react-card-flip": "~1.0.11",
The carat (^) tells npm to install 1.0.11 or newer version of react-card-flip. It was trying to install the newer version 1.1.0, which relies on React version 17.0.1. The tilde (~) tells npm to install the newest minor release version. The latest minor version of react-card-flip is 1.0.11 and it requires React 16.14.0, matching what I have installed - resolving the problem.
Another work around solution is to run npm install with the parameter --legacy-peer-deps.
QUESTION
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:
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?
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?
ANSWER
Answered 2020-Nov-11 at 16:50Should 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?
Yes, the main approach is to collect the card details which will produce a PaymentMethod object that you can then save to a Customer. The easiest way to do this is by using the SetupIntents API as described here:
https://stripe.com/docs/payments/save-and-reuse
If you follow that guide a PaymentMethod will be created automatically when you confirm the SetupIntent, and since you provide a Customer when creating the SetupIntent, Stripe will automatically save the PaymentMethod to the Customer.
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?
You should use the new React library from Stripe instead (assuming you're on React v16.8 and above):
https://github.com/stripe/react-stripe-js
The library is a simple wrapper around Stripe Elements which exposes an input field for your users to enter in their credit card details. When you use that pre-built input field from Stripe, they will automatically create PCI compliant forms for you: https://stripe.com/docs/security/guide. Otherwise, you would need to prove your business's PCI compliance annually which is a lot of work.
The client-side steps in the Save and Reuse guide all have a "React" tab that you can click on to show the React version (that uses the new react-stripe-js library):
https://stripe.com/docs/payments/save-and-reuse#web-collect-card-details
QUESTION
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.)
- To me, it seems that stripe just need an HTTP client to communicate, while I have fetch, am I correct?
- 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.)
ANSWER
Answered 2020-Jun-02 at 16:23Expo really doesn't support the expo-payments-stripe module for React Native in managed workflow. Although there is a little trick. You can implement it by using a WebView, as (for example) this npm-module does: expo-stripe-checkout. This module uses Stripe Checkout.
Regarding your question about using a normal HTTP-Client, maybe this article helps: Using Stripe API in React Native with fetch
I hope this helps!
QUESTION
Been slamming my head against this for a while now and no idea why this is happening.
I'm using react-stripe-elements and trying to write a test using Puppeteer. I simply cannot get Puppeteer to fill in the Card Elements.
I've tried a few approaches
Approach 1
I try to select the input by its name and then any input on the page by its class
...ANSWER
Answered 2020-Jun-03 at 18:22You're likely running into this issue because your test isn't waiting for the CardElement to mount (and finish its animations) or, the animations are slower than your delay. Here's an example of a puppeteer test which takes those transitions into account for your reference: https://github.com/stripe/react-stripe-elements/issues/137#issuecomment-352092164
QUESTION
I am trying to create a payment form where people can pay but I keep getting this error. document is not defined. I'm using next.js. Please see my code below
ANSWER
Answered 2020-Mar-11 at 11:31I think, in server rendering mode, the document is undefined. You should be able to use it inside class lifecycle methods or useEffect
QUESTION
I'm following this doc: https://laravel.com/docs/5.8/billing#storing-payment-methods
And it tells me to use the data-secret like this:
ANSWER
Answered 2020-May-04 at 03:46React Stripe Elements is deprecated, you should use React Stripe JS instead
Laravel is assuming you're doing server side rendering here, which isn't the case with React. You should just use fetch to grab the client_secret from that route you created when you are ready to confirm a SetupIntent.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-stripe-elements
Use the injectStripe Higher-Order Component (HOC) to build your payment form components in the Elements tree. The Higher-Order Component pattern in React can be unfamiliar to those who've never seen it before, so consider reading up before continuing. The injectStripe HOC provides the this.props.stripe and this.props.elements properties that manage your Elements groups. Within an injected component, you can call any of the methods on the Stripe or Elements objects. :warning: NOTE injectStripe cannot be used on the same element that renders the Elements component; it must be used on the child component of Elements. injectStripe returns a wrapped component that needs to sit under <Elements> but above any code where you'd like to access this.props.stripe.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
