将自定义变量传递给 PayPal

Question

我正在尝试重新创建此 https://www.paypal.com/donate/?hosted_button_id=JA4LPSED5LVCG，这是标准托管的 PayPal 捐赠按钮。它有预设金额，让用户添加他们的意图（支持哪个程序），以及每月定期捐款。我开始使用 jQuery 来定位元素并传递预设数量并且它有效但是因为我已经采用了普通的 js 方法。我的问题是，我什至使用 PP SDK 正确设置了吗？或者我是否需要与 API 进行不同类型的整合以支持经常性捐款。

在这一点上，我的代码比我开始时更糟糕 jQuery（至少我能够通过预设金额，但不能通过捐赠意图）。我在这里设置了一个 Codepen，希望收到所有反馈。 https://codepen.io/tripdog/pen/dyvNeEV

var amount = 0;
var selectedProgram = "";

const buttons = document.querySelectorAll("button.Paypal");
buttons.forEach((btn) => {
  btn.addEventListener("click", () => {
    amount = btn.dataset.id;
  });
});

const programSelect = document.getElementById("programSelect");
programSelect.addEventListener("change", (e) => {
  selectedProgram = programSelect.value;
});

// Render the PayPal button into #paypal-button-container
paypal
  .Buttons({
    // Set up the transaction
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: amount
          },
          description: programSelect
        }]
      });
    },
    // Finalize the transaction
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(details) {
        // Show a success message to the buyer
        alert("Donation completed by " + details.payer.name.given_name + "!");
        location.replace("https://www.example.com/completed_success.php");
      });
    }
  })
  .render("#paypal-button-container");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
  <script src="https://www.paypal.com/sdk/js?client-id=ATRpb7qwKVe802ScEBXewSlZEzVfK0LJwBpn5AI7orX96kziTQw4CvrOler2sR4H-rIN4aL_dPvtCg2l&currency=USD"></script>

  <title>IBS Donation Form</title>
</head>

<body>
  <input type="checkbox" name="vehicle3" value="Boat" checked> Recurring Monthly Payment<br>
  <h4 class="text-style-news">Paypal Payment Platform</h4>
  <button class="btn btn-sm btn-danger Paypal" data-id="25" style="margin-right: 15px">
    
  </button>
  <button class="btn btn-sm btn-danger Paypal" data-id="50" style="margin-right: 15px">
    
  </button>
  <button class="btn btn-sm btn-danger Paypal" data-id="100" style="margin-right: 15px">
    0
  </button>
  <button class="btn btn-sm btn-danger Paypal" data-id="500">0</button>

  <div class="Options">
    <label for="availablePrograms">Choose a program to support (optional)</label>
    <select id="programSelect">
      <option class="Paypal programSelect" name="No Prgram Selected" value="No Prgram Selected" data-id="No Prgram Selected">
        --(Optional) Use this donation for--
      </option>
      <option class="Paypal programSelect" name="Prison Program" value="Prison Program" data-id="Prison Program">
        IBS Prison Program (監獄弘法
      </option>
      <option class="Paypal programSelect" name="Nepal Emergency Relief" value="Nepal Emergency Relief" data-id="Nepal Emergency Relief">
        Nepal Medical Emergency Relief ( 尼泊爾醫療急難救援
      </option>
      <option class="Paypal programSelect" name="Sramanera School of Nepalf" value="Sramanera School of Nepal" data-id="Sramanera School of Nepal">
        IBS Sramanera School of Nepal (尼泊爾菩薩沙彌學院)
      </option>
      <option class="Paypal programSelect" name="Monastic Living Expenses" value="Monastic Living Expenses" data-id="Monastic Living Expenses">
        Monastic Living Expenses　(供養法師)
      </option>
    </select>
  </div>
  <label style="float: left" for="amount" class="mb-2">
    <p class="support-p"><strong>Any Amount*</strong></p>
  </label>
  <br />
  <br />
  <input type="number" id="amount" class="form-control mb-4" placeholder="in $USD" onchange="Pay()" />

  <div id="paypal-button-container"></div>
  <br />
</body>

</html>

PS 目前我不担心样式，只担心功能。客户端 ID 是沙盒 :-)

Answer 1

该代码不适用于定期付款。订阅是一个单独的集成，请参阅订阅概述：https://developer.paypal.com/docs/subscriptions/，除了 API 调用之外，您还可以在接收帐户中手动创建和管理计费产品和计划：

沙盒：https://www.sandbox.paypal.com/billing/plans
直播：https://www.paypal.com/billing/plans .

如果您想在 PayPal 页面上选择是否重复进行捐赠，唯一的选择是在 https://www.paypal.com/buttons . In Step 2 you can uncheck the option to save the button at PayPal, and when you generate the code you can remove the code protection. A custom value can be passed using the custom parameter, https://developer.paypal.com/docs/paypal-payments-standard/integration-guide/Appx-websitestandard-htmlvariables/#payment-transaction-variables 处创建一个非 JS 捐赠按钮，这将在接收者帐户的交易中可见详情。

将自定义变量传递给 PayPal

Passing Custom Variables to PayPal

javascript

jquery

forms

paypal-rest-sdk