React-stripe-elements: no information on AddressSection in doc

[gerwinbrunner]

Hi,

in the README.md file you provide some sample code which mentions AddressSection but there seems to be no implementation/sample for that code (yet).

Do you plan to support the extraFields also via this package? If so is there a timeline?

Best,
Gerwin

[fred-stripe]

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

[albeethekid]

@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!

[atty-stripe]

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.

[albeethekid]

@atty-stripe Thank you so much for that quick reply! You are truly a scholar and a gentleman!!

[DavidSabine]

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".

[atty-stripe]

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.

[DavidSabine]

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.

[j-651]

@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?