Last active
December 17, 2015 04:59
-
-
Save tlongren/5554676 to your computer and use it in GitHub Desktop.
Stripe PHP Implementation from http://www.longren.org/pay/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| require 'stripe-php/lib/Stripe.php'; | |
| if ($_POST) { | |
| Stripe::setApiKey("SECRET_API_KEY_HERE"); | |
| $error = ''; | |
| $success = ''; | |
| try { | |
| if (!isset($_POST['stripeToken'])) | |
| throw new Exception("The Stripe Token was not generated correctly"); | |
| $amount = $_POST['amount'] * 100; | |
| $myCard = array('number' => $_POST['card_number'], 'exp_month' => $_POST['card_expiry_month'], 'exp_year' => $_POST['card_expiry_year']); | |
| $charge = Stripe_Charge::create(array('card' => $myCard, 'amount' => $amount, 'currency' => 'usd')); | |
| $success = 'Your payment was successful.'; | |
| } | |
| catch (Exception $e) { | |
| $error = $e->getMessage(); | |
| } | |
| } | |
| ?> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| <title>Pay Tyler Longren</title> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> | |
| <link href='style.css' rel='stylesheet' type='text/css'> | |
| <script type="text/javascript" src="https://js.stripe.com/v1/"></script> | |
| <!-- jQuery is used only for this example; it isn't required to use Stripe --> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| // this identifies your website in the createToken call below | |
| Stripe.setPublishableKey('PUBLIC_API_KEY_HERE'); | |
| function stripeResponseHandler(status, response) { | |
| if (response.error) { | |
| // re-enable the submit button | |
| $('.submit-button').removeAttr("disabled"); | |
| // show the errors on the form | |
| $(".payment-errors").html(response.error.message); | |
| } else { | |
| var form$ = $("#payment-form"); | |
| // token contains id, last4, and card type | |
| var token = response['id']; | |
| // insert the token into the form so it gets submitted to the server | |
| form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />"); | |
| // and submit | |
| form$.get(0).submit(); | |
| } | |
| } | |
| $(document).ready(function() { | |
| $("#payment-form").submit(function(event) { | |
| // disable the submit button to prevent repeated clicks | |
| $('.submit-button').attr("disabled", "disabled"); | |
| var chargeAmount = parseFloat($('.payment-amount').val())*100; //amount you want to charge, in cents. 1000 = $10.00, 2000 = $20.00 ... | |
| // createToken returns immediately - the supplied callback submits the form if there are no errors | |
| Stripe.createToken({ | |
| number: $('.card-number').val(), | |
| cvc: $('.card-cvc').val(), | |
| exp_month: $('.card-expiry-month').val(), | |
| exp_year: $('.card-expiry-year').val() | |
| }, stripeResponseHandler); | |
| return false; // submit from callback | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <h1>Pay Tyler!</h1> | |
| <section> | |
| <!-- to display errors returned by createToken --> | |
| <span class="payment-errors"><?= $error ?></span> | |
| <span class="payment-success"><?= $success ?></span> | |
| <form action="" method="POST" id="payment-form"> | |
| <div class="form-row"> | |
| <input type="text" size="20" autocomplete="off" name="card_number" placeholder="Card Number (eg: 1111222233334444)" class="card-number main-form" /> | |
| </div> | |
| <div class="form-row"> | |
| <input type="text" size="4" autocomplete="off" name="card_cvc" placeholder="CVC Code/Security Code (eg: 112)" class="card-cvc main-form" /> | |
| </div> | |
| <div class="form-row"> | |
| <input type="text" size="2" name="card_expiry_month" placeholder="Expiration Month (eg: 05)" class="card-expiry-month main-form"/> | |
| </div> | |
| <div class="form-row"> | |
| <input type="text" size="4" name="card_expiry_year" placeholder="Expiration Year (eg: 2013)" class="card-expiry-year main-form"/> | |
| </div> | |
| <div class="form-row"> | |
| <input type="text" name="amount" size="2" placeholder="Ammount (eg: 35.99)" class="payment-amount main-form"/> | |
| </div> | |
| <button type="submit" class="submit-button">Submit Payment</button> | |
| </form> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin:0; | |
| padding:0; | |
| font-family: 'Open Sans', sans-serif; | |
| color:#FFF; | |
| } | |
| .payment-errors { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size:10px; | |
| } | |
| body { | |
| background:url("http://www.longren.org/pay/wild_oliva.png"); | |
| } | |
| span.sep { | |
| color:#FFF; | |
| } | |
| .wrapper { | |
| text-align:center; | |
| margin:50px auto; | |
| } | |
| h1 { | |
| color:#fff; | |
| text-shadow:1px 1px 0px rgba(0, 0, 0, 0.3); | |
| margin-bottom:20px; | |
| } | |
| h1 a { | |
| text-decoration: none; | |
| } | |
| section { | |
| background:rgba(0, 0, 0, 0.4); | |
| margin:0 auto; | |
| width:300px; | |
| padding:20px; | |
| text-align:center; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| border-radius: 10px; | |
| -webkit-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18); | |
| -moz-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18); | |
| box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18); | |
| } | |
| .form-row label { | |
| color:#FFF; | |
| } | |
| .main-form { | |
| display:block; | |
| width:280px; | |
| margin-bottom:15px; | |
| padding:10px; | |
| outline:none; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| border:none; | |
| background:rgba(225, 225, 225, 0.1); | |
| font:0.9em 'Open Sans', sans-serif; | |
| color:#fff; | |
| transition: all .3s ease-in-out; | |
| -moz-transition: all .3s ease-in-out; | |
| -webkit-transition: all .3s ease-in-out; | |
| } | |
| .main-form:focus { | |
| background:#eee; | |
| transition: all .3s ease-in-out; | |
| -moz-transition: all .3s ease-in-out; | |
| -webkit-transition: all .3s ease-in-out; | |
| color:#000; | |
| } | |
| button { | |
| border:none; | |
| background: #eeeeee; | |
| background: -moz-linear-gradient(top, #eeeeee 0%, #888888 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#888888)); | |
| background: -webkit-linear-gradient(top, #eeeeee 0%,#888888 100%); | |
| background: -o-linear-gradient(top, #eeeeee 0%,#888888 100%); | |
| background: -ms-linear-gradient(top, #eeeeee 0%,#888888 100%); | |
| background: linear-gradient(to bottom, #eeeeee 0%,#888888 100%); | |
| padding:17px; | |
| box-shadow:0px 1px 0px rgba(225, 225, 225, | |
| 0.2), 0px 1px 0px rgba(0, 0, 0, 0.4) inset; | |
| outline:none; | |
| width:100%; | |
| text-transform:uppercase; | |
| color:black; | |
| letter-spacing:2px; | |
| text-shadow:1px 1px 0px rgba(0, 0, 0, 0.6); | |
| cursor:pointer; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| margin-top:5px; | |
| font-family:'Open Sans', sans-serif; | |
| } | |
| button:active { | |
| box-shadow:inset 0px 2px 1px rgba(0, 0, 0, 0.3); | |
| } | |
| footer { | |
| padding-top:20px; | |
| text-align:right; | |
| width:330px; | |
| margin:0 auto; | |
| } | |
| h6 { | |
| display:inline-block; | |
| position:relative; | |
| bottom:4px; | |
| left:6px; | |
| color:#fff; | |
| font-weight:300; | |
| text-shadow:1px 1px 0px rgba(0, 0, 0 ,0.6); | |
| } |
The problem is with your call to createToken. We deprecated the amount argument to createToken, so you should no longer pass an amount as the second argument. Instead do this:
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
@briancollins Any chance you could give me a pointer in doing this through ajax to prevent page loading? I'm building it right now, but I'm sure I'll run into problems.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When running, I'm given this error right above my form:
Received unknown parameter: amount
No charges ever make it through.