then() 函数的替代方法

Question

我正在开发一个需要 PayPal 支付网关的项目。我在网上找到了一个可以正常工作的简单教程，只是将 PayPal 响应发送到控制台日志。在线查找任何实例的 then() 函数用于登录到控制台以外的任何实例都是空的。现在的代码：

return actions.order.capture().then(function (details) {
            console.log(details);

需要更改为 then() 以外的函数，以便将 JSON 对象发送到 PHP 处理页面。作为后端开发人员，我不确定那将是什么功能。任何人都可以提出建议吗？整个代码如下：

HTML & JS 脚本

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Paypal Payment</title>

    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main id="cart-main">
        <div class="site-title text-center">
            <h3 class="font-title">Shopping Cart</h3>
        </div>

        <div class="container">
            <div class="grid">
                <div class="col-1">
                    <div class="flex item justify-content-between">
                        <div class="flex">
                            <div class="img text-center">
                                <img src="./assets/pro1.png" alt="">
                            </div>
                            <div class="title">
                                <h3>Canon EOS 1500D</h3>
                                <span>Electronics</span>

                                <div class="buttons">
                                    <button type="submit"><i class="fas fa-chevron-up"></i> </button>
                                    <input type="text" class="font-title" value="1">
                                    <button type="submit"><i class="fas fa-chevron-down"></i> </button>
                                </div>
                                <a href="#">Save for later</a> |
                                <a href="#">Delete From Cart</a>
                            </div>
                        </div>
                        <div class="price">
                            <h4 class="text-red">$349</h4>
                        </div>
                    </div>
                </div>
                <div class="col-2">
                    <div class="subtotal text-center">
                        <h3>Price Details</h3>

                        <ul>
                            <li class="flex justify-content-between">
                                <label for="price">Products ( 1 item ) : </label>
                                <span>$399</span>
                            </li>
                            <li class="flex justify-content-between">
                                <label for="price">Delivery Charges : </label>
                                <span>Free</span>
                            </li>
                            <hr>
                            <li class="flex justify-content-between">
                                <label for="price">Amout Payble : </label>
                                <span class="text-red font-title">$399</span>
                            </li>
                        </ul>
                        <div id="paypal-payment-button">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>


    <script src="https://www.paypal.com/sdk/js?client-id=ASbdZ8CH5kN5y98rzOuKMLPYsHl4QHLYcDGJ6lgaRjxiRp97t53sPWr1yG5vyd9mlHbyqw3vGUZaJsok&disable-funding=credit,card"></script>
    <script>
    // Create a Global var - the HTML charge is dummy stuff
    window.charge = 0.27;
    
    paypal.Buttons({
    style : {
        color: 'blue',
        shape: 'pill'
    },
    createOrder: function (data, actions) {
        return actions.order.create({
            purchase_units : [{
                amount: {
                    value: window.charge 
                }
            }]
        });
    },
    onApprove: function (data, actions) {
        return actions.order.capture().then(function (details) {
            console.log(details);
            window.location.replace("https://localhost/PayPal_Simple/payPalResponse.php?q=good");
            window.alert('This was successful.');
        })
    },
    onCancel: function (data) {
        window.location.replace("https://localhost/PayPal_Simple/payPalResponse.php?q=bad");
        window.alert('Something went wrong!');
    }
}).render('#paypal-payment-button');</script>
</body>
</html>

PHP

<?php

// Get the Response from PayPal
$status = $_GET['q'];

// Once there is an object that can be tested, that will be used instead of ?q=
if($status = "good") {
    echo "The payment was a success.<br />";
} elseif($status = "bad") {
    echo "The charge was cancelled.";
} else {
    echo "Something else went wrong.";
}

// Of course, this doesn't display anything
echo '<pre>';
print_r($_POST); 
echo '<pre>';

// Insert data into the database

// Redirect the client to another page

?>

非常感谢您的帮助！ 干杯， 瑞克

Answer 1

不在客户端捕获，然后将数据发送到后端。相反，改为适当的服务器端集成——后端应该与 PayPal 本身通信并根据请求向客户端发送数据。

在您的服务器上创建两条路由，一条用于“创建订单”，一条用于“捕获订单”，documented here。这些路由应该只返回 JSON 数据（没有 HTML 或文本）。后者应该（成功时）在返回之前将付款详细信息存储在您的数据库中（特别是purchase_units[0].payments.captures[0].id，PayPal 交易 ID）

将这两条路线与以下批准流程配对：https://developer.paypal.com/demo/checkout/#/pattern/server

Answer 2

作为This link reads ，尝试使用

onApprove

''''

const onApprove= new Promise((resolve, reject) => {
  {resolve((data,actions) => {actions.order.capture(data,actions)}});
});

''''

buttonPushFunction

''''

async function doYourButtonPush() {
  try {
    await onApprove;
    console.log("The Promise is resolved!", value);
  } catch (e) {
    console.error("The Promise is rejected!", error);
  } finally {
    function (details) {
            console.log(details);
            window.location.replace("https://localhost/PayPal_Simple/payPalResponse.php?q=good");
            window.alert('This was successful.');
        }
  }
}

''''