Checkout - Stripe


Laravel Shopr supports Stripe and Strong Customer Authentication out of the box. All you need to do is add some frontend scaffolding to your site and we'll handle the rest. In this guide we'll go through the steps required.

Accepting payments with Stripe

In previous versions we suggested using https://github.com/jofftiquez/vue-stripe-checkout for managing the Stripe Checkout with Vue. If you currently have that package installed, you may now remove it.

1. Include the Stripe.js library

Include <script src="https://js.stripe.com/v3/"></script> before your own bundled javascript. Make sure this is loaded on every page to make use of Stripe's advanced fraud functionality.

2. Add the card input element on your checkout page

Include <div id="card-element"></div> on your checkout page. This will be the component where the customer types their card number. Don't worry, you don't have to build anything to make this work.

3. Load the card input component

When the page loads, make sure you run the following code to initiate the card element:

const stripe = Stripe(yourApiKey);
const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

4. Submit the payment

Once the user clicks the submit button, you want to first create a payment method using Stripe's API. This will return a paymentMethod which you then send to our charge endpoint. Here's an example using Axios for sending the request:

const {paymentMethod, error} =
    await stripe.createPaymentMethod('card', this.cardElement, {
        billing_details: {
            // See https://stripe.com/docs/stripe-js/reference#stripe-create-payment-method 
            // for reference.
            name: 'Boaty McBoatface'
        }
    });
if (error) {
    // Something went wrong when creating the payment method.
} else {
    window.axios.post('shopr/checkout/charge', {
        gateway: 'Stripe',
        payment_method_id: paymentMethod.id,
        email: 'boaty@mcboatface.org',
        first_name: 'Boaty',
        last_name: 'McBoatface',
        address: 'Boatstreet 1',
        zipcode: '111 22',
        city: 'Boat City',
    }).then(response => {
        // A successful response will return a redirect, 
        // either to the payment confirmation, or to the order confirmation page.
        if(response.data.redirect){
            window.location.href = response.data.redirect;
        } else {
            // Handle unexpected response.   
        }
    }).catch(error => {
        // Something went wrong when completing the payment.
    });
}


Congratulations! Your shop now supports Strong Customer Authentication!

Testing your checkout

You may want to test some different scenarios for the checkout, to make sure everything works as expected. To do that, you can try using the following test cards (with any value in the expiration and CVC fields):

Card number Scenario
4000 0000 0000 3220 Require confirmation using 3D Secure 2 on all transactions.
4000 0027 6000 3184 Require confirmation on all transactions.
4000 0082 6000 3178 Require confirmation but fail due to insufficient funds.
4242 4242 4242 4242 Succeed without confirmation on all transactions.


For more test cards, check out the Stripe docs.

Modifying the confirmation error page

Sometimes a payment needs to be confirmed. This will typically mean the user is redirected to their bank and asked to enter a code sent to them via SMS or a Push Notification. All of this is handled by Shopr out of the box. However, if a confirmation fails the user will be redirected back to an error page. To modify this page, first publish the package views:

php artisan vendor:publish --provider="Happypixels\Shopr\ShoprServiceProvider" --tag="views"

You may then modify the resources/views/vendor/shopr/payments/error.blade.php file to your liking.