paypal - 成功付款后,paypal 抛出错误 - 窗口无响应。清理干净
问题描述
我正在使用 React 实现 Paypal 支付网关。我正在关注robinwieruch.de 的教程。
我可以完成付款程序,但付款完成后它会抛出no response from window. cleaned up
。在 Firefox 中,我的应用程序崩溃了,但在 chrome 中,它只将错误记录到控制台(没有崩溃)。
购物车.js
import Paypal from '../common/Paypal';
const imgStyle = {
width: `150px`,
height: `60px`
}
class Cart extends Component{
state = {
courierClass: ''
}
isValidPayment = (e)=>{
e.preventDefault();
if(!this.props.isAuthenticated){
this.props.errorHandler('please signin to continue');
this.props.history.push('/user/signin');
}
else {
return true;
}
}
addOrders = (payment) => {
this.props.successHandler('payment successful. we are processing you order request');
this.setState({
isSubmitting: true
})
this.props.orderHandler(send order data to server)
.then(()=>{
this.setState({
isSubmitting: false
})
this.props.history.push('/')
})
.catch(()=> this.setState({
isSubmitting: false
}))
}
onPaymentCancel = (data) => {
this.props.errorHandler('you cancel the payment');
console.log('The payment was cancelled!', data);
}
onPaymentError = (err) => {
console.log(err, 'error');
this.props.errorHandler(`we can't process your payment now.`)
}
render(){
let { isAuthenticated,} = this.props;
let {courierClass, isSubmitting} = this.state;
let totalPrice = 0;
cart.items.forEach(({item, item_quantity})=>{
totalPrice += (item.price * item_quantity)
})
let env = 'sandbox';
let currency = 'GBP';
let style={
shape: 'rect',
size: 'medium',
label: 'checkout',
tagline: false
}
// let total = totalPrice;
const client = {
sandbox: process.env.REACT_APP_SANDBOX_APP_ID,
}
return (
<div className="container">
{ courierClass ? <Paypal
env={env}
client={client}
currency={currency}
total={totalPrice}
style={style}
onClick={this.isValidPayment}
onError={this.onPaymentError}
onSuccess={this.addOrders}
onCancel={this.onPaymentCancel} /> : null
}
</div>
)
}
}
function mapStateToProps(state){
return {
isAuthenticated: state.currentUser.isAuthenticated
}
}
export default connect(mapStateToProps, {})(Cart)
** Paypal.js **
import React from 'react';
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';
const {NODE_ENV, REACT_APP_SANDBOX_APP_ID, REACT_APP_PAYPAL_APP_ID } = process.env
class Paypal 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(nextProps) {
const { isScriptLoaded, isScriptLoadSucceed } = nextProps;
const isLoadedButWasntLoadedBefore = !this.state.showButton && !this.props.isScriptLoaded && isScriptLoaded;
if (isLoadedButWasntLoadedBefore) {
if (isScriptLoadSucceed) {
this.setState({ showButton: true });
}
}
}
componentWillUnmount(){
// this.setState({
// showButton: false
// });
// this.paypal = null
}
render() {
const paypal = window.PAYPAL;
const { total, commit, onSuccess, onError, onCancel,} = this.props;
const { showButton} = this.state;
// let style = {
// size: 'small',
// color: 'gold',
// shape: 'pill',
// label: 'checkout: Just $2.99!'
// }
let env = NODE_ENV === 'production' ? 'live' : 'sandbox' ;
let currency = 'GBP';
const client = {
sandbox: REACT_APP_SANDBOX_APP_ID,
live: REACT_APP_PAYPAL_APP_ID
}
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 (
showButton ? <paypal.Button.react
env={env}
client={client}
commit={commit}
payment={payment}
onAuthorize={onAuthorize}
onCancel={onCancel}
onError={onError}
style={{
shape: 'rect',
size: 'medium',
label: 'pay',
tagline: false
}}
/> : null
);
}
}
export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(Paypal);
我也在其他组件中使用这个 Paypal.js,同样的问题也存在。请帮忙。它现在让我很头疼,我今天必须部署它。
我也在 paypal github 页面上搜索它,但他们说他们解决了问题paypal issue。
我需要更新paypal文档中记录的payapl吗
更新
我payment.returnUrl
有错误https://www.paypal.com/checkoutnow/error?paymentId=PAYID-syufsaddhew&token=EC-shdgasdPayerID=dasgda
。我将返回网址设置为localhost
解决方案
推荐阅读
- reactjs - 如何在 React with Typescript 中为带有样式组件的条件实现 props 接口
- react-native - 当应用程序在后台运行时,如何在 React Native 中同时使用推送通知和网络
- r-markdown - 参考bookdown文件中的多个数字
- python - 如何根据 Pandas Dataframe 中的另一列对一列进行排序?
- sql - EF Core 5 + Sql Server:慢查询
- git - 如何设置提交同一回购的竹子分解?
- java - 将sql数据库中的值存储到java中的变量
- r - Dplyr:case_when - 如何使用来选择一列?
- python - 无法在 json python 中删除不需要的字符
- r - 如何使用 r shiny 中的切换开关将 scales="free_y" 添加到构面?