作業効率化

【Stripe Checkout】ノンプログラミングでWebサイトにクレカ決済機能を導入する

サーバーサイドの実装は不要なのでエンジニア以外の人にもお勧めできます

Stripeの簡単な解説と主な仕様

Stripeは言わずと知れた決済APIサービスです。ECサイトの作成やモバイルアプリのWEB上で行う決済機能を搭載する事ができます。この記事ではそんなStripeで提供されているCheckoutという機能の使い方を紹介したいと思います。サーバーではなくクライアント側にコードを埋め込むだけで決済機能を利用する事ができ、プログラムに明るくない人でも簡単に導入する事が可能です。
Checkoutについての詳しい解説に入る前に、まずはStripeの主な使用についてまとめておきます。

  • 売り上げや振込スケジュール・顧客情報などはDashboardで一元管理
  • 決済手数料は3.6%(口座への振込手数料無料)
  • 買い切り型・定期支払い型(サブスクリプション)の選択が可能

StripeのCheckout機能について

続いて本題のCheckoutの説明に入ります。Checkoutの利点を挙げると導入コストが圧倒的に低い事が挙げられます。具体的には次の二点です。

  • サーバーサイドの実装を行う必要がない
  • 予め質の高いデザインテンプレートが用意されている(カスタマイズ可)

checkout こんな感じ

前準備

前準備として次の三つを行っておきましょう

  • 左メニュー「テストデータを表示」のチェックを外し、本番環境にしておきます。 production
  • 「Checkoutの設定」→「Checkout クライアント専用組み込み」にチェック
  • ドメインの記入(本番環境の場合は設定されたドメインのページ上のみで機能する) checkout setting

実装

1. 商品の作成

「商品」→「新規」から商品を作ります。買い切り型かサブスク型かを選択できます。 create product

2. Checkoutコードの生成

コードを生成します。作成した商品の詳細画面から「SKU」→「checkoutを使用」と選択すると下のような画面が出てきます。デフォルトのコードをそのままコピー&ペーストで問題なく使用可能です。 generate checkout code

一応かいつまんで簡単な解説を行います。

  • まずStripe.jsのロードを行っています。
<script src="https://js.stripe.com/v3"></script>
  • <button>タグで囲まれた部分が決済ボタンの実装になっています。
  • 決済に成功したのちのリダイレクト先はsuccessUrlの値、失敗した場合のリダイレクト先はcancelUrlの値になります。
  • Stripe(公開鍵)でユーザー認証を行っています
  • 商品ごとに設定されたIDがあり、各商品に対応したIDで何に対しての決済かを区別しています
//サンプルコード
<script>
(function() {
  var stripe = Stripe('公開鍵(pk_live_から始まるやつ)');

  var checkoutButton = document.getElementById('checkout-button-商品ID');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: '商品ID', quantity: 1}],

      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'https://playground.alltimeneet.com/success',
      cancelUrl: 'https://playground.alltimeneet.com/canceled',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
</script>

3. 本人確認と売り上げの受け取り

Stripeを経由してあがった売り上げは登録されている口座に振り込まれます。その際に本人確認を行う必要があります。以下のうちいずれかの書類の写真をアップロードするだけで手続きを行うことができます。大体次の日には審査が下りているはず

  • パスポート
  • 運転免許証
  • その他身分証明書

最後に

  • 売り上げを受け取るには本人確認が必要
  • 本番環境用で生成したCheckoutは予め設定されたドメインのページ上でのみ機能するので注意
  • Dashboardの出来が良いので、あとはなんやかんや適当にいじっていればノリでわかる
備考1. 可能な支払い方法
  • Visa
  • JSB
  • AmericanExpress
  • Alipay
  • WeChatPay(Beta)
  • ApplePay(要手続)
  • GooglePay
備考2. オンラインサロン系のサービスとの比較

手数料3.6%ということでオンラインサロンの集金はサロン系サービスを利用するよりもStripeで行う方が圧倒的に良さそうだと感じました。顧客管理もDashboardで簡単に行うことができます。参考までに手数料を比較した表を用意しました

サービス手数料参考
Stripe3.6%一応は自前で実装する必要がある
DMMサロン20%手数料は高いが会場を借りることができたり代わりに宣伝を行ってくれるとのこと
campfire community10% + 税集金機能とブログサービス的な投稿機能がある模様
note(サークル機能)10%文章を書く人にはいいのかな??

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから