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.
{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.
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.
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.
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');
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!
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.
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.