Laravel集成srmklive/paypal时PayPal按钮404、登录弹窗丢失怎么解决

问题解决方法 #

1. 修正前端请求路径错误 #

你前端createOrder方法里的fetch路径开头缺少斜杠，属于相对路径，当前页面如果不在站点根目录时就会拼接出错误的请求地址，直接触发404。同时Laravel路由默认不匹配末尾斜杠，你请求地址末尾带的斜杠也会导致路由匹配失败。
修改请求路径为：
/api/paypal/order/create （开头加斜杠为绝对路径，去掉末尾斜杠匹配Laravel路由规则）

2. 补全请求头配置 #

你的fetch请求缺少Content-Type声明，Laravel无法正确解析JSON格式的请求参数，同时如果路由写在web.php下还需要携带CSRF令牌，请求部分修改为如下代码：

paypal.Buttons({
 createOrder: function(data, actions) {
  return fetch('/api/paypal/order/create', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
  },
  body:JSON.stringify({
   "value":30
   })
 }).then(function(res) {
    return res.json();
   }).then(function(orderData) {
     return orderData.id;
   });
 },

  onApprove: function(data, actions) {
    return fetch('/api/paypal/order/capture', {
     method: 'post',
     headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
     },
     body: JSON.stringify({
      orderID: data.orderID
     })
     }).then(function(res) {
     return res.json();
     }).then(function(orderData) {
     var errorDetail = Array.isArray(orderData.details) && orderData.details[0];
     if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
      return actions.restart();
     }

     if (errorDetail) {
      var msg = 'Sorry, your transaction could not be processed.';
      return alert(msg); 
                    }
                });
            }

        }).render('#paypal-button-container');

3. 确认路由注册正确 #

检查你的routes/api.php文件是否已注册对应路由，Laravel的api路由默认自带/api前缀，无需重复添加：

use App\Http\Controllers\PaymentController;

Route::post('/paypal/order/create', [PaymentController::class, 'create']);
Route::post('/paypal/order/capture', [PaymentController::class, 'capture']);

你可以执行命令php artisan route:list查看实际生成的路由路径是否和请求路径一致。

4. 确认中间件配置 #

如果路由注册后仍然返回404，检查路由是否被权限中间件（比如auth、sanctum）拦截，如果需要登录才能访问的接口，未登录状态下会返回404或者401错误。

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