CODEWITHSUNDEEP
paypal
mike9911
mike9911

Reputation: 3

PayPal Smart Buttons Custom amount

i'm having a bit of an issue with some code regarding the paypal smart button i'm no code expert i dabble a bit but could do with some help.

I have the button set up and all is working but i would like to make it so the customer can enter the amount they wish to pay but everything i have tried has failed so far.

for example if customer A owes £25 they can visit the pay section enter £25 and then click the nice new fancy paypal button.

Been looking for like 3 days now and hitting dead ends im no coder i know a bit but not enough to work out the issue.

    <script src="https://www.paypal.com/sdk/js?client-id=xxxxxxx&currency=GBP&commit=true">

  </script>

<div id="paypal-button-container"></div>
<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      // Set up the transaction
 return actions.order.create({
        purchase_units: [{
          amount: {
            value: '10'
          }
        }]
      });
    }
  }).render('#paypal-button-container')
</script>

Upvotes: 0

Views: 1648

Answers (2)

Ingo Rauth
Ingo Rauth

Reputation: 21

Building on the example by PayPal_vidya, I used the following code that worked with the latest PayPal smart button code:

<div id="paypal-button-container">
   <label>Enter amount : </label><input name="amount" type="text"  id="amount" />
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
      },
      createOrder: function(data, actions) {
          amt = document.getElementById("amount").value;
          return actions.order.create({
              purchase_units: [{
                  amount: {
                      value: amt
                  }
              }]
          });
      },
      onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
              alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container');
</script>

Upvotes: 2

Vidya
Vidya

Reputation: 56

You have to pass the amount dynamically to PayPal Create order function. Added a input field and passed amount to function - in addition to this you can check for negative and non 0 amount as well by adding checks to input fields. Try the below basic code , i hope that this will solve the issue

<script src="https://www.paypal.com/sdk/js?client-id=xxxxxxx&currency=GBP&commit=true">

  </script>

 <label>Enter amount : </label><input name="amount" type="text"  id="amount" />

    <!-- Set up a container element for the button -->
    <div id="paypal-button-container"></div>
<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
        var amt = document.getElementById("amount").value;
      // Set up the transaction
 return actions.order.create({
        purchase_units: [{
          amount: {
            value: amt
          }
        }]
      });
    }
  }).render('#paypal-button-container')
</script>

Upvotes: 3

Related Questions