Laravel 5.2 PHP – Build a Shopping Cart – #11 Stripe Credit Card Verification



Tutorial on how to build a Shopping Cart using the Laravel PHP Framework (5.2).

Source Code on Github: https://github.com/mschwarzmueller/laravel-shopping-cart-tutorial

Want more Laravel? Check out my Udemy course on it: https://www.udemy.com/modern-web-development-with-laravel/?couponCode=YOUTUBE1 (Coupon: YOUTUBE1)

You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com).

Related Posts

25 Comments

  1. Sir i am about to follow your tuto for my ecomerce website because you explain so well.thanks for that!!! ! I would like to know if it is going to work on stripe test mode,and wamp server localhost???i think i need to be connected ….????is it working with wamp localhost server?????? 😐

  2. Hello!I have problem i got message after click buy now "Must provide source or customer."What does mean?And in console error was on checkout.js.I should update new version of stripe or what?

  3. You have been pushing these source files to github from day 1. Please if you can tell me If I can push my project on github. Actually I am concerned about that stripe public key in my code. Is it save because anyone can access the code from there. Or public ID doesnot pose a big threat ?

  4. what does get(0) means @ 18:43 ? I have not much knowledge of jquery so i am using plain javascript as,

    var form = document.getElementById('checkout-form');

    And in else block where get(0) is used,

    else
    {
    var token = response.id;
    form.innerHTML += "<input type='hidden' name='stripeToken' value='"+ token +"'' />";
    form.submit();
    }

    Am I doing the right thing ? or there is something I have to provide instead of get(0) ?

  5. hii max. i am developing a shopping site with its frontend in angularJS and backend admin panel in laravel. please explain how can i integrate stripe. i am a bit confused. thanks

  6. Hi friends I was reading the stripe docs and noticed a few changes but not many the code that Mindspace uses probably still works fine but you can also use 'data-stripe="cvc" or what not instead of using id's for the inputs here is what i did for the form

    <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-4 col-sm-offset3">
    <h1>Checkout</h1>
    <h4>Your Total: ${{ $total }}</h4>
    <div id="charge-error" class="alert alert-danger {{ !Session::has('error') ? 'hidden' : '' }}"></div>
    {{ Session::get('error') }}
    <form action="{{ route('checkout') }}" method="post" id="checkout-form">
    <div class="row">
    <div class="col-xs-12">
    <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="form-control" required>
    </div>
    </div>
    <div class="col-xs-12">
    <div class="form-group">
    <label for="address">Address</label>
    <input type="text" id="address" class="form-control" required>
    </div>
    </div>
    <div class="col-xs-12">
    <div class="form-group">
    <label for="card-name">Card Holder Name</label>
    <input type="text" id="card-name" class="form-control" data-stripe="name" required>
    </div>
    </div>
    <div class="col-xs-12">
    <div class="form-group">
    <label for="card-number">Credit Card Number</label>
    <input type="text" id="card-number" class="form-control" data-stripe="number" required>
    </div>
    </div>
    <div class="col-xs-12">
    <div class="row">
    <div class="col-xs-6">
    <div class="form-group">
    <label for="card-expiry-month">Expiration Month</label>
    <input type="text" id="card-expiry-month" class="form-control" data-stripe="exp_month" required>
    </div>
    </div>
    <div class="col-xs-6">
    <div class="form-group">
    <label for="card-expiry-year">Expiration Year</label>
    <input type="text" id="card-expiry-year" class="form-control" data-stripe="exp_year" required>
    </div>
    </div>
    </div>
    </div>
    <div class="col-xs-12">
    <div class="form-group">
    <label for="card-cvc">CVC</label>
    <input type="text" id="card-cvc" class="form-control" data-stripe="cvc" required>
    </div>
    </div>
    </div>
    {{ csrf_field() }}
    <button type="submit" class="submit btn btn-success">Buy Now!</button>
    </form>
    </div>
    </div>

    then in the checkout.js I just used the current stripe tutorials for Stripe.js here https://stripe.com/docs/custom-form#step-1-collecting-credit-card-information

    in the checkout.js i used this……………………………………………

    $(function() {
    var $form = $('#checkout-form');
    $form.submit(function(event) {
    $('#charge-error').addClass('hidden');

    // 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) {
    if(response.error) {
    $('#charge-error').removeClass('hidden');
    $('#charge-error').text(response.error.message);
    $form.find('button').prop('disabled', false);
    } else {
    var token = response.id;
    $form.append($('<input type="hidden" name="stripeToken">').val(token));

    // submits the form
    $form.get(0).submit();
    }
    };
    });

    in the Stripe.card.createToken($form, stripeResponseHandler); the inputs will automatically be grabbed because we use data-stripe="cvc", data-stripe="name", data-stripe="exp_year", etc… in the HTML form ether way should work.

  7. Thanks a lot. I was always afraid about online payment implementation. Actually, it's quite straightforward and stripe here provides a test sandbox. Now, thanks to you, I'm not afraid anymore.

Leave a Reply

Your email address will not be published.

© 2022 Code As Pro - Theme by WPEnjoy · Powered by WordPress