PayPal HTML variable to set transaction amount

Question

I'm making an investment fundraising page for a small business and I'm trying to create a custom PayPal button where the amount to give is set by a slider. The reason for this is that the business doesn't want to take loans less than a certain amount, but they don't want to restrict people to a limited number of choices (most PayPal buttons give people limited options for donation amounts). They want to be able to choose any amount from $500-$38,000. The idea is that they'll select this amount with a slider, then click a button that takes them to a payment screen for that amount. The code is on my GitHub at https://github.com/cbarboza2011/funkychickenfoodtruck. The slider and paypal button on are on donate.html

I've looked into the PayPal Docs, but I'm really new to backend stuff and so I'm not sure how to implement the information provided. I think I need to somehow access the HTML variable amount but I'm not sure how to do so. Currently, the slider has no effect on the resulting paypal page; users are taken to a page showing "$0.01". I want the slider to set the amount so that when a user clicks the paypal button, a payment page with their chosen amount comes up instead of a page showing "$0.01".

NOTE: The donate.html page is only currently styled for mobile, so view in devtools mobile view on Chrome if possible, otherwise everything will be enormous in a regular desktop window. It will still work, but it's huge.

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

UPDATE: I've tried modifying the PayPal JS, but I don't know how to check if it works?

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

For a classic HTML-only button that redirects:

Use an unhosted button (no hosted_button_id), of type Donate or Buy Now.

Go to https://www.paypal.com/buttons , sign in, start creating your button, but before creating it ensure that in Step 2 you uncheck the option to Save the button at PayPal, so it is unhosted.

Once you generate your code, click above it to remove the code protection.

Now you have code that can be copied and edited, or you can use the 'Email' tab if you prefer a URL. The input parameter to add/modify is "amount", as documented here.

---

For a better JS in-context payment experience, use a smart checkout button; here is an example implementation: https://developer.paypal.com/demo/checkout/#/pattern/client

Answer 2

I got the new amount from your slider from copying the $selection var of your getLoanAmount function. Its originally a var called AmountNumeral because its a number value. Then $amount uses toString() just to make it a text string so that you can pass it into your paypal URL as the amount you want to show up. The console logs can just show how it formats it from numeral to string if that helps in seeing the difference

The amount on paypal still shows up as $0.00 initially. I read that if your paypal donate button is "hosted" then its impossible to change the amount value or any preset numbers as a safety precaution. Not sure if your paypal button was setup as "hosted" or "unhosted" but I would check that out maybe.

I haven't worked with PayPal before I just quickly skimmed through some answers about it and their website. But this should fix your updated slider value at least.

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');
});