PayPal HTML 设置交易金额的变量

Question

我正在为一家小型企业制作一个投资筹款页面，我正在尝试创建一个自定义 PayPal 按钮，其中的捐赠金额由滑块设置。这样做的原因是企业不想接受低于一定数额的贷款，但他们不想将人们的选择限制在有限的范围内（大多数 PayPal 按钮给人们有限的捐赠金额选择）。他们希望能够选择 500 美元到 38,000 美元之间的任何金额。他们的想法是，他们将 select 使用滑块来计算此金额，然后单击一个按钮，将他们带到该金额的付款屏幕。代码在我的 GitHub https://github.com/cbarboza2011/funkychickenfoodtruck 上。滑块和 paypal 按钮打开 donate.html

我已经研究了 PayPal Docs，但我对后端的东西真的很陌生，所以我不确定如何实施所提供的信息。我想我需要以某种方式访问 HTML 变量 amount 但我不确定该怎么做。目前，滑块对生成的 paypal 页面没有影响；用户被带到显示“$0.01”的页面。我希望滑块设置 amount 以便当用户单击 paypal 按钮时，会出现一个包含他们选择的金额的付款页面，而不是显示“$0.01”的页面。

注意：donate.html 页面目前仅针对移动设备设计样式，因此请尽可能在 Chrome 上的 devtools 移动视图中查看，否则在普通桌面上一切都会变得巨大 window .它仍然可以工作，但它很大。

  $('.slider').slider({
    max: 38000,
    min: 500,
    step: 100,
    value: 500,
  });

function getLoanAmount() {
    var loanAmount = $('.loanamount');
    var $selection = $( ".slider" ).slider( "value" );
    $(loanAmount).text($selection);
  }

  getLoanAmount();

  $('.slider').on('slide', function() {
    getLoanAmount();
  });

  $(".slider").on( "slidestop", function() {
    var $amount = $('.loanamount').text();
    $( ".slider" ).slider( "option", "value", $amount );
    $('a.paypalbutton').attr('href', 'https://www.paypal.com/donate?hosted_button_id=LR2YL2LXSYSTQ&amount=' + $amount);
  });

  $('button.submitloan').on('click', function() {
    $('.loan-setter').slideUp();
    $('#smart-button-container').css('display', 'block');
  });

<div class="slider"></div>
<!-- PayPal Widget -->
<a href="https://www.paypal.com/donate?hosted_button_id=LR2YL2LXSYSTQ" class="paypalbutton">
<img src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png" alt="Buy Now" />
</a>

更新：我试过修改 PayPal JS，但我不知道如何检查它是否有效？

function initPayPalButton() {
    paypal.Buttons({
      style: {
        shape: 'pill',
        color: 'white',
        layout: 'vertical',
        label: 'paypal',
  
      },
  
      createOrder: function(data, actions) {
        var $amount = $('.loanamount').text();
        $('.dollaramount').text($amount);
        return actions.order.create({
          purchase_units: [{"amount":{"currency_code":"USD","value": $amount}}]
        });
      },
  
      onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
          alert('Transaction completed by ' + details.payer.name.given_name + '!');
        });
      },
  
      onError: function(err) {
        console.log(err);
      }
    }).render('#paypal-button-container');
  }
  initPayPalButton();

Answer 1

对于经典的 HTML 重定向按钮：

使用捐赠或立即购买类型的非托管按钮（无hosted_button_id）。

转到 https://www.paypal.com/buttons ，登录，开始创建您的按钮，但在创建按钮之前，请确保您在第 2 步中取消选中将按钮保存在 PayPal 的选项，因此它是非托管的。

生成代码后，单击其上方以取消代码保护。

现在您有了可以复制和编辑的代码，或者如果您喜欢 URL，可以使用 'Email' 选项卡。 add/modify的输入参数是“金额”，如documented here.

为了获得更好的 JS 上下文支付体验，请使用智能结账按钮；这是一个示例实现：https://developer.paypal.com/demo/checkout/#/pattern/client

Answer 2

我通过复制 getLoanAmount 函数的 $selection var 从您的滑块中获得了新金额。它最初是一个名为 AmountNumeral 的 var，因为它是一个数字值。然后 $amount 使用 toString() 只是让它成为一个文本字符串，这样你就可以将它作为你想要显示的金额传递到你的 paypal URL 中。如果有助于查看差异，控制台日志可以显示它如何将其从数字格式化为字符串

paypal 上的金额最初仍显示为 $0.00。我读到，如果您的贝宝捐赠按钮是“托管”的，那么作为安全预防措施，不可能更改金额值或任何预设数字。不确定您的贝宝按钮是否设置为“托管”或“非托管”，但我可能会检查一下。

在我快速浏览了一些关于 PayPal 及其网站的答案之前，我还没有使用过 PayPal。但这至少应该修复更新后的滑块值。

Pre-populate Donation Amount on Website

function getLoanAmount() {
  var loanAmount = $('.loanamount');
  var $selection = $( ".slider" ).slider( "value" );
  $(loanAmount).text($selection);

  console.log(($selection));
  console.log($(loanAmount).text($selection));
 }

 getLoanAmount();

 $('.slider').on('slide', function() {
getLoanAmount();
});


$(".slider").on( "slidestop", function() {
 var $amountNumeral = $( ".slider" ).slider( "value" );
 console.log($amountNumeral);
 var $amount = $amountNumeral.toString();
 console.log('$amount');

 $( ".slider" ).slider( "option", "value", $amount );

 $('a.paypalbutton').attr('href', 'https://www.paypal.com/donate?hosted_button_id=LR2YL2LXSYSTQ&currency_code=USD&amount=10.00');
});

PayPal HTML 设置交易金额的变量

PayPal HTML variable to set transaction amount

paypal