Comments (8)
Hi @albeethekid!
The sample code that Fred shared above uses class properties (handleSubmit = ...
), which are not natively supported in ES6. If you are using Babel to transform your code, you can use this transform to enable support.
On the other hand, you can use the function syntax you mentioned as well; here's how it would look:
class CheckoutForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(ev) {
ev.preventDefault();
this.props.stripe.createToken({name: 'Jenny Rosen', address_line1: this.props.address_line1, /* … */}).then(({token}) => {
console.log('Received Stripe token:', token);
});
// Continue passing token to your server to make charge...
}
}
If you need more help with React / Babel, feel free to refer to their website or Stack Overflow. For questions with Stripe, feel free to reach out via our support channels as well.
from react-stripe-elements.
@atty-stripe Thank you so much for that quick reply! You are truly a scholar and a gentleman!!
from react-stripe-elements.
Hi Gerwin,
Great question—AddressSection
is meant to be implemented in your own code as we don't want to make assumptions about your form's layout, desired markup, etc. There is no "address" component in Elements because that information is meant to be collected with your own form fields.
What you'd want to do is implement a component that shares the address information with your higher-level component and then pass that address information to this.props.stripe.createToken()
:
class CheckoutForm extends React.Component {
handleSubmit = (ev) => {
ev.preventDefault();
this.props.stripe.createToken({name: 'Jenny Rosen', address_line1: this.props.address_line1, /* … */}).then(({token}) => {
console.log('Received Stripe token:', token);
});
// …
}
createToken
in this.props.stripe
is a wrapped version[1] of Stripe.js's Stripe.createToken
[2] that will automatically pass the Element associated with the current component. Given this structure, you're free to implement your address components & data flow in whatever manner is most convenient for you.
[1] https://github.com/stripe/react-stripe-elements/blob/5e14d8de70e16d8d812d0abc2066fa9366b1497c/src/components/inject.js#L90
[2] https://stripe.com/docs/stripe.js#stripe-create-token
from react-stripe-elements.
Hi,
I agree with the suggestion to provide an example of ./AddressSection.js
. It could be a bare bones set of elements like name, email address, phone. It would be really helpful then to see how those fields and their names map to this.props
, and so on.
I'm having to make a lot of guesses about how such data gets passed around between Stripe Elements, my own Charge handlers, the response I'd get from a Charge, and how it all shows up in my Stripe Dashboard.
Example: The doc presumes your readers will know where "Jenny Rosen" comes from, and why it's passed as a prop while creating a token, and what will happen with that value.
Fact: Your sample code references AddressSection/
… and then you've assumed your readers will just know to fill in the blanks. When I first read the doc, I actually thought a mistake was made -- that AddressSection/
was missed accidently.
It's disappointing that gerwinbrunner's earlier suggestion basically resulted in: "go search Stack Overflow".
from react-stripe-elements.
@fred-stripe for whatever reason, when I call this.props.stripe.createToken I encounter the following error in the console:
Uncaught TypeError: Cannot read property 'props' of undefined
My code looks quite similar to the demo, minus the AddressSection. While I appreciate that you don't want to make any assumptions about layout and such, a working example of an AddressSection would be most appreciated. Or perhaps you could point me to the relevant documentation so that I could generate one that works.
Lastly, this is not likely an issue specific to Stripe, but the following syntax, in the CheckoutForm Class, causes webpack to throw an error:
handleSubmit = (ev) => {
If I change it to the following the error goes away:
handleSubmit(ev) {
Here's the error:
ERROR in ./public/js/src/CheckoutForm.js
Module build failed: SyntaxError: Unexpected token (7:17)
6 | class CheckoutForm extends React.Component {
7 | handleSubmit = (ev) => {
| ^
8 | console.log('test');
9 | // We don't want to let default form submission happen here, which would refresh the page.
10 | ev.preventDefault();
What noob mistake am I making? Am I missing an option/configuration from webpack?
Thanks in advance!
from react-stripe-elements.
Hi @DavidSabine, sorry to hear the docs proved to be confusing. You bring up a good point, and it would make sense to show in the example how to integrate Elements with other normal fields in the form.
Would you like to open a PR to update the docs? No obligation to — we'll do it soon otherwise.
from react-stripe-elements.
Thank you, @atty-stripe. I'm not as familiar as you, and occupied for the next few weeks on another project. Please go ahead without a PR from me.
from react-stripe-elements.
@atty-stripe Any updates on the status of providing a bare-bones boilerplate example of the AddressSection
component referenced in this example?
@oliver-stripe Is there any guidance you can provide?
from react-stripe-elements.
Related Issues (20)
- CardNumberElement Placeholder Not Working HOT 1
- CardCvcElement onComplete fires after three digits for AMEX card HOT 2
- docs: confirmCardPayment with split card elements needs a docs update HOT 1
- Payment Fields are not clickable in Samsung device HOT 2
- My Stripe promise with React never resolves even after trying a timeout HOT 1
- 3D Secure Test Payment Screen iFrame - Any way to preview or control width/height? HOT 1
- Not able to customize CSS of CardElement HOT 1
- Split Card Number Not Inserted with 1Password Autofill HOT 1
- Elements locale option not localizing HOT 5
- When click on stripe element its getting blur HOT 1
- About scan card feature in mobile device HOT 1
- PaymentRequestButton Does Not Load On Safari PWA HOT 1
- Stripe console message : parameter: betas is not a recognized parameter. HOT 2
- Connection Failure text in CardNumberElement HOT 3
- loadStripe does not seem to work
- styling CardElement HOT 1
- Add support for extra types of buttons for Apple Pay HOT 1
- Elements tag doesn't accept locale HOT 2
- Add a full stripe elements integration example HOT 1
- PaymentRequestButtonElement Integration Error with saved browser card HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-stripe-elements.