0

I am trying to get Stripe checkout with custom payment amounts to work. The pop up Stripe form will submit but nothing shows up in my Stripe account.

In my actual code I do have my api keys entered. I am also not using composer.

<form action="charge.php" method="POST" id="payment-form">
  <input style="width: 100px; float: right;" class="form-control" type="number" id="custom-donation-amount" placeholder="$50.00" min="0" step="5.00"/>
  <input class="donate-desc" style="width: 100%; float: right;" class="form-control" type="text" placeholder="What is this donation for?"/>
  <button style="float: left; margin-right: 10px;" id="customButton" class="simpay-payment-btn stripe-button-el"><span>Make a Donation</span></button>
  <script src="https://checkout.stripe.com/checkout.js"></script>
  <script>
    var handler = StripeCheckout.configure({
      key: 'test publishable key',
      image: 'image.png',
      token: function(token) {
        var stripeToken = token.id;
      }
    });

    document.getElementById('customButton').addEventListener('click', function(e) {
      // This line is the only real modification...
      var amount = jQuery("#custom-donation-amount").val() * 100;
      var desc = jQuery('.donate-desc').val();
      handler.open({
        name: 'name',
        description: desc,
        amount: Math.round(amount)
      });
      e.preventDefault();
    });
  </script>

Here is charge.php

<?php
    require '/stripe/Stripe.php';

    $stripe = array(
        "secret_key"      => "test secret key",
        "publishable_key" => "test publishable key"
    );

    \Stripe\Stripe::setApiKey($stripe['secret_key']);

    $token  = $_POST['stripeToken'];

    $charge = \Stripe\Charge::create(array(
        'amount'   => $_POST['amount'],
        'descrition' => $_POST['description'],
        'currency' => 'usd',
        'source' => $token
    ));

?>
user715564
  • 1,650
  • 2
  • 25
  • 60

1 Answers1

0

In your code, you're just setting a variable stripeToken to the token.Id. You still need to pass that variable to your backend to be handled.

In other words, after you get your token.id value, you should be making a new request (AJAX or otherwise) to some endpoint on your backend to handle. The way your form is structured around your script will not work.

You need something more like this: https://jsfiddle.net/osrLsc8m/

korben
  • 1,146
  • 7
  • 7