FlutterwavePHP集成支付跳转解决方法

✅ 正确做法是：后端不再尝试重定向，而是将支付链接作为JSON响应返回；前端AJAX成功回调中，主动执行 window.location.href = link 实现跳转。

以下是修正后的完整实现方案：

✅ 后端PHP代码（process_payment.php）

 'https://api.ravepay.co/flwv3-pug/getpaidx/api/v2/hosted/pay',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_POST => true,
        CURLOPT_POSTFIELDS => json_encode([
            'amount' => $amount,
            'customer_email' => $email,
            'currency' => $currency,
            'txref' => $txref,
            'PBFPubKey' => $PBFPubKey,
            'redirect_url' => $redirect_url,
        ]),
        CURLOPT_HTTPHEADER => [
            'Content-Type: application/json',
            'Cache-Control: no-cache'
        ],
    ]);

    $response = curl_exec($curl);
    $err = curl_error($curl);
    curl_close($curl);

    if ($err) {
        http_response_code(500);
        echo json_encode(['success' => false, 'message' => 'Curl error: ' . $err]);
        exit;
    }

    $result = json_decode($response, true);
    if (!isset($result['data']['link'])) {
        http_response_code(400);
        echo json_encode([
            'success' => false,
            'message' => $result['message'] ?? 'Failed to generate payment link'
        ]);
        exit;
    }

    // ✅ 关键：不重定向，而是返回链接供前端跳转
    echo json_encode([
        'success' => true,
        'link' => $result['data']['link']
    ]);
}

✅ 前端JavaScript（AJAX调用）

$('#paymentForm').on('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交

    $.ajax({
        url: 'process_payment.php',
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'json',
        beforeSend: function() {
            $('#submitBtn').prop('disabled', true).text('Processing...');
        },
        success: function(res) {
            if (res.success && res.link) {
                // ✅ 主动跳转到Flutterwave支付页
                window.location.href = res.link;
            } else {
                alert('Payment setup failed: ' + (res.message || 'Unknown error'));
                $('#submitBtn').prop('disabled', false).text('Pay Now');
            }
        },
        error: function(xhr) {
            let msg = 'Server error';
            if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
            alert('Error: ' + msg);
            $('#submitBtn').prop('disabled', false).text('Pay Now');
        }
    });
});

⚠️ 注意事项与最佳实践

• 不要在AJAX响应中使用 header('Location: ...')：该头对AJAX请求完全无效，且可能引发“headers already sent”错误。
• 始终校验后端响应结构：Flutterwave API失败时$result['data']可能为null，需判空再取link。
• 敏感参数需服务端生成：txref、redirect_url等必须由PHP生成并签名，禁止前端拼接，防止篡改。
• 启用CORS（若跨域）：若前端与PHP接口域名不同，需在PHP响应头添加：

  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: POST');
  header('Access-Control-Allow-Headers: Content-Type');

• 生产环境替换测试密钥：示例中的PBFPubKey为测试公钥，上线前务必切换为生产环境密钥，并启用Webhook校验支付结果。

通过以上调整，即可在保留AJAX用户体验的同时，确保用户无缝跳转至Flutterwave安全支付页，彻底解决“控制台显示Hosted Link却无跳转”的典型集成障碍。

今天关于《FlutterwavePHP集成支付跳转解决方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！