Mettre en place des paiements avec NotchPay sur Laravel - Partie 1

Dans ce tutoriel je vais vous montrer comment intégrer la solution de paiement NotchPay dans votre projet Laravel.

#Introduction

C'est quoi NotchPay? NotchPay est une solution qui offre un moyen de faire des paiements en ligne intuitifs et sécurisés. Et c'est cette même solution que nous utilisons pour la partie sponsoring du site

Quand vous travaillez sur un site e-commerce il est important de pouvoir rajouter différents moyens de paiement pour permettre aux utilisateurs de faire des achats en ligne. Pour ce faire Laravel permet de mettre en place multiple solutions de paiement via PayPal, Stripe et Paddle (pour les cartes bancaires).

Le problème, ces différentes solutions ne supportent pas la solution de paiement la plus populaire en Afrique Le Mobile Money. Dans ce tutoriel nous allons voir comment permettre à notre projet de supporter le service de paiement offert par les entreprises MTN et Orange (Cameroun pour le cadre de ce tutoriel)

#Création du projet Laravel

Alors pour commencer nous allons créer un tout nouveau projet Laravel et nous allons partir de zéro, mais si vus avez déjà votre projet alors vous pouvez directement passer à la partie 2.

Pour créer un nouveau projet Laravel nous allons éxécuter la commande suivante

1laravel new notchpay-integration
2# ou via composer avec la commande
3composer create-project laravel/laravel notchpay-integration --prefer-dist
1laravel new notchpay-integration
2# ou via composer avec la commande
3composer create-project laravel/laravel notchpay-integration --prefer-dist

Une fois que l'installation est terminée vous pouvez vous rendre dans le dossier avec la commande

1cd notchpay-integration
1cd notchpay-integration

#Configuration de la base de données

J'ai préparé une base de données que j'ai appelé notchpay que je connecte à mon projet via le fichier .env

1DB_CONNECTION=mysql
2DB_HOST=127.0.0.1
3DB_PORT=3306
4DB_DATABASE=notchpay
5DB_USERNAME=root
6DB_PASSWORD=root1234
1DB_CONNECTION=mysql
2DB_HOST=127.0.0.1
3DB_PORT=3306
4DB_DATABASE=notchpay
5DB_USERNAME=root
6DB_PASSWORD=root1234

Comme vous l'avez vu moi je suis sur une base de données MYSQL, vous remplacez par votre configuration.

Une fois que notre project est installé et notre base de données configurée, on peut se rendre sur l'url de notre projet http://notchpay-integration.test

J'utilise Laravel Valet plus pour avoir un custom sous-domaine en local. Si vous êtes sur Windons vous pouvez utiliser Laragon ou sur si vous êtes sur MacOs vous avez Laravel valet

#Installation de Laravel Breeze

Sachant qu'on va mettre en place un mini-système de paiement on voudra savoir quel est l'utilisateur de notre site qui a fait le paiement. Pour ce fait nous allons installer Laravel Breeze pour avoir tout le système d'authentification et de création de compte.

Pour installer Laravel Breeze vous devez éxécuter la commande suivante

1composer require laravel/breeze --dev
1composer require laravel/breeze --dev

Puis l'installer via la commande

1php artisan breeze:install
1php artisan breeze:install

Vous aurez ceci en prompt de votre terminal

Je vais choisir l'option 0 à savoir Blade. il va installer tout le système et les dépendances npm et vous n'aurez qu'à faire un php artisan migrate à la fin de tout.

#Migrations

Nous allons créer une migration pour notre table produits qui va contenir tous les produits qui seront mit en vente, et vous adaptez selon votre système.

Je vais créer notre modèle Product avec le contrôleur, la migration la factory et le seeder pour automatiquement préremplir notre base de données. Pour cela nous devons éxécuter la commande suivante

1php artisan make:model Product -mfsc
1php artisan make:model Product -mfsc

Le résultat de cette commande va vous générez un contrôleur, un modèle, une factory et une migration

Nous allons maintenant mettre à jour notre migration pour produits les produits et mettre en place la factorie pour préremplir notre base de données

#Migration Produit

Voici à quoi va ressemble notre table produits, nous restons sur quelque chose de relativement simple, mais si vous avez deja une table produits, ou si vous avez une autre entité vous êtes libre de l'utiliser directement

 1public function up(): void
 2{
 3      Schema::create('products', function (Blueprint $table) {
 4          $table->id();
 5          $table->string('name');
 6          $table->string('slug')->unique();
 7          $table->string('summary')->nullable();
 8          $table->integer('price')->nullable();
 9          $table->longText('description')->nullable();
10          $table->string('image')->nullable();
11          $table->timestamps();
12      });
13}
 1public function up(): void
 2{
 3      Schema::create('products', function (Blueprint $table) {
 4          $table->id();
 5          $table->string('name');
 6          $table->string('slug')->unique();
 7          $table->string('summary')->nullable();
 8          $table->integer('price')->nullable();
 9          $table->longText('description')->nullable();
10          $table->string('image')->nullable();
11          $table->timestamps();
12      });
13}

#Factory Produit

Le contenu de notre fonction definition ressemblera à ceci

 1public function definition(): array
 2{
 3      return [
 4          'name' => $name = $this->faker->name,
 5          'slug' => Str::slug($name),
 6          'summary' => $this->faker->word(),
 7          'description' => $this->faker->sentence(10),
 8          'price' => rand(500, 10000),
 9          'image' => $this->faker->imageUrl(),
10      ];
11}
 1public function definition(): array
 2{
 3      return [
 4          'name' => $name = $this->faker->name,
 5          'slug' => Str::slug($name),
 6          'summary' => $this->faker->word(),
 7          'description' => $this->faker->sentence(10),
 8          'price' => rand(500, 10000),
 9          'image' => $this->faker->imageUrl(),
10      ];
11}

#Seeder

Nous allons modifier la classe DatabaseSeeder pour qu'elle ressemble à ceci

1class DatabaseSeeder extends Seeder
2{
3    public function run(): void
4    {
5        Product::factory()->count(4)->create();
6    }
7}
1class DatabaseSeeder extends Seeder
2{
3    public function run(): void
4    {
5        Product::factory()->count(4)->create();
6    }
7}

Une fois tout ceci fait nous pouvons éxécuter la commande php artisan migrate --seed

#Listing produits

Une fois tout fait nous allons créer un compte et nous connecter directement et nous serons redirigé vers le dashboard et c'est la que nous allons afficher nos produits. Alors nous allons commencer par remplacer la vue par défaut du dashboard

Remplacons la route dashboard pour qu'elle pointe vers notre contrôleur produit dans notre fichier routes/web.php

 1 
 2use App\Http\Controllers\ProductController;  
 3 
 4Route::get('/', function () {
 5    return view('welcome');
 6});
 7 
 8Route::middleware(['auth', 'verified'])->group(function () {
 9    Route::get('/dashboard', [ProductController::class, 'index'])
10        ->name('dashboard');
11});
12 
13 
14Route::middleware('auth')->group(function () {
15    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
16    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
17    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
18});
19 
20require __DIR__.'/auth.php';
 1 
 2use App\Http\Controllers\ProductController;  
 3 
 4Route::get('/', function () {
 5    return view('welcome');
 6});
 7 
 8Route::middleware(['auth', 'verified'])->group(function () {
 9    Route::get('/dashboard', [ProductController::class, 'index'])
10        ->name('dashboard');
11});
12 
13 
14Route::middleware('auth')->group(function () {
15    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
16    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
17    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
18});
19 
20require __DIR__.'/auth.php';

Et notre contrôleur ProductController va ressembler à ceci

 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use App\Models\Product;
 6use Illuminate\Contracts\View\View;
 7 
 8class ProductController extends Controller
 9{
10    public function index(): View
11    {
12        return view('dashboard', [
13            'products' => Product::all(),
14        ]);
15    }
16}
 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use App\Models\Product;
 6use Illuminate\Contracts\View\View;
 7 
 8class ProductController extends Controller
 9{
10    public function index(): View
11    {
12        return view('dashboard', [
13            'products' => Product::all(),
14        ]);
15    }
16}

Le résultat final de notre dashboard va donner cette interface

J'ai pris le soin de modifier le nom et les images de produits pour avoir quelque chose de plus appréciable.

Alors maintenant nous avons une bonne base pour pouvoir rajouter NotchPay dans notre projet. Dans la 2e partie de ce tutoriel nous allons passer à l'installation et la mise en place de NotchPay

Le repo du projet est disponible sur le github de Laravel Cameroun https://github.com/laravelcm/notchpay-integration