PayPal 付款成功后显示 HTML 按钮

问题描述

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

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

我应该如何使这个 HTML 按钮正确显示和消失?我试图防止我的 Web 应用程序的用户在不付费的情况下无法使我的 HTML 按钮可见?例如,用户能否通过注入 CSS 或 JavaScript 使 HTML 按钮可见?

我按照以下方式制作了我的第一个版本的网络应用程序:首先隐藏 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")

解决方法

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

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

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

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

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