conocode
このコード
How to

決済サービス Stripe を使って WordPress サイトに支払い機能を組み込む

WordPressのサイトに決済機能を入れたいんですけど
それなら Stripe というサービスを使うと簡単に組み込めるよ

WordPress や独自開発のサイトに決済機能を入れたいという要望はたくさんあります。

一昔前だと、カード決済代行会社と契約をして、審査のために書類やら何やらいろいろと準備して、厳しい制約を受けながら、手数料もたくさん取られてしまう、という状態でしたが、時代は変わり、比較的簡単に導入できて手数料も明朗会計というサービスが出てきました。

サービスは複数あるのですが、今回は Stripe というサービスを使って実現する方法を紹介します。

複数サービスの比較は、他の人がたくさん行なっているので割愛します。

比較するのが面倒な人は騙されたと思って Stripe を使ってみてください。

導入は遅くとも数時間でできるレベルですので、「このサービス私のサイトには合わない」と思った後で他に乗り換えても、それほど手戻り工数は大きくありません

決済手数料は、取引の3.6%です。(2018年11月20日現在)

事前準備

Stripe を使って決済を行うためには以下のものが必要です。

事前に準備しておきましょう。

  • HTTPS接続できるサイト
  • 特定商取引法に基づく表示
  • サポート用の電話番号
  • 売上金の振込先口座情報

Stripe のアカウント設定

アカウント新規登録

まずは Stripeのサイト https://stripe.com/jpを表示します

アカウント登録」をクリックします。

表示されたポップアップに、メール、名前、パスワード、パスワードの確認、私はロボットではありませんのチェック、を入力して「Stripe アカウントを作成」をクリックします。

はい、ダッシュボードが表示されました。簡単ですね。

アカウント作成1分ぐらいで完了です。

メールアドレス確認メールが届きますので、本文中の「Confirm email address」をクリックして認証を行なってください。

メールアドレス認証を行わないと本番課金ができません。(テスト課金は可能です)

本番環境利用の申請

メールアドレス認証を行なったら、本番環境利用の申請を行なっていきます。

ダッシュボードサイト左メニューの「本番環境利用の申請」をクリックし、右側に表示された項目を入力していきます。

基本的に質問に答えていけば問題ありませんが、サポートの電話番号や銀行口座など事前に準備しておかなければならないこともありますので、法人の場合は担当者に聞いておきましょう。

すべて入力し終わったら一番下にある「アカウントを有効にする」をクリックしてアカウントを有効にします。

アカウントが有効になり、本番環境での決済ができる状態になりました

サイトがHTTPSであること、特定商取引法に基づく表記があること、が条件ですのでサイトがそのようになっていることを確認しましょう。

APIキーの取得

WordPress に Stripeを組み込む際には APIキーが必要になります。

ダッシュボードサイトでテスト用のAPIキーと本番用のAPIキーを表示させて取得しておきます。

ダッシュボードサイト左メニューの「開発者」「APIキー」の順にクリックします。

シークレットキー欄の「テスト用キーを表示」をクリックします。

公開可能とシークレットキーの「TOKEN」をメモしてください。後でWordPress に設定します

次に、ダッシュボードサイト左メニューの「テストデータを表示」スイッチをクリックしてオフにし、本番用のデータを表示します。

シークレットキー欄の「本番環境のキーを表示」をクリックします。

公開可能とシークレットキーの「TOKEN」をメモしてください。後でWordPress に設定します。

以上で Stripe アカウント側の設定は完了です。

次は WordPress 側の組み込みを進めていきます。

プラグイン「Stripe Payments」の導入

WordPress への組み込みではプラグインを使っていきます。

いくつかStripeを使うプラグインは出ているようですが、今回はシンプルに導入ができそうな「Stripe Payments」というプラグインを使って組み込もうと思います。

Stripe Payments のインストール

WordPressのダッシュボード左メニューで「プラグイン」「新規追加」をクリックし、検索キーワードに「stripe payments」を入力します。

表示された「Stripe Payments」の「今すぐインストール」をクリックしてインストールします。

インストールされたら「有効化」をクリックして有効にします。

この後 Stripe Payments の説明を行いますが、画面はWordPressプラグイン「Stripe Payments」日本語化ファイルを使って日本語化したページで説明します。

基本設定

ダッシュボード左メニューの「Stripe支払い」「設定」をクリックします。

画面の上部の「一般設定」タブを選択します。

ここで全般の設定をしていきます。

通貨、通貨記号、ボタン文字を入力します。

下の方にある、APIキー4つを入力します。

Stripeのダッシュボード画面で取得しておいた、テスト用公開キー・秘密キー、本番用公開キー・秘密キーの4つです。

入力が終わったら「変更を保存」をクリックします。

メール設定

メール関係の設定は上部タブの「メール設定」をクリックします。

購入者にメールを送るのか、販売者にメールを送るのか、タイトルや本文をカスタマイズするのか、この辺りは運用次第ということになりますので、自身の運用にあった設定をおこなてください

詳細設定

上部の「詳細設定」タブをクリックします。

ここのポイントは「Number of Decimals」です。(プラグインの不具合でこの文字の日本語化ができません

小数点以下の桁数を指定する場所なのですが、日本円では商品の値段に小数点は使いません。0にするとエラーになってしまうので-1を指定します

変更を保存」をクリックします。

商品追加

設定が終わったので、商品を追加してみます。

Stripe支払いの「商品」をクリックし、「新規商品を追加」をクリックします。

商品タイトル、説明文、短い説明文、価格、通貨、商品ダウンロードURL等を入力し、商品を「公開」します。

以上で商品がサイトに公開されます。

商品一覧はデフォルト設定だと

https://ドメイン名/products/

というURLで見ることができます。

購入テスト

商品の作成が終わったら、商品一覧のページか管理画面のリンクから商品ページにアクセスします。

タイトル、説明、購入ボタンが表示されていますので、「購入する」ボタンをクリックします。

購入ボタンを押すと、クレジットカード情報を入力するポップアップが出てきます。

また、テスト環境の場合は右上に「TEST」と表示されます。

メールアドレス、カード番号、有効期限、セキュリティコード、を入力し「¥108を支払う」ボタンをクリックすると購入完了画面に遷移します。

テスト環境の場合は以下のクレジットカード番号が使用できます(有効期限とセキュリティコードはなんでもOKです)

テスト用クレジットカード番号 カードブランド
4242424242424242 Visa
4000056655665556 Visa (debit)
5555555555554444 Mastercard
2223003122003222 Mastercard (2-series)
5200828282828210 Mastercard (debit)
5105105105105100 Mastercard (prepaid)
378282246310005 American Express
371449635398431 American Express
6011111111111117 Discover
6011000990139424 Discover
30569309025904 Diners Club
38520000023237 Diners Club
3566002020360505 JCB
6200000000000005 UnionPay

支払い結果画面が表示され、商品のダウンロードリンクから商品がダウンロードできればテスト成功です。

本番環境へスイッチ

購入テストが終わったら本番環境へ移行し、実際に課金が発生するようにします。

Stripe支払いの設定で、「一般設定」タブをクリックし、その中の「本番環境」のチェックボックスにチェックをつけます。

Stripe 本番環境のAPIキー(pk_liveとsk_liveで始まる文字列)もセットされていることを確認して、「変更を保存」をクリックします。

以上で本番環境へスイッチします。

先ほど試した商品画面で購入を試してみましょう。本物のクレジットカードで試して正常に動けば設置は完了です。

その他の手続き

ここまでで、実際の商品販売はできるようになっています。

実際に商品が売れると、Stripeから売上金振込のための本人確認手続きのお知らせなどが届くので、指示に従って本人確認をすませましょう

Stripe Payments の日本語化

Stripe Payments は現時点(2018年11月20日)では英語の設定になっています。

このチュートリアルを書くに当たって、自分で翻訳を行なってみました。

そして、販売するものがなかったのでその翻訳ファイルを販売してみることにしました。

こちらから108円(税込)で購入できますので、よろしかったらご購入ください。

実際に購入していただくと、課金のフローや届くメール等もご確認いただけると思います。