読者です 読者をやめる 読者になる 読者になる

Laravel5.3とStripeAPIでECサイトを作ってみた。

Laravel

Stripeとは

今あついベンチャー企業の台等となっている決済サービスのstripe。

シリコンバレーでもPayPal以上のペイメント企業になると言われている。 つい先日に日本でもサービスがローンチされたばかりで日本国内最大のクレジットカード会社、三井住友カード株式会社がStripeに資本参加するなどの注目のサービスである。

jp.techcrunch.com

背景

ECサイトを作ってみたかったこととlaravelで何かものを作りたいと思ったことからLaravelでECサイトを作ってみよう。 ただ、そんな簡単に作れるものじゃない...と思い何か材料がないかネットで探してみたところ あるYoutuberの人がlaravel5.2でshopping-cartを作ってみるというチュートリアルを発見!

https://www.youtube.com/watch?v=56TizEw2LgI&list=PL55RiY5tL51qUXDyBqx0mKVOhLNFwwxvH

これで実装してみよう!!

実装のポイント

  • resoucesのlayoutsフォルダにlayoutファイル,viewファイルを作っていく。
  • DBのproductsテーブルから商品一覧を表示させる。
  • 商品クリックでsessionに商品情報を保有する。
  • checkout(購入ボタン)で商品料金の合計と入力フォームを用意する。
  • stripeAPIを使って確定ボタンを押すとstripeのダッシュボードに購入金額が表示される。

f:id:suga-tech3:20161120201239p:plain

f:id:suga-tech3:20161120201301p:plain

*他にも会員か非会員かのAuthの認証もいれる必要があるのでそれの実装と分岐をさせる。

stripeAPIを使う流れ

1.stripeの会員になる

stripe.com

2.ダッシュボードからaccount settingボタンでAPIの情報が載っているので以下のように実装

レイアウトファイルで以下jsを呼び出す。 - checkout.js

Stripe.setPublishableKey('publish-key');

var $form = $('#checkout-form');

$form.submit(function (event) {
    $('#charge-error').addClass('hidden');
    $form.find('button').prop('disabled', true);
    Stripe.card.createToken({
        number: $('#card-number').val(),
        cvc: $('#card-cvc').val(),
        exp_month: $('#card-expiry-month').val(),
        exp_year: $('#card-expiry-year').val(),
        name: $('#card-name').val()
    }, stripeResponseHandler);
    return false;
});

function stripeResponseHandler(status, response) {
    if (response.error) {
        $('#charge-error').removeClass('hidden');
        $('#charge-error').text(response.error.message);
        $form.find('button').prop('disabled', false);
    } else {
        console.log(response);
        var token = response.id;
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));
        // Submit the form:
        $form.get(0).submit();
    }
}
  • ProductConroller.php
        $oldCart = Session::get('cart');
        $cart = new Cart($oldCart);    // app/Cart.php

        Stripe::setApiKey('token');
        try {
            $charge = Charge::create(array(
                "amount" => $cart->totalPrice,
                "currency" => "jpy",
                "source" => $request->input('stripeToken'), // obtained with Stripe.js
                "description" => "Test Charge"
            ));

            $order = new Order();   // app/Order.php
            $order->cart = serialize($cart);
            $order->address = $request->input('address');
            $order->name = $request->input('name');
            $order->payment_id = $charge->id;

            Auth::user()->orders()->save($order);  // 保存
        } catch (\Exception $e) {
            return redirect()->route('checkout')->with('error', $e->getMessage());
        }

まとめ

ほぼ同じようにやっていくと完成できるので難易度は高くなかったが 若干laravelのバージョンが違うからか実装を変えていく箇所などがあった。 stripeAPIは数行のコードを加えるだけでオンライン決済機能を導入できるしECサイトを作ってみたくなったら動画なりドキュメントなりみてやってみてください。

github.com