Stripe Calls Logged but No Test Charges Being Made

Question

I'm running on MAMP stack trying to create a Stripe Checkout with a custom button test charge. Credit card validation occurs and even remembers me a second time. Also, the 200 POST logs are coming up on my Stripe dashboard but no records of charges. So maybe the form code isn't speaking with the server code...

The index.html that has the custom 'Sign Up' button has this code:

<script src="bower_components/jquery/dist/jquery.min.js"></script>  <!-- In the head -->
...
...
<?php require_once('/php/config.php'); ?>
<form action="/php/charge.php" method="post">
<a href="#" id="stripeButton" class="button">Sign Up</a>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
  var handler = StripeCheckout.configure({
  key: 'pk_test_*************************',
  image: 'img/logo.png',
  token: function(token) {
    // Use the token to create the charge with a server-side script.
    // You can access the token ID with `token.id`
  }
});
document.getElementById('stripeButton').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
    name: 'Awesome Subscription',
    description: 'Unlimited Awesomeness',
    amount: 2000,
    panelLabel: '{{amount}} Per Month'
});
e.preventDefault();
});
</script>
</form>

The config.php file has the following code pretty much taken from stripe's php tutorial:

<?php
  require_once('../stripe/lib/Stripe.php');
  $stripe = array(
    'secret_key'      => 'sk_test_************************',
    'publishable_key' => 'pk_test_************************'
    );
  Stripe::setApiKey($stripe['secret_key']);
?>

And in the same /php/ folder the charge.php file contains:

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

  $token  = $_POST['stripeToken'];

  $customer = Stripe_Customer::create(array(
      'email' => 'customer@example.com',
      'card'  => $token
  ));

  $charge = Stripe_Charge::create(array(
      'customer' => $customer->id,
      'amount'   => 2000,
      'currency' => 'usd'
  ));

  echo '<h1>Successfully charged $20.00!</h1>';
?>

Any ideas as to what I may be doing wrong? Is MAMP sufficient to allow the code in index.html to reach the .php files and create the charges? I've also double checked that I have the secret and publishable test keys correct. Why doesn't the checkout code talk to the server side in my setup?

---- Update ---- I've gotten an email response from Stripe support suggesting I add

echo('Hello world!');

to my PHP files to see if the code is being run at all. I did add it to both config.php and charge.php files but I don't get anywhere showing 'Hello World!'. So it looks like the PHP files aren't running. I also had a look at the JavaScript console... and no errors.

So how do I get my PHP files to "run"?

score 2 · Accepted Answer · edited May 23 '17 at 12:22

Solved.

Yes, MAMP is sufficient enough to make the HTML talk to the PHP files. If MAMP is 'running' successfully, PHP should be working fine. PHP is part of MAMP after all.

The issue was the token function provided on Stripe's custom checkout page doesn't come with any code to tell it what to do and submit the form to your PHP files. You are meant to fill the function with your own code. Silly mistake but I didn't read into it in that way with the comments provided:

token: function(token) {
    // Use the token to create the charge with a server-side script.
    // You can access the token ID with `token.id`
  }

I came across this StackOverflow thread and although the code seemed to be a little older as it didn't completely match up with what Stripe has on their custom checkout page now, I used the token function contents of the following code to fill in my token function and add it's submit functionality.

var token = function(res){
 var $input = $('<input type=hidden name=stripeToken />').val(res.id);
 $('form').append($input).submit();
 };

So now my index.html (where my sign up button is) looks like this:

<form action="/php/charge.php" method="post">
<a href="#" id="stripeButton" class="special-button">Sign Up</a>
</form>
...
...
<!-- Just before body tag close -->
<script src="bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery coming from Zurb Foundation install -->
...
<script src="https://checkout.stripe.com/checkout.js"></script>
        <script>
          var handler = StripeCheckout.configure({
            key: 'pk_test_************************',
            image: 'img/logo.png',
            token: function(token) {
              var $input = $('<input type=hidden name=stripeToken />').val(token.id);
              $('form').append($input).submit(); <!-- Code pulled from other StackOverflow thread -->
            }
          });
          document.getElementById('stripeButton').addEventListener('click', function(e) {
            // Open Checkout with further options
            handler.open({
              name: 'Product Name',
              description: 'Product Description',
              amount: 2000,
              panelLabel: '{{amount}} Per Month'
            });
            e.preventDefault();
          });
        </script>

Note * From the older code, res.id is being passed into .val() so I just replaced res.id with token.id to reflect Stripe's suggestions in their comments. So implementing the above code gives me both card validation checks and also the customer and charges being posted on my Stripe dashboard. and the form taking my to charge.php to display charge confirmation page.

Stripe Calls Logged but No Test Charges Being Made

1 Answers1