CODEWITHSUNDEEP
phpstripe-payments
Sebastian Farham
Sebastian Farham

Reputation: 825

Handling Variable Amount (Donation) With Stripe & PHP

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();


?>

Upvotes: 6

Views: 6274

Answers (1)

duck
duck

Reputation: 5470

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/

Upvotes: 9

Related Questions