Stripe Payment in Laravel 10
Tags: laravel, payment, stripe, php
Published: 2023-08-02 05:22:49

## Stripe Payment Integration

Stripe is a popular payment processing platform that allows businesses to accept online payments seamlessly. In this tutorial, we will guide you through the process of integrating Stripe payment into a Laravel web application. By the end of this guide, you will be able to accept payments from your users using Stripe's secure and efficient payment system.

## Prerequisites

Before we start, make sure you have the following prerequisites:

1. Basic understanding of Laravel and web development.
2. A Stripe account to obtain the necessary API keys. If you don't have one, you can sign up for free at [Stripe's official website](https://stripe.com).

## Part 1: Setting up the Laravel Project

First, let's set up a new Laravel project or use an existing one. If you're starting from scratch, you can create a new Laravel project using the following command:

```bash
composer create-project --prefer-dist laravel/laravel stripe-payment
cd stripe-payment
```

Next, we need to install the required packages for Stripe integration. Open the terminal and run the following command:

```bash
composer require stripe/stripe-php
```

Once the packages are installed, you'll need to set up your environment variables. In the root of your Laravel project, create a `.env` file and add the following lines:

```ini
STRIPE_KEY=your_stripe_publishable_key
STRIPE_SECRET=your_stripe_secret_key
```

Replace `your_stripe_publishable_key` and `your_stripe_secret_key` with your actual Stripe API keys.

## Part 2: Creating the Stripe.blade.php View

Now, let's create the view for our payment form. In your `resources/views` directory, create a new file named `stripe.blade.php` and add the following code:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Card Payment</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
      
<div class="container">
    <h1>Stripe Payment from your card</h1>
      
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default credit-card-box">
                <div class="panel-heading display-table" >
                    <h2 class="panel-title">Checkout Forms</h2>
                </div>
                <div class="panel-body">
                    @if (Session::has('success'))
                        <div class="alert alert-success text-center">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                            <p>{{ Session::get('success') }}</p>
                        </div>
                    @endif
  
                    <form id='checkout-form' method='post' action="{{ route('stripe.post') }}">   
                        @csrf             
                        <input type='hidden' name='stripeToken' id='stripe-token-id'>                              
                        <br>
                        <div id="card-element" class="form-control"></div>
                        <button 
                            id='pay-btn'
                            class="btn btn-success mt-3"
                            type="button"
                            style="margin-top: 20px; width: 100%;padding: 7px;"
                            onclick="createToken()">PAY $10
                        </button>
                    </form>
                </div>
            </div>        
        </div>
    </div>
</div>
</body>
     
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
    var stripe = Stripe('{{ env('STRIPE_KEY') }}')
    var elements = stripe.elements();
    var cardElement = elements.create('card');
    cardElement.mount('#card-element');
  
    /*------------------------------------------
    --------------------------------------------
    Create Token Code
    --------------------------------------------
    --------------------------------------------*/
    function createToken() {
        document.getElementById("pay-btn").disabled = true;
        stripe.createToken(cardElement).then(function(result) {
   
            if (typeof result.error != 'undefined') {
                document.getElementById("pay-btn").disabled = false;
                alert(result.error.message);
            }
  
            /* creating token success */
            if (typeof result.token != 'undefined') {
                document.getElementById("stripe-token-id").value = result.token.id;
                document.getElementById('checkout-form').submit();
            }
        });
    }
</script>
</html>
```

## Part 3: The web.php Routes

In the `routes/web.php` file, add the following routes to handle the payment:

```php
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StripePaymentController;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/stripe', [StripePaymentController::class, 'stripe']);
Route::post('/stripe', [StripePaymentController::class, 'stripePost'])->name('stripe.post');
```

## Part 4: The StripePaymentController.php Controller

Next, let's create the controller to handle the payment logic. In the `app/Http/Controllers` directory, create a new file named `StripePaymentController.php` and add the following code:

```php
<?php
      
namespace App\Http\Controllers;
       
use Illuminate\Http\Request;
use Stripe;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
       
class StripePaymentController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function stripe(): View
    {
        return view('stripe');
    }
      
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function stripePost(Request $request): RedirectResponse
    {
        Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
      
        Stripe\Charge::create([
            "amount" => 100 * 100,
            "currency" => "usd",
            "source" => $request->stripeToken,
            "description" => "Test payment from your card"
        ]);
                
        return back()
            ->with('success', 'Payment successful!');
    }
}
```

## Part 5: Making a Test Payment

Now comes the exciting part - testing the payment integration. To simulate a payment, you can use the following test card details provided by Stripe:

- Card Number: 4242 4242 4242 4242
- Expiry Date (MM/YY): 04/25
- CVC: 005
- ZIP: 55555

Please note that these are test card details meant for demonstration purposes only. In a real production environment, you would need to use valid card information.

Here's how you can test the payment:

1. Open the application in your web browser and navigate to the payment page.
2. Enter the test card details provided above into the payment form.
3. Click the "PAY $10" button to initiate the payment.
4. If the payment is successful, you should see a success message indicating that the payment was successful.
5. You can also check your Stripe Dashboard to see

 the details of the test payment.

Remember that as we are using the test card details, no real money will be charged, and the transaction will not affect your actual Stripe account balance.

## Conclusion

Congratulations! You have successfully integrated Stripe payment into your Laravel web application. You can now securely accept payments from your users using Stripe's robust and reliable payment system. This integration opens up numerous opportunities for monetizing your application and enhancing the user experience.

To explore more features of Stripe and take your payment system to the next level, be sure to check out the official Stripe documentation and resources.

We hope you found this step-by-step guide helpful. Happy coding!

---

With this comprehensive blog, readers will have a clear understanding of how to integrate Stripe payment into their Laravel applications. The step-by-step guide and the provided test card details allow them to test the payment integration safely before implementing it in a live environment. Happy blogging!(Ghanshyam).