はじめに
- 下記のStripeを利用してオンライン決済をする。Stripeは会員登録が必要です。 stripe.com
LaravelにStripeパッケージをインストールする
- 下記のコマンドを実行してインストールする
composer require stripe/stripe-php
StripeのAPIキーの取得
- 下記のドキュメントを参考に取得する stripe.com
Laravelの設定
- 次に、プロジェクトから.envファイルを開き、以下のコードをコピーします。
STRIPE_KEY=pk_test_xxxxxx STRIPE_SECRET=sk_test_xxxxxx
その後、Stripe APIキーを設定し、config / services.php ファイルを開いて 、以下のコードを追加する必要があります。
'stripe' => [ 'secret' => env('STRIPE_SECRET'), ],
Laravel APIの設定
- ルーティングの設定
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\StripeController; Route::get('stripe', [StripeController::class, 'stripe']); Route::post('stripe', [StripeController::class, 'stripePost'])->name('stripe.post');
コントローラーを追加する
<?php namespace App\Http\Controllers; use Session; use Stripe; use Illuminate\Http\Request; class StripeController extends Controller { public function stripe() { return view('stripe'); } public function stripePost(Request $request) { Stripe\Stripe::setApiKey(env('STRIPE_SECRET')); Stripe\Charge::create ([ "amount" => 100, "currency" => "JPN", "source" => $request->stripeToken, "description" => "テスト", ]); Session::flash('success', '支払い完了'); return back(); } }
Viewの設定
- Viewを下記のように実装する
<!DOCTYPE html> <html> <head> <title>Stripe Payment Gateway Integration Example In Laravel 8- websolutionstuff.com</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h3 style="text-align: center;margin-top: 40px;margin-bottom: 40px;">Laravel 8 Stripe Payment Gateway Integration Example - websolutionstuff.com</h3> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-default credit-card-box"> <div class="panel-heading" > <div class="row"> <h3>Payment Details</h3> <div> <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><br> </div> @endif <br> <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 col-md-6 form-group required'> <label class='control-label'>Name on Card</label> <input class='form-control' size='4' type='text'> </div> <div class='col-xs-12 col-md-6 form-group 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="form-row row"> <div class="col-xs-12"> <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now</button> </div> </div> </form> </div> </div> </div> </div> </div> </body> </html> <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>