Checkout - Stripe

• Accepting payments with Stripe
• Testing your checkout
• Modifying the error page

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

{info} 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):

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.