Question

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

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

注意：donate.html 页面目前仅适用于移动设备，因此如果可能，请在 Chrome 上的 devtools 移动视图中查看，否则在常规桌面窗口中所有内容都会变得非常庞大。它仍然可以工作，但它是巨大的。

  $('.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 按钮：

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

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

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

现在您拥有可以复制和编辑的代码，或者如果您喜欢 URL，也可以使用“电子邮件”选项卡。添加/修改的输入参数是“amount”，如documented here。

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

Answer 2

我通过复制您的 getLoanAmount 函数的 $selection 变量从您的滑块中获得了新金额。它最初是一个名为 AmountNumeral 的变量，因为它是一个数字值。然后 $amount 使用 toString() 只是为了使它成为一个文本字符串，以便您可以将它作为您想要显示的金额传递到您的贝宝 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 变量

2 个答案: