我尝试将Paypal实现到现有应用程序中,但是必须从我们的后端进行对Paypal API的调用。我坚持在React中设置客户端,更确切地说是在加载脚本。
我正在使用的代码:
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';
class PaypalButton extends React.Component {
constructor(props) {
super(props);
this.state = {
showButton: false,
};
window.React = React;
window.ReactDOM = ReactDOM;
}
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) { // load finished
if (isScriptLoadSucceed) {
this.setState({ showButton: true })
console.log('alehop!!', window.paypal.Button.react)
}
else this.props.onError()
}
}
}
render() {
const paypal = window.PAYPAL
const {
total,
currency,
env,
commit,
client,
onSuccess,
onError,
onCancel,
} = this.props;
const {
showButton,
} = this.state;
const payment = () =>
paypal.rest.payment.create(env, client, {
transactions: [
{
amount: {
total,
currency,
}
},
],
});
const onAuthorize = (data, actions) =>
actions.payment.execute()
.then(() => {
const payment = {
paid: true,
cancelled: false,
payerID: data.payerID,
paymentID: data.paymentID,
paymentToken: data.paymentToken,
returnUrl: data.returnUrl,
};
onSuccess(payment);
});
return (
<div>
{showButton && <paypal.Button.react
env={env}
client={client}
commit={commit}
payment={payment}
onAuthorize={onAuthorize}
onCancel={onCancel}
onError={onError}
/>}
</div>
);
}
}
export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);
即时通讯错误为Erroneous payment OR failed to load script! Error: Client ID not found for env: sandbox
客户端ID是有效的,我多次检查了它,即时通讯卡住了。我遵循了PayPal网站上的实施指南,但有Vanilla JS示例。任何帮助将不胜感激!