PayPal 支付成功后显示 HTML 按钮答案

【问题标题】：Make HTML button appear after successful PayPal paymentPayPal 支付成功后显示 HTML 按钮
【发布时间】：2021-03-31 02:27:41
【问题描述】：

我正在编写一个具有 PayPal 按钮、HTML 表单和 HTML 按钮的 Web 应用程序。在我的 Web 应用程序中，我在后端使用 HTML、CSS、JavaScript 和 Python Flask。

首先，Web 应用程序的用户应该通过 PayPal 进行付款。其次，支付成功后，出现 HTML 提交按钮，允许用户提交 HTML 表单进行数据库查询。第三，数据库查询结果显示给用户，HTML按钮应该消失。

我应该如何让这个 HTML 按钮正确显示和消失？我试图防止我的 Web 应用程序的用户不付费就无法使我的 HTML 按钮可见？例如，用户是否能够通过注入 CSS 或 JavaScript 使 HTML 按钮可见？

我通过以下方式制作了我的第一个 Web 应用程序版本：首先隐藏 HTML 按钮 (CSS)，其次当进行 PayPal 付款时，JavaScript 函数 makeButtonVisible() 使 HTML 按钮可见。第三，当 Python Flask 再次渲染网站并显示数据库查询结果时，HTML 按钮消失。

CSS

#html-button {
    visibility: hidden;
}

JAVASCRIPT

var CREATE_PAYMENT_URL = 'http://127.0.0.1:5000/payment';
var EXECUTE_PAYMENT_URL = 'http://127.0.0.1:5000/execute';

paypal.Button.render(
  {
    env: 'sandbox', // Or 'sandbox'
    commit: true, // Show a 'Pay Now' button
    payment: function () {
      return paypal.request.post(CREATE_PAYMENT_URL).then(function (data) {
        return data.paymentID;
      });
    },

    onAuthorize: function (data) {
      return paypal.request
        .post(EXECUTE_PAYMENT_URL, { paymentID: data.paymentID, payerID: data.payerID })
        .then(function (res) {
          console.log(res.success);

          makeButtonVisible();

          // The payment is complete!
          // You can now show a confirmation message to the customer
        });
    },
  },
  '#paypal-button',
);

function makeButtonVisible() {
  document.getElementById('html-button').style.visibility = 'visible';
}

Python 烧瓶

return render_template("index.html")

【问题讨论】：

标签： javascript css flask paypal paypal-rest-sdk

【解决方案1】：

安全设计在服务器端捕获付款，然后允许付款人继续执行任何操作。

您需要两条返回 JSON 的路由，一条用于“创建订单”，一条用于“捕获订单”documented here。您可以使用 Checkout-Python-SDK。

将您的两条路由与以下前端 UI 配对以供批准：https://developer.paypal.com/demo/checkout/#/pattern/server

一旦捕获成功（并在将成功 JSON 返回到客户端之前将其记录在服务器数据库中），您可以通过多种方式继续使用 JavaScript“取消隐藏”或显示表单。由于捕获发生在服务器上，因此您将能够使用该事实来验证表单提交是否与数据库中存在的实际付款记录相符，否则将拒绝它。

如果可能，您还需要更新 URL，以便用户可以刷新页面或稍后返回该页面，并且仍然能够提交该付款的表单。

【讨论】：