为react-paypal-express-checkout配置返回URL的方法

我懂你这种闹心的感觉——明明钱收到了，但跳转不对，后台配置的URL还不生效。其实这个组件本身就支持直接在代码里指定跳转地址，而且优先级比后台设置更高，咱们直接改代码就能搞定。

这个组件提供了returnUrl和cancelUrl两个专属props，分别用来设置支付成功、取消支付后的跳转页面，把这俩参数加上就解决问题了。

来看修改后的完整代码示例：

import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout'

export default class PaypalButton extends React.Component {
  render() {
    const onSuccess = (payment) => {
      // 这里还能加支付成功后的业务逻辑，比如给后端发请求更新订单状态
      console.log("支付成功！", payment);
    }
    const onCancel = (data) => {
      // 取消支付后的逻辑，比如提示用户
      console.log("支付已取消！", data);
    }
    const onError = (err) => {
      // 支付出错后的处理逻辑
      console.log("支付出错！", err);
    }
    let env = 'production';
    let currency = 'GBP';
    let total = 20;
    const client = {
        sandbox: 'YOUR-SANDBOX-APP-ID',
        production: 'YOUR-PROD-APP-ID',
    }
    
    // 配置跳转URL，必须用完整的绝对路径
    const returnUrl = "https://your-domain.com/payment-success";
    const cancelUrl = "https://your-domain.com/payment-cancel";

    return (
      <PaypalExpressBtn 
        env={env} 
        client={client} 
        currency={currency} 
        total={total} 
        onError={onError} 
        onSuccess={onSuccess} 
        onCancel={onCancel}
        returnUrl={returnUrl}  // 支付成功后跳转的页面
        cancelUrl={cancelUrl}  // 取消支付后跳转的页面
      />
    )
  }
}

还有几个细节要注意：

• 跳转URL必须用绝对路径（包含完整的https/http前缀和域名），用相对路径大概率会出问题
• 如果你的项目是单页应用（SPA），要确保这些URL对应的前端路由已经配置好，能被正确识别
• onSuccess回调依然可以保留，用来处理业务逻辑，跳转和回调是互不冲突的

这样配置之后，支付完成或取消时就会自动跳转到你指定的页面，不用再依赖PayPal后台的设置啦。

内容的提问来源于stack exchange，提问作者Giles German