StripeComponent-init.js

import React from 'react'
import StripeCheckout from 'react-stripe-checkout'

class Stripe extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      buttonStyle: 'button primary',
      status: 'Nothing happened yet'
    }
    this.onToken = this.onToken.bind(this)
    // This will be for later
    this.stripeTokenSubscription = null
    this.purchaseSubscription = null
  }

  onToken(token) {
    // This is where token is received, as described in Logic #1
    const userId = this.props.data.user.id
    const stripeToken = token.id
    // Hide or remove button to prevent duplicate purchases
    this.setState({ buttonStyle: 'button hidden' })
    // Here, we’ll launch Logic #2 later on
  }

  render() {
    if (this.props.data.loading) {
      return (<div>Loading...</div>)
    }
    const { buttonStyle, status } = this.state
    return (
      <div>
        <StripeCheckout
          name="PRODUCT TITLE"
          description="PRODUCT DESCRIPTION"
          image="https://PATH_TO_IMAGE_HERE.png"
          ComponentClass="div"
          panelLabel="Upgrade"
          amount={999}
          currency="USD"
          // Replace with your Stripe test publishable key: pk_test_xxxxxxxxxxxxxxxxxxxxxxxx
          stripeKey="pk_test_xxxxxxxxxxxxxxxxxxxxxxxx"
          email={this.props.data.user.email}
          shippingAddress={false}
          billingAddress={true}
          zipCode={true}
          bitcoin
          allowRememberMe
          token={this.onToken}
          reconfigureOnUpdate={false}
          triggerEvent="onClick"
        >
          <div className={buttonStyle}>Upgrade</div>
        </StripeCheckout>
        <br />
        <center>{status}</center>
      </div>
    )
  }

}