在页面上集成Paypal结帐按钮时,我遇到了一些错误。当我点击按钮时,应该打开一个PayPal,但在我的情况下,我不知道为什么弹出窗口没有正确显示,它会打开并关闭。谁能告诉我我做错了什么?
控制台出错:index.js:1193警告:道具类型失败:道具
client
中标记为PaypalButton
,但其值为。{1}}undefined
。 在PaypalButton中(由ScriptLoader创建) 在ScriptLoader中(由MyApp创建) 在MyApp中
这是我的代码。
import React from 'react';
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';
import PropTypes from 'prop-types';
class PaypalButton extends React.Component {
constructor(props) {
super(props);
window.React = React;
window.ReactDOM = ReactDOM;
this.state = {
showButton: false,
env: 'sandbox', // Or 'sandbox'
client: {
sandbox: 'AVYr65d7UewdrCT5k8sa5ywOSHCsTEZOuYT5eJJhTIW9IAyUXZltXmWeYLn_qaFYr7_Iq44kSJrReuMT', // sandbox client ID
production: 'AZPD3t-x0T3zF5-8TgZKhkIcWPAirBEEGE5xxk14ejRPhgiUwpnIxBtnC9BnrxGJCoMof9Gr2iXYhSNs' // production client ID
},
commit: true, // Show a 'Pay Now' button
};
}
componentDidMount() {
const { isScriptLoaded, isScriptLoadSucceed } = this.props;
if (isScriptLoaded && isScriptLoadSucceed) {
this.setState({ showButton: true });
}
}
componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
if (!this.state.show) {
if (isScriptLoaded && !this.props.isScriptLoaded) {
if (isScriptLoadSucceed) {
this.setState({ showButton: true });
} else {
console.log('Cannot load Paypal script!');
this.props.onError();
}
}
}
}
render() {
const payment = () => paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [
{ amount: { total: this.props.total, currency: this.props.currency } },
],
});
const onAuthorize = (data, actions) => actions.payment.execute().then(() => {
const payment = Object.assign({}, this.props.payment);
payment.paid = true;
payment.cancelled = false;
payment.payerID = data.payerID;
payment.paymentID = data.paymentID;
payment.paymentToken = data.paymentToken;
payment.returnUrl = data.returnUrl;
this.props.onSuccess(payment);
});
let ppbtn = '';
if (this.state.showButton) {
ppbtn = (<paypal.Button.react
env={this.state.env}
client={this.state.client}
payment={payment}
commit
onAuthorize={onAuthorize}
onCancel={this.props.onCancel}
/>);
}
return <div>{ppbtn}</div>;
// console.log('client', client)
}
}
PaypalButton.propTypes = {
currency: PropTypes.string.isRequired,
total: PropTypes.number.isRequired,
client: PropTypes.object.isRequired,
};
PaypalButto.log('The payment was succeeded!', payment);
},
onCancel: (data) => {
console.log('The payment was cancelled!', data);
},
onError: (err) => {
console.log('Error loading Paypal script!', err);
},
};
export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);n.defaultProps = {
env: 'sandbox',
onSuccess: (payment) => {
console.log('The payment was succeeded!', payment);
},
onCancel: (data) => {
console.log('The payment was cancelled!', data);
},
onError: (err) => {
console.log('Error loading Paypal script!', err);
},
};
export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);
import React from 'react';
import PaypalExpressBtn from './PayPalExpressCheckOut';
export default class MyApp extends React.Component {
render() {
const onSuccess = (payment) => {
console.log("Your payment was succeeded!", payment);
}
const onCancel = (data) => {
// User pressed "cancel" or close Paypal's popup!
console.log('You have cancelled the payment!', data);
}
const onError = (err) => {
// The main Paypal's script cannot be loaded or somethings block the loading of that script!
console.log("Error!", err);
// Since the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js"
// => sometimes it may take about 0.5 second for everything to get set, or for the button to appear
}
let currency = 'USD'; // or you can set this value from your props or state
let total = 1.00; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout
return (
console.log(currency),
console.log(total),
<PaypalExpressBtn
currency={currency}
total={total}
onError={onError}
onSuccess={onSuccess}
onCancel={onCancel}
/>
);
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import MyApp from './App.jsx';
ReactDOM.render(<MyApp />, document.getElementById('app'));
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
</head>
<body>
<div id = "app"></div>
<!-- <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> -->
<script src = "index.js"></script>
</body>
</html>