Contoh tutorial integrasi gateway pembayaran Laravel stripe. tutorial ini akan menunjukkan cara mengintegrasikan stripe payment gateway di aplikasi laravel.
Stripe didirikan pada tahun 2011 dan merupakan gateway pembayaran yang memungkinkan Anda menerima pembayaran kartu kredit (secara langsung atau online) dengan mentransfer uang antara akun pedagang Anda dan pemroses pembayaran.
Ini dilakukan dengan menggunakan terminal kartu kredit fisik atau prosesor online
Stripe adalah gateway pembayaran paling populer yang terintegrasi ke banyak situs web, pembayaran Stripe mudah diintegrasikan dan digunakan.
Stripe adalah alat yang sangat sederhana dan paling kuat serta fleksibel. Jadi dalam tutorial ini, Anda akan belajar langkah demi langkah cara mengintegrasikan gateway pembayaran stripe di aplikasi laravel .
Langkah 1: Instal Aplikasi Laravel
Pada langkah ini, jalankan perintah berikut di terminal untuk menginstal aplikasi Laravel 8. Jadi, Buka command prompt dan jalankan perintah berikut:
composer create-project --prefer-dist laravel/laravel blog
Langkah 2: Instal paket Stripe
Pada langkah ini, instal paket stripe di aplikasi laravel 8 dengan menjalankan perintah berikut di terminal:
composer require stripe/stripe-php
Setelah itu, Anda perlu mengatur key. Jadi, kunjungi situs web Stripe dan buat akun stripe pengembangan. Dan dapatkan key dari stripe.com.
Langkah 3: Konfigurasi Stripe
Sekarang buka file .env dan atur kredensial rahasia yang disediakan oleh gateway pembayaran stripe
STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxxx
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxx
Langkah selanjutnya, Anda perlu menyiapkan kunci API Stripe, untuk melakukannya, buka atau buat file config/services.php, dan tambahkan atau perbarui array 'stripe':
'stripe' => [
'secret' => env('STRIPE_SECRET'),
],
Langkah 4: Buat Route
Pada langkah ini, buka file web.php yang ditempatkan di dalam direktori routes. Dan tambahkan rute berikut ke dalamnya:
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\StripeController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('stripe', [StripeController::class, 'stripe']); Route::post('stripe', [StripeController::class, 'stripePost'])->name('stripe.post');
Langkah 5: Buat Pengontrol
Pada langkah ini, jalankan perintah berikut di terminal untuk membuat nama pengontrol StripeController :
php artisan make:controller StripeController
Kemudian kunjungi direktori app/Http/Controllers/ dan buka StripeController. Kemudian tambahkan kode berikut ke dalam StripeController.php :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Session;
use Stripe;
class StripeController extends Controller
{
/**
* success response method.
*
* @return \Illuminate\Http\Response
*/
public function stripe()
{
return view('stripe');
}
/**
* success response method.
*
* @return \Illuminate\Http\Response
*/
public function stripePost(Request $request)
{
Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
Stripe\Charge::create ([
"amount" => 100 * 100,
"currency" => "usd",
"source" => $request->stripeToken,
"description" => "Test payment from tutsmake.com."
]);
Session::flash('success', 'Payment successful!');
return back();
}
}
Langkah 6: Buat file Blade View
Pada langkah ini, Kunjungi app/resources/views/ dan buat satu file tampilan blade dengan nama stripe.blade.php. Kemudian tambahkan kode berikut ke dalam file Stripe.blade.php :
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 - Stripe Payment Gateway Integration Tutorial Example - Tutsmake.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
.panel-title {
display: inline;
font-weight: bold;
}
.display-table {
display: table;
}
.display-tr {
display: table-row;
}
.display-td {
display: table-cell;
vertical-align: middle;
width: 61%;
}
</style>
</head>
<body>
<div class="container">
<h1>Laravel 8 - Stripe Payment Gateway Integration Example <br/> Tutsmake.com</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" >
<div class="row display-tr" >
<h3 class="panel-title display-td" >Payment Details</h3>
<div class="display-td" >
<img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
</div>
</div>
</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
role="form"
action="{{ route('stripe.post') }}"
method="post"
class="require-validation"
data-cc-on-file="false"
data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
id="payment-form">
@csrf
<div class='form-row row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label> <input
class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label> <input
autocomplete='off' class='form-control card-number' size='20'
type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 col-md-4 form-group cvc required'>
<label class='control-label'>CVC</label> <input autocomplete='off'
class='form-control card-cvc' placeholder='ex. 311' size='4'
type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Month</label> <input
class='form-control card-expiry-month' placeholder='MM' size='2'
type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Year</label> <input
class='form-control card-expiry-year' placeholder='YYYY' size='4'
type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>Please correct the errors and try
again.</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now ($100)</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
$(function() {
var $form = $(".require-validation");
$('form.require-validation').bind('submit', function(e) {
var $form = $(".require-validation"),
inputSelector = ['input[type=email]', 'input[type=password]',
'input[type=text]', 'input[type=file]',
'textarea'].join(', '),
$inputs = $form.find('.required').find(inputSelector),
$errorMessage = $form.find('div.error'),
valid = true;
$errorMessage.addClass('hide');
$('.has-error').removeClass('has-error');
$inputs.each(function(i, el) {
var $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorMessage.removeClass('hide');
e.preventDefault();
}
});
if (!$form.data('cc-on-file')) {
e.preventDefault();
Stripe.setPublishableKey($form.data('stripe-publishable-key'));
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
}
});
function stripeResponseHandler(status, response) {
if (response.error) {
$('.error')
.removeClass('hide')
.find('.alert')
.text(response.error.message);
} else {
/* token contains id, last4, and card type */
var token = response['id'];
$form.find('input[type=text]').empty();
$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
$form.get(0).submit();
}
}
});
</script>
</html>
Langkah 7: Jalankan Server Pengembangan
Pada langkah ini, jalankan perintah PHP artisan serve di terminal untuk memulai server pengembangan:
php artisan serve
Sekarang, buka browser dan tekan URL berikut di atasnya:
http://localhost:8000/stripe
Testing Card Credential
Card No : 4242424242424242
Month : any future month
Year : any future Year
CVV : 123
Kesimpulan
Integrasi gateway pembayaran stripe di laravel tutorial, Anda telah mempelajari cara mengintegrasikan gateway pembayaran stripe di aplikasi laravel.
