时间戳

首页 > 解决方案 > PayPal支付成功后显示HTML按钮

javascript - PayPal支付成功后显示HTML按钮

问题描述

我正在编写一个具有 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';
}

蟒蛇烧瓶

return render_template("index.html")

标签： javascriptcssflaskpaypalpaypal-rest-sdk

解决方案

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

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

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

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

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

推荐阅读