ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【Larave入門】Stripeを使って決済システムを導入する方法【初心者向け】

Laravel
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

Laravelで開発している、サービスもしくはアプリに決済システムを導入しようと思っている。

Stripe(ストライプ)が良さそうだが、オススメな理由と共に、Laravelアプリに導入する方法を教えて欲しい。

今回の記事では、Laravelでサービスやアプリケーション開発を行なっている方向けに、Stripeを使った簡単な決済システムの導入方法を初心者向けにご紹介します!

  • Stripeとは何か
  • Stripeはオススメって聞くけど何がいいのか
  • Stripeの登録方法
  • APIキーの取得
  • Laravelアプリに導入
  • 決済完了

この辺りを全て網羅的に解説していくので、この記事を読むとStripeについて知る事ができ、自分の開発しているLaravelアプリに決済システムを導入することも可能です!

決済システムの導入は難易度が高いイメージがありますが、Stripeは簡単ですし、この記事を読みながら手を動かしていけば実装可能です!

こんな方にオススメ
  • Stripeとは何か知りたい方
  • Stripeのメリットを知りたい方
  • LaravelアプリにStripe決済システムを導入したい方
  • APIキーの取得など分からない方
Hiko
Hiko

さて!実際にエディタとブラウザを立ち上げて一緒にStripe決済を実装していきましょう!

(※最低限Laravelのインストール、扱い方は分かっている人が対象です)

スポンサーリンク

Stripeとは?

Stripeとは簡単に言うと、電子決済サービスを提供している会社です。

他に世界で有名な電子決済サービスをあげると、PayPalSPIKEが有名ですね!

ざっとStripeの特徴をご紹介します。

Stripeのここがすごい!
  • 日本でもサービスを受ける事ができる
  • アメリカで電子決済の約40%がStripe
  • 天下のPayPalと並ぶ人気さ
  • 電子決済がスムーズ
  • 管理がとてもシンプルで簡単
  • 決済システム導入最短で1日
  • 毎年数十億ドルの成長しているStripe
  • 決済完了時に、顧客に自動レシートメールを送れる
  • JCBカードでの決済が可能
  • 日本語サポート可能
  • 振込手数料0円
  • 手数料一律3.6%
ネコ君
ネコ君

日本ではあまり知名度がないけど、アメリカではとってもメジャーな電子決済サービスなんだね!

いかがでしょうか?

グローバルな電子決済サービスを導入するとなると、英語が心配だったりしますが、Stripeはアメリカ発祥にも関わらず、三井住友カードが全面提携しているため、日本語でもサポートをしてくれます。

恐らくこれからの日本でもStripeでの電子決済がメジャーになるのではないでしょうか!

Hiko
Hiko

そんな今急成長中のStripe決済システムを導入できるとなると、とても需要の高いスキルです!ぜひ身に付けましょう!

StripeでLaravelアプリに決済システムを導入する方法

さて、では早速LaravelアプリケーションにStripe決済を導入する方法をご紹介します。

Stripe導入の前にやっておく事
  • Composer、Laravelのインストール
  • 適当な名前(Payment)などでLaravelアプリを作っておく
  • LaravelのMVCモデルが分かる
  • Laravelのコマンドが扱える

今回はLaravelのデフォルトのTOPページ(welcome.blade.php)に決済ボタンを設置し、シンプルな単発決済システムを導入してみようかと思います。

(※本番環境ではなくローカルでの決済システムの解説となります)

この単発決済の仕組みを学ぶ事で、、、

  • ショッピングカートに複数商品追加→Stripeで決済
  • 個数を選択する→Stripeで決済

このようにECサイトでよく見る決済システムの応用にも使えるので、まずはここからスタートです!

LaravelのStripe決済の流れ
  1. Laravelアプリを作成する
  2. Stripeアカウントを取得する
  3. AIPキーを取得
  4. Laravel Cashierをインストール
  5. .envファイルにStripeのAPIキーを貼り付ける
  6. 決済ボタンを設置する
  7. Controllerを作る
  8. Controllerにロジックを書く(コピペOK)
  9. RouteでPOST送信する
  10. Stripe決済する

1.Stripeのアカウントを取得する

まず始めにLaravelでStripe決済を導入するには、Stripeのアカウントを取得する必要があります。

Stripe: インターネットビジネスのためのオンライン決済処理

上記のURLにアクセスして新規登録を進めてください。

  • メールアドレス
  • 名前
  • パスワード

この3つがあればアカウントを作る事ができます。とっても簡単ですね!

アカウント作成が完了すると、このような画面になるかと思います。

この段階では、本番決済は導入できないので、「本番環境利用の申請」からStripe決済を本番環境で使えるように申請しておきましょう。

スポンサーリンク

2.APIキーを取得する

次にStripeのAPIキーを取得します。

APIキーとは簡単に言うと、LaravelのアプリとStripeのアカウントを紐ずける役割があります。

ホーム→テストAPIキーの取得と進むと、

  • 公開可能キー
  • シークレットキー

の二つがあると思うので、この2つを使用します。

Laravel Cashierをインストール

Laravelアプリを作ってまず始めに、LaravelでStripeを使えるようにするために専用のCashierと呼ばれるパッケージをインストールします。

composer require laravel/cashier

コマンドラインにこのコードをコピペしてインストールできます。

2~3分ほどでインストールが完了し、Stripeを使える環境になります。

Laravel こちらの公式ホームページからもCashierのインストール方法が英語ですが記載されています。

.envファイルにAPIキーを貼り付け

STRIPE_KEY=pk_test_s6GvUs5uvIsJBvtfWYVOso0d00J5REdzzEsample
STRIPE_SECRET=sk_test_dYXUakTd1jeFesFNdjdaduECXD0a7Pstsample

Laravelの.envファイルの一番下に、このように取得したAIPキーを貼り付けます。

Laravelに決済画面を作る

次にこの写真のようにLaravelでデフォルトのページ(welcome.blade.php)に「決済をする」というボタンを作ってみたいと思います。

やり方はとっても簡単で、下記のコードを好きな場所にコピペすればOKです。

<form action="{{ asset('pay') }}" method="POST">
    {{ csrf_field() }}
 <script
     src="https://checkout.stripe.com/checkout.js" class="stripe-button"
     data-key="{{ env('STRIPE_KEY') }}"
     data-amount="100"
     data-name="Stripe決済デモ"
     data-label="決済をする"
     data-description="これはデモ決済です"
     data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
     data-locale="auto"
     data-currency="JPY">
 </script>
</form>

恐らくこれをwelcome.blade.phpに貼り付けて「php artisan serve」コマンドで表示できるかと思います。

  • data-amount=”100″:ここに好きな金額を記入
  • data-name=”Stripe決済デモ”:決済の名称(〇〇の購入、商品名など)
  • data-label=”決済をする”:決済ボタンに表示するテキスト
  • data-description=”これはデモ決済です”:決済の説明
  • data-image=”https://…”:サイトのロゴなど
  • data-currency=”JPY”:決済通貨を書く

(※このコードはJavaScriptなので、決済システムではありません。ただの見た目です。)

決済をするボタンを押して、このようにモーダルが表示されればフロント部分(見た目の部分)は設置完了です!

Hiko
Hiko

次にStripe決済の核となるシステム部分を作っていきます!

Controllerを作成する

まず始めに、ユーザーからの決済リクエストを受け取り、Stripeアカウントに反映させるためにControllerを作ります。

php artisan make:controller PaymentController

このようにコマンドに書きControllerをファイルを作成します。

use Stripe\Stripe;
use Stripe\Charge;

<?php の下あたりのこの2行をコピペして、Stripeのclassを使えるようにします。

public function pay(Request $request){
     Stripe::setApiKey(env('STRIPE_SECRET'));//シークレットキー
 
       $charge = Charge::create(array(
            'amount' => 100,
            'currency' => 'jpy',
            'source'=> request()->stripeToken,
        ));
      return back();
     }

次に決済のシステムをpay fanctionで作っていきます。

基本的な決済は上記のコードをコピペすればOKです。

決済完了時にalert表示したり、決済完了メールを送りたい場合は各自調べて実装してください。

routeでPOST送信する

welcome.blade.phpでフロント部分を作り、PaymentControllerでシステムを作りました。

この2つを繋げる役割のroute(web.php)にPOST送信するパスを書いていきます。

Route::post('/pay', 'PaymentController@pay');

これをweb.phpにコピペすれば完成です。

(※必ずPOST送信にするようにしましょう)

Stripeテスト決済してみる

では、LaravelアプリケーションにStripeの決済システムを組み込んだところで、ちゃんと正常に動いているか、テスト決済してみましょう!

決済ボタンをクリックすると、このようにモーダルが表示されるので、

  • 適当なメールアドレス
  • カード番号:4242 4242 4242
  • 有効期限
  • 123

このように入力しましょう。

決済が完了して、Stripeの管理画面に戻ると、この画像のように反映されていると思うので、このようになっていれば成功です!

LaravlにStripe決済システム導入 まとめ

ネコ君
ネコ君

決済システムの導入って難しそうだけど、簡単にできたよ!

いかがでしたでしょうか!

このLaravelにStripeの決済システムを導入する基本構造が理解できていれば、ECサイトに組み込んだり、複数商品の決済に応用が効くので、この記事を参考にぜひ理解しておきましょう!

Laravelをもっと詳しく学びたい方は、PHP/Laravelコース で学習してみましょう!

最後までご覧頂きありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
Laravel
HikoPro Blog

コメント

タイトルとURLをコピーしました