プログラミング

【5分で実装】Laravel6+stripeで単発決済を実装してみる

こんにちは、シロウ(@shiro_life0)です。

最近、Laravelで何作ろうか迷う日々が続いていたので、今までやってこなかったクレジット決済に挑戦してみました。

https://twitter.com/shiro_life0/status/1298778736733515776?s=20

思ったよりも簡単で10分ほどでサクッとできたので、この記事を読む人は5分ぐらいでできると思います。笑

ということで、一緒にLaravel6とStripeを使って単発決済を実装していきましょう!

そもそもStripeとは?

Stripeとは『ロサンゼルスにあるStripe社が提供している電子決済サービス』です。
要するにPayPalみたいなイメージでいいと思います。

Stripeの特徴としては「手数料が一律3.6%と低いこと」・「決済画面への遷移がないこと」・「手軽ですぐに実装ができること」などの特徴があります。

特に決済画面への遷移がないことでユーザーにストレスを与えることなく、スムーズに購入までしてもらえるので売上も従来の決済サービスより上がるはずです。

Laravel6+Stripeで単発決済を導入する手順

さて、それでは早速ですがLaravel6とStripeで単発決済を導入していきましょう。

ここから先は既にLaravelをインストールしている前提でお話をしていきます。

手順としては以下の通りです。

①:Stripeに登録する
②:APIキーを取得する
③:Laravel Cashierをインストール
④:StripeのAPIキーを.envファイル(隠しファイル)に記述
⑤:決済ボタンを設置する
⑥:Controllerを作る
⑦:ルーディングを記述する

①:Laravel Cashierをインストール

Laravelのプロジェクトを作成したら、まずは「Laravel Cashier」というパッケージをインストールします。

Laravel CashierはLarvelでStripeを利用するためのパッケージです。

これがないとStripeが利用できないので、何も考えず下記コードをターミナルで実行してください。笑

composer require laravel/cashier

たぶん、1分ちょっとぐらいでインストールが完了すると思います。

こちら(Laravel)の公式サイトにもインストール方法が記載されているので、興味のある人はどうぞ(*・ω・)ノ

②:Stripeに登録する

次に「こちら」よりStripeへアカウント登録を行ってください。

「今すぐ始める」をクリックして、メールアドレスとかの情報を入力。

登録したメールアドレスにメールが届くので、記載されているURLをクリックすればアカウント登録完了です。

本番環境で利用するためには、下記画像の「本番環境利用の申請」から申請しないといけません。
今回はローカルで試すだけなので、申請の必要はありません。

③:APIキーを取得する

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

「Stripeのホーム画面」に「テストAPIキーの取得」という項目があると思います。

その中の「公開可能キー」と「シークレットキー」をあとで.envファイルとかに記述するので、コピーしておいてください。
*シークレットキーは目のアイコンをクリックされれば表示されます。

④:StripeのAPIキーを.envファイル(隠しファイル)に記述

次にコピーしたAPIキーを.envファイルに貼り付けていきます。

.envファイルは隠しファイルなのでデフォルトでは表示されてないかも。
例えばMacでVSCodeの場合は「ファイルを開く」→「ダイアログで『cmd(コマンド)+shift(シフト)+.(ドット)』」を同時に押せば表示されます。

.envファイルを見つけたら一番下に、下記コードの「公開キー」と「シークレットキー」をそれぞれ自分のものに置き換えて、記述してください。

STRIPE_KEY=自分の公開キー
STRIPE_SECRET=自分のシークレットキー

⑤:決済ボタンを設置する

次に決済ボタンを設置していきます。

決済ボタンは設置したいviewファイル内のどこかに記述すればOK。

どこか迷う人はトップページ(デフォルトはwelcom.blade.php)にでも下記コードを記述してください。*自分のシークレットキーのところは置き換えてください。

<form action="{{ asset('pay') }}" method="POST">
    {{ csrf_field() }}
    <script src="https://jin_icon_check size="20px"out.stripe.com/jin_icon_check size="20px"out.js" class="stripe-button" data-key="自分の公開可能キー"
        data-amount="500" data-name="Stripe決済" data-label="決済をする" data-description="これはデモです。"
        data-image="https://stripe.com/img/documentation/jin_icon_check size="20px"out/marketplace.png" data-locale="auto"
        data-currency="JPY">
    </script>
</form>

簡単に解説しておきます。

  • data-amount=”500″:購入金額を記述
  • data-name=”Stripe決済”:名前
  • data-label=”決済をする”:ボタンに表示する文字
  • data-description=”これはデモです”:決済の説明文
  • data-image=”https://…”:サイトのロゴ
  • data-currency=”JPY”:決済通貨を書く

ボタンが表示されて、クリックすると下記画像が表示されれば成功です!
*これはJavaScriptで見た目を作っているだけなので、まだ決済としての機能はありません。

⑥:Controllerを作る

次に決済されたら、Stripeアカウントへ反映させるためのコントローラーを作成していきます。

まずは下記のコマンドをターミナルで実行し、Contorollerを作成してください。

php artisan make:controller PaymentController

今できたコントローラーの中身に下記コードをコピペしてください。

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use StripeStripe;
use StripeCharge;

class PaymentController extends Controller
{
    public function pay(Request $request)
    {
        Stripe::setApiKey('自分のシークレットキー');
 
        $charge = Charge::create(array(
            'amount' => 500,
            'currency' => 'jpy',
            'source'=> request()->stripeToken,
        ));
        return back();
    }
}

これで、最低限の決済機能ができたので最後にルーディングを記述します。

⑦:ルーディングを記述する

web.php に下記コードを記述してください。

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

これによって決済を完了すると、先ほど作成したコントローラーからStripeアカウントへ反映されます。

こんな感じで完成です。

さて、それでは下記のように決済をしてみましょう。

メールアドレス:適当なのでOK
カード番号:4242 4242 4242 4242
有効期限:直近の未来ならOK(過去の日付はNG)
CVC:適当な3桁

カード番号以外は適当でOKです。
ちなみにVisa (debit)なら「4000 0566 5566 5556」。 Mastercardなら「5555555555554444」です。詳しくは「こちら」。

Stripeにアクセスして、「支払い」を確認して下記のようになっていれば成功です!

ということで、これにて無事単発決済が完成しました(*・ω・)ノ

ムッチャ簡単でしたね。ありがたや〜