條紋付款和反應錯誤

Question

我嘗試集成Stripe，但總是收到錯誤消息：

無法讀取未定義的屬性“ setPublishableKey”

這是我的代碼：

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;

比我嘗試過同樣的錯誤：（這里我以前在main.html中是https://js.stripe.com/v2/ ）

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 = {};

同樣這是行不通的。

請幫忙。

Answer 1

var Stripe; 看起來您實際上並未將Stripe對象導入到組件中，而只是將其聲明為未定義變量。 如果Stripe對象在窗口上可用，則刪除var Stripe; 這樣您就不會覆蓋它。

Answer 2

1）刪除冗余var Stripe;

2）應該是window.Stripe.setPublishableKey('pk_test_BLABLA'); （請注意前面的window. ）

Stripe.createToke