I got some request from my blog readers about “How to Integrate Stripe Payment Gateway in php”, so that I have created stripe payment gateway script with live checkout demo and also put this code to download for my website subscribers.
I have created this demo stripe payment gateway script using bootstrap for payment process.
You need to create an account on https://dashboard.stripe.com/register to generate the Test Secret Key and test Publishable Key.
After register with stripe, you will get an email from the stripe to verify your email address. Click on the email link to verify your email and then login in stripe dashboard.
After login in stripe navigate to the dashboard => API and click on the API option to get your Test Secret Key and test Publishable Key.
Before creating the checkout form you need to include the below JS files.
1 2 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="https://js.stripe.com/v2/"></script> |
Below is the Stripe checkout form to enter the customer credit card details to capture the payment. You can modify the below form as per your requirement.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <form action="" class="form-horizontal" method="POST" id="payment-form"> <fieldset> <div class="form-group"> <label class="col-sm-3 control-label" for="accountNumber">Payment Amount</label> <div class="col-sm-6"> <input type="text" class="form-control" name="name" value="$1.00" disabled/> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="accountNumber">Card Number</label> <div class="col-sm-6"> <input type="text" class="form-control" size="20" data-stripe="number" value="4111111111111111" required/> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="expirationMonth">Expiration Date</label> <div class="col-sm-9"> <div class="row"> <div class="col-xs-3"> <select class="form-control col-sm-3" data-stripe="exp_month" required> <option>Month</option> <option value="01">Jan (01)</option> <option value="02">Feb (02)</option> <option value="03">Mar (03)</option> <option value="04">Apr (04)</option> <option value="05">May (05)</option> <option value="06">June (06)</option> <option value="07">July (07)</option> <option value="08">Aug (08)</option> <option value="09">Sep (09)</option> <option value="10">Oct (10)</option> <option value="11">Nov (11)</option> <option value="12" selected="">Dec (12)</option> </select> </div> <div class="col-xs-3"> <select class="form-control" data-stripe="exp_year"> <option value="17">2017</option> <option value="18">2018</option> <option value="19">2019</option> <option value="20" selected="">2020</option> <option value="21">2021</option> <option value="22">2022</option> <option value="23">2023</option> </select> </div> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label" for="cvNumber">Card CVV</label> <div class="col-sm-3"> <input type="text" class="form-control" data-stripe="cvc" value="123"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" name="pay" id="pay" class="btn btn-primary">Pay Now</button> </div> < ?php if(isset($response)){echo $response;} ?> <div class='col-sm-offset-3 col-sm-9 text-danger payment-errors'></div> </div> </fieldset> </form> |
Add below JS code before body tag closed in your file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <script type="text/javascript"> Stripe.setPublishableKey('< ?php echo $params['public_test_key']; ?>'); $(function() { var $form = $('#payment-form'); $form.submit(function(event) { // Disable the submit button to prevent repeated clicks: $form.find('.submit').prop('disabled', true); // Request a token from Stripe: Stripe.card.createToken($form, stripeResponseHandler); // Prevent the form from being submitted: return false; }); }); function stripeResponseHandler(status, response) { // Grab the form: var $form = $('#payment-form'); if (response.error) { // Problem! // Show the errors on the form: $form.find('.payment-errors').text(response.error.message); $form.find('.submit').prop('disabled', false); // Re-enable submission } else { // Token was created! // Get the token ID: var token = response.id; // Insert the token ID into the form so it gets submitted to the server: $form.append($('<input type="hidden" name="stripeToken"/>').val(token)); // Submit the form: $form.get(0).submit(); } }; </script> |
Use below credit card detail to test the stripe payment gateway code on the demo.
Card Number: 4111111111111111
Expiration Month: 12
Expiration Year: 2020
Card CVV: 123
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: Payment Gateway, php stripe payment gateway integration, stripe checkout demo, stripe payment gateway, stripe payment gateway integration, stripe payment gateway integration in php, stripe payment gateway php, stripe test credit card
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Hello Prem Tiwari
Your selection of topic is very good and also well written.. Thanks for sharing. I feel like all your ideas are incredible! Great job!!!