LIQUID DESIGN Tech Blog

Stripe+WooCommerce Subscriptionsでサブスクリプション!

はじめに

こんにちは。

この記事は「Stripe Advent Calendar 2018」14日目に参加させて頂きました。

Stripe + WooCommerce Subscriptionsで、サブスクリプションサービスをはじめましたので、やったことを振り返りしてみました。

企画

ビジネスモデル

弊社では、「LIQUID PRESS」というサービスで、
WordPressテーマ&プラグインとカスタマーサポートを提供し、
WordPress公式テーマやWordPress公式有料サポートテーマにも登録されています。
これまで無料版も含めて累計20,000ダウンロードを突破していますが、売り切り商品では継続したサポートが難しい、という課題がありました。
そこで、継続サポートや様々な付加価値を提供する、サブスクリプションサービスを新たにはじめました。

決済システムの選定

弊社ではこれまで、クレジットカード決済に「Yahoo!ウォレット FastPay」を利用していましたが、サービス終了に伴い、決済システムを変更する必要がありました。
そこで、似たようなシステムで移行がしやすく、世界中で採用実績があり、すぐに終了するリスクの低そうな「Stripe」を選定しました。

商品

  • 売り切り商品 – 決済システム変更
  • サブスクリプション商品 – 新規追加

実装方法の検討

Stripeを利用した定額課金の実装は、非常にシンプルなコードで実現することができました。これがStripeの魅力だと思います。

ただ、今回はお客様用のダッシュボードも含め、爆速でリリースしたかったので、
WordPressのECサイト向けプラグイン「WooCommerce」を利用することにしました。

スケジュール

2018年11月(その後12月に変更)に予定されていた、WordPress本体のメジャーアップデート(WordPress 5.0)までにリリースする計画を立てました。

9月からアクションをはじめ、約2ヶ月でリリースすることができました。

構成

Stripe

Stripeは、Webサイトやモバイルアプリで簡単に利用できるオンライン決済サービスです。

  • Stripe でアカウントを作成します。
  • 各種設定(事業者情報、入金サイクル、等)を行います。
  • JCBカードの利用には申請が必要です。お問い合せフォームから申請します。
  • 本番環境を利用後、代表者確認を求められます。本人確認書類をWebから送信します。

WooCommerce

WooCommerceは、WordPressでECサイトを構築するためのプラグインです。WordPress.comを運営するAutomattic社が買収し、開発しています。
物販商品の在庫管理や送料設定のほかダウンロード商品の販売等も可能です。

WordPress管理画面からインストールおよび各種設定を行います。

  • WooCommerce プラグインをインストールします。
  • 各種設定(決済方法、プライバシー、税、等)を行います。
  • 商品を登録します。

WooCommerce Subscriptions

今回、下記プラグインを利用しました。サブスクリプションを行うためには WooCommerce Subscriptions が必要です。

  • WooCommerce Stripe Payment Gateway – Stripe決済対応
  • WooCommerce For Japan – 日本対応、銀行振込対応
  • WooCommerce Subscriptions – 定額決済対応(有料)
  • WooCommerce Checkout Field Editor (Manager) Pro – 注文フォームのカスタマイズ

使い方

カスタマイズ方法

テーマの対応

WordPressテーマをWooCommerceに対応します。

対応方法について詳しくはこちらが参考になります。

日本語翻訳

WooCommerce Subscriptions を公式サイトから入手すると、日本語翻訳ファイルがありません。
そのため、日本語翻訳ファイルを作成しました。Poeditを使ったWordPress翻訳ファイルの作成方法について、
詳しくはこちらが参考になります。

JCBアイコン追加

StripeのJCBカードが有効になっても、WooCommerceの日本環境ではJCBカードアイコンが表示されません。
woocommerce_gateway_icon フィルターフックで変更できます。

stripe アイコン

注文番号

デフォルトでは注文番号が連番の数字のみのため、少し変更を行いました。woocommerce_order_number フィルターフックで変更できます。

効果測定

アクセス解析を行うために、完了画面にトラッキングコードを追加します。

woocommerce_thankyou アクションフックで変更できます。詳しくはこちらが参考になります。

完了画面のデフォルトURLは、/checkout/order-received/… です。

こだわりポイント

購入フローの改善1

決済システムの変更に伴い、売り切り商品についても購入フローを改善しました。

LPから商品のダウンロードまで、2ステップ短くすることができました。

移行前

1. LP > 2. ストアページ > 3. 入力画面 > 4. 確認画面 > 5. 決済画面 > 6. 完了画面 > 7. 商品DL

移行後

1 .LP > 2. ストアページ > 3. カート > 4. 入力&決済画面 > 5. 完了&商品DL

購入フローの改善2

WooCommerceページへのリンクについて、/cart/?add-to-cart={id} のようにすると、商品がカートに追加された状態にすることができます。

これで購入フローをさらに短縮することができます。LPによってはこちらのリンクを利用しています。

運用方法

レポート

Stripe

  • ダッシュボード>残高>取引>前月レポート からデータをエクスポートできます。
  • ダッシュボード>ビジネス設定>データ から月次レポートをエクスポートできます。

ダッシュボードのトップページで簡単にアナリティクスが表示、カスタマイズできるのも魅力的です。

WooCommerce

  • WooCommerce>受注 から注文状況を確認できます。
  • WooCommerce>レポート から期間推移や商品ごとの売上等を確認できます。
  • WooCommerce>サブスクリプション から定期購入のステータス等を確認できます。

    ※WooCommerce Subscriptions の場合、Stripeダッシュボードの定期支払いでは確認できません。

参考記事

サブスクリプションビジネスについて参考にさせて頂いた記事です。

まとめ

Stripe+WooCommerceを利用して、爆速でサブスクリプションサービスをはじめることができました。

よろしければ、本サービスについてもご覧ください。

» LIQUID PRESS サブスクリプションサービス

おまけ

弊社の地元、山陰で「山陰クリエイティブキャンプ」というイベントを開催しています。

#JP_Stripes 山陰 やりませんか・・・?興味のある方ぜひご連絡ください!

それでは、明日の「Stripe Advent Calendar 2018」もぜひご覧ください!

この記事を書いた人
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
SNSでフォローする