Handling Variable Amount (Donation) With Stripe & PHP

Question

I need to allow users to enter custom amounts using Stripe. They enter what they want to pay in a input. Then I have a script that collects the amount below the default stripe checkout button. But how am I supposed to handle the charge server-side on charge.php?

donation.php

    //user enter custom amount
    <input type="number" class='form-control' 
    id="custom-donation-amount" 
    placeholder="$50.00" min="0" step="10.00 " />

    //default stripe checkout button
      <script
        src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="pk_test_XXXXXXXXXXXXXXX"
        data-amount="0"
        data-name="ORGANIZATION"
        data-description="Saving Penguins"
        data-image="logo.png"
        data-locale="auto"
        data-zip-code="true"
        data-billing-address="true"
        data-label="DONATE"
        data-currency="usd">
      </script>

//script to collect variable amount
  <script type="text/javascript">
    $(function() {
        $('.donate-button').click(function(event) {
            var amount = $('#custom-donation-amount').val();        
            $('.stripe-button').attr('data-amount', amount)
        });
    });
</script>

charge.php

<?php require_once('./config.php');

  $token  = $_POST['stripeToken'];
  $email  = $_POST['stripeEmail'];

  $customer = \Stripe\Customer::create(array(
      'source'  => $token,
      'email' => $email)
  );

  $charge = \Stripe\Charge::create(array(
      'customer' => $customer->id,
      'amount'   => $amount,
      'currency' => 'usd'
  ));

   header("Location: confirmation.php");
die();


?>

Answer 1

Within the <form> where you place Checkout, you'd also want to add an input to collect the Amount from the user. Note the name I've given my input a name of amount

<form method="POST" action="/charge.php">
<input type="number" class="form-control" name="amount" id="custom-donation-amount" placeholder="50.00" min="0" step="10.00" />
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_XXXXXXXXXXXXXXX"
data-name="ORGANIZATION"
data-description="Saving Penguins"
data-image="logo.png"
data-locale="auto"
data-billing-address="true"
data-label="DONATE"
data-currency="usd">
</script>
</form>

In your backend you could grab this amount field when Checkout submits, much like you would the token created by Stripe

$token  = $_POST['stripeToken'];
$email  = $_POST['stripeEmail'];
$amount = $_POST['amount'];

// your code to create a charge
// ...

If you're looking to dynamically change the amount displayed within the Checkout window, you should use the Custom Checkout, rather than the basic Checkout block, or it may not update correctly.

See https://stripe.com/docs/checkout#integration-custom

Or, for a Fiddle: https://jsfiddle.net/ywain/g2ufa8xr/