0
Я пытаюсь интегрировать Stripe, но я всегда получаю ошибку:нашивки Платежи и React Ошибка
Cannot read property 'setPublishableKey' of undefined
Это мой код:
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;
Чем я попробовал это, и ту же ошибку: (Здесь я https://js.stripe.com/v2/ в main.html до)
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 = {};
Кроме того, это не работает.
Пожалуйста, помогите.