Stripe Payments & React Error

Question

I try to integrate Stripe, but I always get the error:

Cannot read property 'setPublishableKey' of undefined

This is my code:

import React from 'react';
var ReactScriptLoaderMixin = require('react-script-loader').ReactScriptLoaderMixin;
var Stripe;
import $ from 'jquery';


var PaymentForm = React.createClass({
  mixins: [ ReactScriptLoaderMixin ],

    getInitialState: function() {
      return {
        stripeLoading: true,
        stripeLoadingError: false,
        submitDisabled: false,
        paymentError: null,
        paymentComplete: false,
        token: null
      };
    },


    getScriptURL: function() {
      return 'https://js.stripe.com/v2/';
    },

    onScriptLoaded: function() {
      if (!PaymentForm.getStripeToken) {
        // Put your publishable key here
        console.log(Stripe);
        Stripe.setPublishableKey('pk_test_BLABLA');
        this.setState({ stripeLoading: false, stripeLoadingError: false });
      }
    },

    onScriptError: function() {
      this.setState({ stripeLoading: false, stripeLoadingError: true });
    },

    onSubmit: function(event) {

      var self = this;



      event.preventDefault();
      this.setState({ submitDisabled: true, paymentError: null });
      // send form here
      Stripe.createToken(event.target, function(status, response) {
        if (response.error) {
          self.setState({ paymentError: response.error.message, submitDisabled: false });
        }
        else {
          var t = response.id;

          var OrderIds = Object.keys(self.props.orders.warenkorb);
          var total = OrderIds.reduce((sum, key) =>{
            var qty = self.props.orders.warenkorb[key]['qty']
            var size = self.props.orders.warenkorb[key]['size']
            var p1 = self.props.prices.artikel[size]['price']
            var p2 = p1 * qty
            return sum + p2
          },0);
          total = total * 100

          console.log(total);
          var orders = self.props.orders.warenkorb
          var data = { token: t, price: total, orders: orders}
          var dataS = JSON.stringify(data);
          var jqxhr = $.post('http://localhost:8080', dataS , function(res) {
            if (res === 'done'){
              self.setState({ paymentComplete: true, submitDisabled: false});
          }else{
            self.setState({ paymentError: res, submitDisabled: false });
          }
          });

        }
      });
    },

    render: function() {
      if (this.state.stripeLoading) {
        return <div>Loading</div>;
      }
      else if (this.state.stripeLoadingError) {
        return <div>Error</div>;
      }
      else if (this.state.paymentComplete) {
        return <div>Payment Complete!</div>;
      }
      else {
        return (<form onSubmit={this.onSubmit} >
          <span>{ this.state.paymentError }</span><br />
          <input type='text' data-stripe='name' placeholder='Name' /><br />
          <input type='text' data-stripe='number' placeholder='credit card number' /><br />
          <input type='text' data-stripe='exp-month' placeholder='expiration month' /><br />
          <input type='text' data-stripe='exp-year' placeholder='expiration year' /><br />
          <input type='text' data-stripe='cvc' placeholder='cvc' /><br />
          <input disabled={this.state.submitDisabled} type='submit' value='Purchase' />
        </form>);
      }
    }
});

export default PaymentForm;

Than I tried this, same mistake: (Here I https://js.stripe.com/v2/ in the main.html before)

import React from 'react';
import Payment from 'payment';
import { Row, Col, FormGroup, ControlLabel, Button, Alert } from 'react-bootstrap';
var Stripe;


export class PaymentForm2 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      number: null,
      exp_month: null,
      exp_year: null,
      cvc: null,
      token: null,
    };

    this.setCardType = this.setCardType.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.resetCard = this.resetCard.bind(this);
  }

  resetCard() {
    this.setState({ number: null, exp_month: null, exp_year: null, cvc: null, token: null });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.resetCard();

    const { refs } = this;
    const number = refs.number.value;
    const expiration = refs.expiration.value.split('/');
    const exp_month = parseInt(expiration[0], 10);
    const exp_year = parseInt(expiration[1], 10);
    const cvc = refs.cvc.value;
    const card = { number, exp_month, exp_year, cvc };

    Stripe.setPublishableKey('pk_test_blabla');
    Stripe.createToken(card, function(status, response) {
      if (response.error) {
        console.log('response.error')
      }
      else {
        console.log('bla')
      } 
     }



  setCardType(event) {
    const type = Payment.fns.cardType(event.target.value);
    const cards = document.querySelectorAll('[data-brand]');

    [].forEach.call(cards, (element) => {
      if (element.getAttribute('data-brand') === type) {
        element.classList.add('active');
      } else {
        element.classList.remove('active');
      }
    });
  }

  renderCardList() {
    return (<ul className="credit-card-list clearfix">
      <li><i data-brand="visa" className="fa fa-cc-visa"></i></li>
      <li><i data-brand="amex" className="fa fa-cc-amex"></i></li>
      <li><i data-brand="mastercard" className="fa fa-cc-mastercard"></i></li>
      <li><i data-brand="jcb" className="fa fa-cc-jcb"></i></li>
      <li><i data-brand="discover" className="fa fa-cc-discover"></i></li>
      <li><i data-brand="dinersclub" className="fa fa-cc-diners-club"></i></li>
    </ul>);
  }

  renderCardForm() {
    return (<form className="CardForm" onSubmit={ this.handleSubmit }>
      <Row>
        <Col xs={ 12 }>
          <FormGroup>
            <ControlLabel>Card Number</ControlLabel>
            <input
              onKeyUp={ this.setCardType }
              className="form-control"
              type="text"
              ref="number"
              placeholder="Card Number"
            />
          </FormGroup>
        </Col>
      </Row>
      <Row>
        <Col xs={ 6 } sm={ 5 }>
          <FormGroup>
            <ControlLabel>Expiration</ControlLabel>
            <input
              className="form-control text-center"
              type="text"
              ref="expiration"
              placeholder="MM/YYYY"
            />
          </FormGroup>
        </Col>
        <Col xs={ 6 } sm={ 4 } smOffset={ 3 }>
          <FormGroup>
            <ControlLabel>CVC</ControlLabel>
            <input
              className="form-control text-center"
              type="text"
              ref="cvc"
              placeholder="CVC"
            />
          </FormGroup>
        </Col>
      </Row>
      <Button type="submit" bsStyle="success" block>Generate Token</Button>
    </form>);
  }

  renderCard() {
    const { number, exp_month, exp_year, cvc, token } = this.state;
    return number ? (<Alert bsStyle="info">
      <h5>{ number }</h5>
      <p className="exp-cvc">
        <span>{ exp_month }/{ exp_year }</span>
        <span>{ cvc }</span>
      </p>
      <em>{ token }</em>
    </Alert>) : '';
  }

  componentDidMount() {
    const { number, expiration, cvc } = this.refs;
    Payment.formatCardNumber(number);
    Payment.formatCardExpiry(expiration);
    Payment.formatCardCVC(cvc);
  }

  render() {
    return (<div className="CreditCard">
      { this.renderCardList() }
      { this.renderCardForm() }
      { this.renderCard() }
    </div>);
  }
}

export default PaymentForm2;

PaymentForm2.propTypes = {};

Also this doesn't work.

Please help.

Answer 1

var Stripe; it doesn't look like you are actually importing the Stripe object into your component you are only declaring it as an undefined variable. If the Stripe object is available on window then remove var Stripe; that way you don't overwrite it.

Answer 2

1) remove the redundant var Stripe;

2) It should be window.Stripe.setPublishableKey('pk_test_BLABLA'); (Note the leading window. )

Same goes for Stripe.createToke