Cara menambahkan formulir pembayaran satu kali strip ke Proyek Laravel-Panel Admin Cepat

Pembayaran adalah salah satu elemen paling khas dari proyek web apa pun, dan Stripe adalah penyedia pembayaran yang sangat mudah dipasang di proyek Laravel. Dalam artikel ini, kami akan menambahkan formulir pembayaran ke halaman.

Sebagai contoh, kami akan mengambil halaman pertunjukan produk dari modul manajemen produk QuickAdminPanel kami, tetapi Anda dapat mengikuti instruksi yang sama dan menambahkan formulir strip ke halaman proyek Laravel apa pun.

Rencananya akan terdiri dari 8 langkah:

1. Pasang Laravel Cashier
2. Jalankan migrasi kasir
3. Kredensial strip di .env
4. Model pengguna harus dapat ditagih
5. Pengontrol: Formulir Maksud Pembayaran
6. Halaman Blade: Bentuk, Gaya, dan Skrip
7. Pengontrol: Posting Pemrosesan Pembayaran
8. Setelah Pembelian Berhasil: Kirim Produk

Mari kita mulai!

---

1. Pasang Laravel Cashier

Jalankan perintah ini:

composer require laravel/cashier

Melihat: Saat ini, versi kasir terbaru adalah V12. Jika Anda membaca artikel ini ketika versi yang lebih baru telah tiba, silakan baca panduan peningkatannya. Tetapi secara pribadi, saya ragu bahwa setiap fundamental akan berubah.

---

2. Jalankan migrasi kasir

Paket kasir mendaftarkan direktori migrasi basis data sendiri, jadi ingatlah untuk memigrasi basis data Anda setelah menginstal paket:

php artisan migrate

Migrasi itu tidak masuk Database/Migrasi folder, mereka ada di dalam /penjual. Inilah isinya.

1. Empat kolom baru pengguna meja:

Schema::table('users', function (Blueprint $table) {
    $table->string('stripe_id')->nullable()->index();
    $table->string('card_brand')->nullable();
    $table->string('card_last_four', 4)->nullable();
    $table->timestamp('trial_ends_at')->nullable();
});

2. Tabel baru Langganan:

Schema::create('subscriptions', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->unsignedBigInteger('user_id');
    $table->string('name');
    $table->string('stripe_id');
    $table->string('stripe_status');
    $table->string('stripe_plan')->nullable();
    $table->integer('quantity')->nullable();
    $table->timestamp('trial_ends_at')->nullable();
    $table->timestamp('ends_at')->nullable();
    $table->timestamps();

    $table->index(['user_id', 'stripe_status']);
});

3. Tabel baru berlangganan_items:

Schema::create('subscription_items', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->unsignedBigInteger('subscription_id');
    $table->string('stripe_id')->index();
    $table->string('stripe_plan');
    $table->integer('quantity');
    $table->timestamps();

    $table->unique(['subscription_id', 'stripe_plan']);
});

---

3. Kredensial Strip di .env

Ada dua kredensial strip yang perlu Anda tambahkan .env mengajukan:

STRIPE_KEY=pk_test_xxxxxxxxx
STRIPE_SECRET=sk_test_xxxxxxxxx

Di mana mendapatkan “kunci” dan “rahasia” itu? Di dasbor stripe Anda:

Perlu diingat, ada dua “mode” kunci stripe: pengujian Dan hidup kunci. Saat berada di server lokal atau pengujian, harap ingat untuk menggunakan tombol pengujian, Anda dapat melihatnya dengan mengacak “Lihat data pengujian” di menu kiri:

Cara lain untuk mengetahui apakah Anda menggunakan tombol pengujian/hidup: tombol pengujian dimulai dengan SK_TEST_ Dan pk_test_dan kunci hidup dimulai dengan sk_live_ Dan pk_live_. Juga, kunci langsung tidak akan berfungsi tanpa sertifikat SSL diaktifkan.

Melihat: Jika Anda bekerja di tim, saat Anda menambahkan variabel baru, itu adalah praktik yang sangat baik untuk juga menambahkannya dengan nilai kosong .env.example. Maka rekan satu tim Anda akan tahu variabel apa yang dibutuhkan di server mereka. Baca lebih lanjut di sini.

---

4. Model pengguna harus dapat ditagih

Langkah Sederhana: Dalam model pengguna Anda, tambahkan Dapat ditagih sifat dari kasir:

APP/MODEL/USER.PHP:

// ...
use Laravel\Cashier\Billable;

class User extends Authenticatable
{
    use HasFactory, Billable;

---

5. Controller: Formulir Maksud Pembayaran

Untuk mengaktifkan formulir pembayaran stripe, kita perlu membuat sesuatu yang disebut “niat pembayaran” dan meneruskannya ke pisau.

Dalam hal ini, kami akan menambahkannya ke ProductController metode menunjukkan():

class ProductController extends Controller
{
    // ...

    public function show(Product $product)
    {
        $intent = auth()->user()->createSetupIntent();

        return view('frontend.coupons.show', compact('product', 'intent'));
    }

Metode createSetupIntent () berasal dari Dapat ditagih sifat yang kami tambahkan tepat di atas Pengguna model.

---

6. Halaman Blade: Bentuk, Gaya, dan Skrip

Ini adalah formulir yang akan kami tambahkan dari Stripe, dengan nama pemegang kartu, nomor kartu, bulan/tahun kedaluwarsa, kode CVV, dan kode pos.

Untungnya, dokumentasi Stripe memberi tahu kami persis apa kode HTML/JavaScript/CSS yang harus ditambahkan.

Jadi, di kami show.blade.phpkami menambahkan ini:

<form method="POST" action="{{ route('products.purchase', $product->id) }}" class="card-form mt-3 mb-3">
    @csrf
    <input type="hidden" name="payment_method" class="payment-method">
    <input class="StripeElement mb-3" name="card_holder_name" placeholder="Card holder name" required>
    <div class="col-lg-4 col-md-6">
        <div id="card-element"></div>
    </div>
    <div id="card-errors" role="alert"></div>
    <div class="form-group mt-3">
        <button type="submit" class="btn btn-primary pay">
            Purchase
        </button>
    </div>
</form>

Semua variabel input persis seperti yang disarankan Stripe, satu -satunya elemen yang perlu Anda ubah adalah rutedi mana formulir akan diposting, jadi ini:

route('products.purchase', $product->id)

Kami akan membuat rute dan metode pengontrol itu pada langkah berikutnya.

Sementara itu, kita juga perlu menyertakan stripe Gaya Dan Javascript.
Mari kita bayangkan itu di file blade utama Anda, Anda punya @menghasilkan Bagian untuk gaya dan skrip, seperti ini:

<!DOCTYPE html>
<html>

<head>
    ...

    @yield('styles')
</head>

<body>
    ...

    
    @yield('scripts')
</body>
</html>

Lalu, di kami show.blade.phpkita dapat mengisi bagian -bagian itu, dengan kode dari Stripe:

@section('styles')
<style>
    .StripeElement {
        box-sizing: border-box;
        height: 40px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 4px;
        background-color: white;
        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
    }
    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }
    .StripeElement--invalid {
        border-color: #fa755a;
    }
    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }
</style>
@endsection

@section('scripts')
<script src="
<script>
    let stripe = Stripe("{{ env('STRIPE_KEY') }}")
    let elements = stripe.elements()
    let style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
    let card = elements.create('card', {style: style})
    card.mount('#card-element')
    let paymentMethod = null
    $('.card-form').on('submit', function (e) {
        $('button.pay').attr('disabled', true)
        if (paymentMethod) {
            return true
        }
        stripe.confirmCardSetup(
            "{{ $intent->client_secret }}",
            {
                payment_method: {
                    card: card,
                    billing_details: {name: $('.card_holder_name').val()}
                }
            }
        ).then(function (result) {
            if (result.error) {
                $('#card-errors').text(result.error.message)
                $('button.pay').removeAttr('disabled')
            } else {
                paymentMethod = result.setupIntent.payment_method
                $('.payment-method').val(paymentMethod)
                $('.card-form').submit()
            }
        })
        return false
    })
</script>

Di dalam bagian-bagian itu, kami menambahkan dua variabel dari back-end:

env('STRIPE_KEY')

Dan

$intent->client_secret

Jadi pastikan Anda menambahkannya di langkah -langkah sebelumnya.

---

7. Pengontrol: Posting Pemrosesan Pembayaran

Ingat rute yang kami sebut pada langkah sebelumnya? Waktu untuk membuatnya.

Di dalam rute/web.phptambahkan ini:

Route::post('products/{id}/purchase', 'ProductController@purchase')->name('products.purchase');

Dan kemudian, mari kita buat metode ProductController:

public function purchase(Request $request, Product $product)
{
    $user          = $request->user();
    $paymentMethod = $request->input('payment_method');

    try {
        $user->createOrGetStripeCustomer();
        $user->updateDefaultPaymentMethod($paymentMethod);
        $user->charge($product->price * 100, $paymentMethod);        
    } catch (\Exception $exception) {
        return back()->with('error', $exception->getMessage());
    }

    return back()->with('message', 'Product purchased successfully!');
}

Jadi apa yang terjadi di sini?

1. Kami mendapatkan pembayaran_method Dari formulir (Stripe menanganinya di latar belakang untuk kami)
2. Lalu kami memanggil metode kasir untuk mendapatkan/membuat pelanggan, mengatur metode pembayaran mereka, dan menagihnya.
3. Akhirnya, kami mengarahkan kembali dengan hasil keberhasilan
3b. Jika terjadi kesalahan, coba/tangkap blok menangani dan mengarahkan kembali dengan kesalahan.

Melihat: variabel $ Produk-> Harga adalah harga untuk produk Anda, dan kami perlu mengalikannya dengan 100 karena muatan stripe sedang terjadi dalam sen.

Untuk menunjukkan pesan atau kesalahan yang sukses, di file blade Anda, Anda perlu menambahkan sesuatu seperti ini:

@if(session('message'))
    <div class="alert alert-success" role="alert">{{ session('message') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger" role="alert">{{ session('error') }}</div>
@endif

---

8. Setelah Pembelian Berhasil: Kirim Produk

Setelah pelanggan membayar produk, Anda perlu mengirimkan pesanan. Tentu saja, itu tergantung pada apa yang mereka beli dan kode itu sangat individual, tetapi saya akan menunjukkan kepada Anda dimana harus meletakkannya.

Bahkan, ada dua cara. Lebih mudah tetapi kurang aman, atau lebih keras dan lebih aman.

Opsi 1. Memenuhi pesanan di ProductController

Anda dapat melakukannya secara langsung dalam metode yang sama:

public function purchase(Request $request, Product $product)
{
    $user          = $request->user();
    $paymentMethod = $request->input('payment_method');

    try {
        $user->createOrGetStripeCustomer();
        $user->updateDefaultPaymentMethod($paymentMethod);
        $user->charge($product->price * 100, $paymentMethod);        
    } catch (\Exception $exception) {
        return back()->with('error', $exception->getMessage());
    }

    // Here, complete the order, like, send a notification email
    $user->notify(new OrderProcessed($product)); 

    return back()->with('message', 'Product purchased successfully!');
}

Mudah, kan? Masalah dengan metode itu adalah hal itu terjadi selaras, yang berarti itu $ user-> charge () Mungkin tidak berhasil selesai, pada saat Anda memenuhi pesanan. Secara teoridapat menyebabkan pengiriman pesanan palsu dengan biaya yang tidak berhasil.

Opsi 2. Webhooks Stripe

Atau, metode yang lebih andal, adalah menangkap apa yang disebut webhook stripe. Mereka memastikan bahwa tuduhan itu berhasil terjadi, dengan cara yang benar. Setiap kali sesuatu terjadi di Stripe, mereka mengirim permintaan pos ke URL server Anda yang Anda berikan di dasbor stripe.

Anda dapat menangkap banyak acara dari Stripe, dan salah satu acara itu adalah biaya.

Untuk itu, saya akan merekomendasikan menggunakan paket yang disebut Laravel Stripe Webhooks, saya telah merekam video terpisah tentang hal itu:

https://www.youtube.com/watch?v=waojlxmbz3u

Jadi, jika Anda ingin menangkap lebih banyak acara, dan tidak hanya menagih kesuksesan, saya menyarankan Anda untuk menggunakan Webhooks Stripe. Ingatlah bahwa mereka tidak akan (dengan mudah) bekerja di komputer lokal Anda, Anda perlu mengatur domain nyata yang akan dihubungi Stripe.

---

Itu saja! Semoga Anda menerima banyak pembayaran yang berhasil dalam proyek Anda.