Cara Membuat WhatsApp API di Laravel untuk Notifikasi

WhatsApp kini banyak digunakan sebagai media notifikasi otomatis, mulai dari konfirmasi pesanan, OTP, hingga status pembayaran. Untuk mengotomatisasi proses tersebut, banyak developer memanfaatkan WhatsApp API di Laravel agar aplikasi dapat mengirim pesan secara langsung tanpa interaksi manual.

Melalui integrasi ini, Laravel dapat mengirim notifikasi berdasarkan event tertentu, sehingga komunikasi dengan pengguna menjadi lebih cepat dan efisien. Dalam artikel ini, kami akan membahas cara integrasi WhatsApp API di Laravel untuk notifikasi, mulai dari persiapan hingga contoh implementasinya.

Apa itu WhatsApp API?

WhatsApp API adalah layanan yang memungkinkan aplikasi terhubung dengan WhatsApp untuk mengirim dan menerima pesan secara otomatis. Teknologi ini banyak digunakan untuk notifikasi transaksi, OTP, chatbot, customer service, hingga integrasi dengan aplikasi berbasis Laravel.

Salah satu penyedia WhatsApp API gratis yang populer adalah Fonnte, dengan kuota hingga 1.000 pesan per bulan. Fonnte kami gunakan sebagai contoh karena proses integrasinya sederhana dan mudah diterapkan. Selain itu, tersedia juga Meta WhatsApp Cloud API sebagai layanan API resmi dari WhatsApp.

Perlu diketahui bahwa penggunaan WhatsApp API gratis memiliki risiko, terutama jika digunakan secara berlebihan atau untuk aktivitas spam yang dapat menyebabkan nomor diblokir. Karena itu, layanan gratis lebih cocok digunakan untuk tahap pengembangan (development), sedangkan untuk kebutuhan produksi disarankan menggunakan layanan API resmi atau berbayar yang lebih andal.

Persiapan sistem

Untuk membuat WhatsApp API di Laravel, Anda perlu mempersiapkan beberapa hal berikut;

Aplikasi Laravel
Database
Akun Fonnte
Halaman untuk menampilkan form
File function/method untuk megelola data

Setelah persiapan sistem selesai, selanjutnya Anda bisa mencoba panduan berikut untuk membuat WhatsApp API di Laravel.

Membuat aplikasi Laravel sederhana

Seperti yang sudah disampaikan, aplikasi laravel pada contoh kali ini hanya akan menampilkan halaman form saja dan mengirimkan notifikasi atau invoice ke Whatsapp.

Step 1. Membuat project laravel

Buat project laravel baru dengan perintah berikut:

composer create-project laravel/laravel belajar_laravel

Step 2. Membuat database

Buat database dengan nama belajar_laravel, lalu atur database di file .env laravel.

DB_DATABASE=belajar_laravel
DB_USERNAME=root
DB_PASSWORD=

Lalu, buat file migration atau table database baru dengan nama order_table.

php artisan make:migration create_order_table

Buka file order_table, lalu sesuaikan kodenya menjadi berikut:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('order', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
            $table->string('nama_barang');
            $table->integer('harga_barang');
            $table->integer('banyak_barang');
            $table->integer('total_harga');
            $table->string('nama');
            $table->string('nohp');
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('order');
    }
};

Jika sudah disesuaikan, silakan melakukan update database dengan perintah berikut:

php artisan migrate

Step 3. Membuat model

Buat file model dengan nama Order.

php artisan make:model Order

Buka file model Order, lalu sesuaikan kodenya menjadi berikut :

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Order extends Model
{   
    protected $table = "order";
    protected $fillable = [
        'invoice' => 'invoice',
        'created_at' => 'created_at',
        'nama_barang' => 'nama_barang',
        'banyak_barang' => 'banyak_barang',
        'harga_barang' => 'harga_barang',
        'total_harga' => 'total_harga',
        'nama' => 'nama',
        'nohp' => 'nohp',
    ];
}

Step 4. Membuat view blade

Buat file view dengan nama order.blade.php.

Buka file order.blade.php, lalu buat kode form seperti contoh berikut :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-md">
        <form action="/store" method="post">
            <h3 class="mt-5">Order Here!!!</h3>
            <div class="mb-3">
                <label for="exampleInput1" class="form-label">Product</label>
                <select class="form-select" aria-label="Default select example" name="nama_barang">
                    <option selected>Open this select menu</option>
                    <option value="tshirt">T-Shirt Rp.50000</option>
                    <option value="jacket">Jacket Rp.250000</option>
                    <option value="crewneck">Crewneck Rp.150000</option>
                    <option value="polo">Polo T-Shirt Rp</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="exampleInputtext1" class="form-label">Quantity</label>
                <input type="text" class="form-control" id="exampleInputtext1" name="banyak_barang">
            </div>
            <div class="mb-3">
                <label for="exampleInputtext1" class="form-label">Name</label>
                <input type="text" class="form-control" id="exampleInputtext1" name="nama" placeholder="John Doe">
            </div>
            <div class="mb-3">
                <label for="exampleInputtext1" class="form-label">Phone Number</label>
                <input type="text" class="form-control" id="exampleInputtext1" name="nohp" placeholder="082XXX111XXX">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

Step 5. Membuat controller

Buat file controller dengan nama OrderController.

php artisan make:controller OrderController

Buka file controller OrderController, lalu sesuaikan kodenya menjadi berikut :

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
use Carbon\Carbon;

class OrderController extends Controller
{
    public function store(Request $request){
        $harga_barang = 0;
        $invoice = rand(111111,999999);

        // deklarasi harga barang
        if ($request->nama_barang == "tshirt") {
            $harga_barang = 50000;
        }
        elseif ($request->nama_barang == "jacket") {
            $harga_barang = 250000;
        }
        elseif ($request->nama_barang == "crewneck") {
            $harga_barang = 150000;
        }
        else {
            $harga_barang = 125000;
        };

        // simpan ke database
        DB::table('order')->insert([
            'invoice' => "INV".$invoice,
            'created_at' => Carbon::now(),
            'nama_barang' => $request->nama_barang,
            'banyak_barang' => $request->banyak_barang,
            'harga_barang' => $harga_barang,
            'total_harga' => $harga_barang*$request->banyak_barang,
            'nama' => $request->nama,
            'nohp' => $request->nohp,
        ]);
    }
}

Buka file routes/web.php dan tambahkan routes untuk method post dari form. Pastikan nama controller sama seperti file controller yang dibuat sebelumnya dan pastikan nama function di contoller sama dengan di routes.

Route::post('/store', [App\Http\Controllers\OrderController::class, 'store']);

Step 6. Testing view dan form

Jalankan perintah “php artisan serve” untuk melihat hasil view yang sudah dibuat.

Lakukan testing pada form input, pastikan seluruh data inputan sudah sesuai. Bisa dicek dengan vardump(), dd(), atau laravel debug.

Implementasi Whatsapp API di Laravel

Berikut langkah-langkah membuat Whatsapp API di Laravel melalui Fonnte.

Step 1. Membuat akun Fonnte

Langkah pertama, silahkan akses halaman website Fonnte untuk melakukan registrasi. Setelah selesai, Anda bisa mengikuti langkah berikut:

Login ke halaman dashboard Fonnte, lalu pilih menu Device di submenu bagian kiri.
Pilih Button Add Device.

Masukan informasi nama device, nomor whatsapp aktif, lalu klik Add Device.

Jika sudah akan ada daftar Device yang sebelumnya di tambahkan, dengan status disconnect.

Klik tombol connect dan pilih metode QR agar lebih mudah.
Nantinya statusnya akan berubah menjadi connect.

Step 2. Implementasi API ke Laravel

Copy Token Fonnte ke file .env di laravel.

# API WHATSAPP FONNTE
FONNTE_TOKEN=nsYU1P2jVBJw2kpzbnpv

Tambahkan kode pengirman whatsapp di controller seperti contoh format berikut :

$token = env('FONNTE_TOKEN');  // mengambil value token dari env.

// isi notifikasi ke whatsapp
$message =
"--------*Order Invoice*-------\n"
. "-----------*PAID*-----------\n"
. "```\n"
. "Invoice        : " . $invoice . "\n"
. "Name           : " . $request->name . "\n"
. "Phone Number   : " . $request->nohp . "\n"
. "Order Date     : " . Carbon::now() . "\n"
. "Product        : " . $request->nama_barang . "\n"
. "Quantity       : " . $request->banyak_barang . " \n"
. "Grand Total    : Rp " . number_format($harga_barang * $request->banyak_barang, 0, ',', '.') . "\n"
. "```\n"
. "-----------------------------\n"
. "-=|*Hanupis*|=-";

Http::withoutVerifying()                  // menonaktifkan pengecekan SSL
->withHeaders([                           // menambahkan header HTTP
    'Authorization' => $token,            // token API Fonnte
])->post('https://api.fonnte.com/send', [ // mengirim request POST ke API Fonnte
    'target' => $request->nohp,           // nomor WhatsApp tujuan
    'message' => $message,                // isi pesan WhatsApp
]);

Isi variable “message” bisa di konfigurasi sesuai keinginan dan kebutuhan. Pastikan tidak terlalu panjang karena tujuan utamanya untuk notifikasi saja.

Terkait dokoumentasi lengkap Fonnte silakan bisa mengunjungi url berikut : https://docs.fonnte.com/

Step 3. Pengujian

Masukan data sesuai kolom input yang tersedia dan pastikan nomor handphone yang di inputkan adalah nomor whatsapp aktif, berikut contoh inputnya:

Pastikan konfigurasi dari sisi kode laravel tidak ada error dan sudah dilakukan debug. Begitu juga kode impelemntasi dari fonnte pastikan token valid agar tidak ada kendala pengiriman notifikasi whatsapp. Berikut screenshoot hasil percobaan pengiriman notifikasi whatsapp.

Penutup

Dengan fitur Whatsapp API, proses pengiriman notifikasi atau invoice melalui Whatsapp dapat dilakukan secara otomatis dan lebih praktis. Integrasi sederhana menggunakan PHP atau Laravel memungkinkan data order tersimpan ke database sekaligus langsung terkirim ke pelanggan dalam hitungan detik.

Meskipun layanan API gratis cukup membantu untuk proses belajar dan testing, penggunaan pada website atau aplikasi production tetap disarankan menggunakan layanan resmi atau berbayar agar lebih stabil, aman, dan meminimalisir resiko nomor Whatsapp terkena banned atau blokir.

Demikian artikel kami tentang cara membuat WhatsApp API di Laravel untuk notifikasi otomatis, mulai dari pengertian hingga contoh implementasinya. Semoga bermanfaat.