ahmadajah03 Tue Apr 2020 1 year ago

Tutorial Laravel 7/6 Integrasi Stripe Payment

Hari ini topik utama kami adalah integrasi gateway Stripe Payment di laravel 7/6. saya akan memberikan Anda langkah demi langkah instruksi laravel 7/6 contoh integrasi stripe. Anda dapat dengan mudah mengintegrasikan pembayaran stripe di aplikasi laravel 7/6.

Anda perlu membuat akun pengembang stripe dan perlu mendapatkan kunci api dan rahasia dari sana. Kemudian kita akan menggunakan perpustakaan komposer stripe/stripe-php untuk gateway pembayaran stripe di laravel 6. Saya menulis integrasi langkah demi langkah untuk gateway pembayaran stripe.

Stripe adalah perusahaan gateway pembayaran internet yang sangat populer dan aman yang membantu menerima pembayaran di seluruh dunia. Stripe menyediakan antarmuka pengembangan yang sangat bagus untuk memulai dan Anda tidak perlu membayar biaya berlangganan untuk mempelajarinya menyediakan akun pengembang gratis, sebelum mulai kode di aplikasi Anda.

Saya akan memberi Anda contoh dari awal untuk mengimplementasikan gateway pembayaran stripe di aplikasi laravel 6. Anda hanya perlu mengikuti beberapa langkah untuk mendapatkan contoh lengkap untuk membayar.

Langkah 1: Instal Laravel 6

Saya akan menjelaskan langkah demi langkah dari awal jadi, kita perlu mendapatkan aplikasi Laravel 6 baru menggunakan perintah di bawah ini, Jadi buka terminal ATAU command prompt Anda dan jalankan perintah di bawah ini:

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Instal Paket stripe-php

Pada langkah ini kita perlu menginstal stripe-php melalui manajer paket Composer, jadi berikan perintah terminal dan jalankan di bawah:

composer require stripe/stripe-php

Langkah 3: Tetapkan Stripe API Key dan SECRET

Sekarang, kita perlu mengatur stripe key dan secret. jadi pertama-tama Anda dapat mengunjungi situs web Stripe dan membuat kunci dan rahasia akun stripe pengembangan dan menambahkan di bawah:

.env

STRIPE_KEY=pk_test_reFxwbsm9cdCKASdTfxAR

STRIPE_SECRET=sk_test_oQMFWteJiPd4wj4AtgApY

 

Langkah 4: Buat Route

Pada langkah ini, kita akan membuat dua route untuk mendapatkan permintaan dan yang lainnya untuk permintaan posting. Jadi, mari kita tambahkan route baru pada file itu.

routes/api.php

<?php
    
Route::get('stripe', 'StripePaymentController@stripe');
Route::post('stripe', 'StripePaymentController@stripePost')->name('stripe.post');

Langkah 5: Buat File Controller

pada langkah berikutnya, sekarang kita telah membuat controller baru sebagai StripePaymentController dan menulis kedua metode di atasnya seperti di bawah ini, Jadi mari kita buat kedua controller:

app/Http/Controllers/StripePaymentController.php

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use Session;
use Stripe;
   
class StripePaymentController 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 medikre.com."
        ]);
  
        Session::flash('success', 'Payment successful!');
          
        return back();
    }
}

Langkah 6: Buat File Blade

Pada langkah Terakhir, mari kita buat stripe.blade.php (resources/views/stripe.blade.php) untuk tata letak dan tulis kode jquery untuk mendapatkan token dari stripe di sini dan masukkan kode berikut:

resources/views/stripe.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 6 - Stripe Payment Gateway Integration Example - Medikre.com</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>
    <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 6 - Stripe Payment Gateway Integration Example <br/> Medikre.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>

Sekarang Anda dapat memeriksa dengan detail kartu berikut:

Name: Test
Number: 4242 4242 4242 4242
CSV: 123
Expiration Month: 12
Expiration Year: 2024

Saya harap ini dapat membantu Anda ...

payment gateway stripe laravel 7 laravel 6 laravel