Laravel&React.js でStripeを利用した決算処理を作成する

Stripeとは

インターネットで商品を取引する際に使えるオンライン決済サービスのことです。

カリフォルニア州にあるstripe社が手掛けており、世界の120か国以上、数百万社の企業で導入されています。

stripeの魅力は、他のオンライン決済サービスに比べ導入が速く手数料が低いという点です。

日本では、2016年から利用が開始されています。

ファッション通販サイトのBUYMAや、労務クラウドソフトを手掛けるSmaetHR、アンダーアーマーなどもstripe決済を導入しています。

stripe決済を導入する5つのメリット

1. 利用開始までが早い
2. 手数料が安い
3. 画面遷移がなくWebサイト上で決済が完了
4. アプリで売り上げが確認できる
5. 日本語サポートがある

Stripeを利用した決算処理の種類

Stripeのオンライン決済を実装するには3通りの方法があります。

• Stripe Checkout: Stripeが提供する支払いページにリダイレクトして決済する
• Charges API: Charges APIを呼んで自前の支払いフォームで決済する
• Payment Intents API: Payment Intents APIを呼んで自前の支払いフォームで決済する

自前の支払いフォームでの支払いフローを構築する場合は、Charges と Payment Intents のどちらかになりますが、Chargesの方は今後は拡張せずPayment Intentsの製品開発に集中することがこちらのページで説明されていますので、Payment Intents を利用して作成する方法について記載しました。

React側でpaymentIntentをサーバー側にリクエストする

paymentIntent の作成はClient側でも出来ますが、STRIPE_SECRET を公開するのはセキュリティ的に危なそうなのでサーバー側で作成するようにしました。

    //paymentIntentの作成を（ローカルサーバ経由で）リクエスト
    const response = await API.post(API_ENDPOINT.CREATE_PAYMENT, { amount: values.amount, username: values.username })

Laravel側でpaymentIntentを作成する

    $stripe = new \Stripe\StripeClient(env('STRIPE_SECRET'));

    $result = $stripe->paymentIntents->create([
      'amount' => $request->amount,
      'currency' => 'jpy',
      'description' => 'LaraEC',
      'metadata' => [
        'username' => $request->username
      ]
    ]);

React側でclient_secretを利用して（確認情報をStripeに投げて）決済を完了させる

    //レスポンスからclient_secretを取得
    const client_secret = response.client_secret

    //client_secretを利用して（確認情報をStripeに投げて）決済を完了させる
    const confirmRes = await this.props.stripe.confirmCardPayment(client_secret, {
      payment_method: {
        // card: this.props.elements.getElement('card'),
        card: this.props.elements.getElement('cardNumber'),
        billing_details: {
          name: values.username,
        },
      },
    })

    if (confirmRes.paymentIntent.status === 'succeeded') {
      // 決算処理が完了したら、注文履歴に追加してマイカートから商品を削除する。
      const response = await API.post(API_ENDPOINT.CHECKOUT, {})

      if (response.result) {
        // 完了画面を表示する
        this.props.push(URL.SHOP_COMPLETE)
      }
    }

Stripeを利用した決算処理のサンプル

Laravel ＆ React.js で作成したECサイト構築の為のボイラープレート