このようなお悩みを解決します。
・決済サービスはStripeがおすすめ
・プラグインで簡単に実装可能
・決済ボタンの装飾方法まで紹介
ヒロキタナカ（@hiroky_info）
今回はWordPressでECサイトを構築するために、Stripeを導入する方法について解説します。
Stripeとは、世界でもっとも利用されている決済サービスです。
アメリカの成人の90%がStripeを使用するビジネスから購入したことがあります。
出典：Stripe
アメリカのサービスですが、数多くの有名企業もStripeを利用しています（AmazonやGoogle、Microsoftなど）。
名だたる企業や最近有名になったスタートアップ企業も利用しているサービスなので、かなり安心感がありますよね。
Stripeの導入方法【登録・プラグイン】
Stripeの導入方法【登録・プラグイン】
以下の手順でStripeを導入します。
- Stipeへの登録、設定
- Stripe Payment（WPのプラグイン）のインストール、設定
- Stripeの実装
Stripeに登録
stripe に登録します。
基本的に無料で利用可能。
サービスが購入されたときに、手数料はかかります。
料金体系（Stripe）
決済手数料は、決済成立ごとに3.6%です。
初期費用もなく月額料金もないので、かなり良心的ですよね。
出典：Stripe
Stripeに登録した後は、管理画面で銀行口座の設定などを行います。
Stripe Paymentsのインストール
WordPressサイトにStripeを設置するために、プラグインを使用。
Stripe Paymentsというプラグインが便利です。
ほかにもプラグインはありますが、個人的にはこのプラグインが使いやすいと感じています。
インストールしたら有効化し、「設定」に移動。
一般設定
「通貨」を日本円に変更しましょう。
次に「本番環境モード」にチェックして、「本番環境用の公開可能キー」から「テスト環境用のシークレットキー」までの4項目にキーを入力します。
キーを入力しないとStripeが使えないので、重要なところです。
キーは、Stripeから確認できます。
Stripeの画面に戻って、上記の各項目に入るキーを確認。
「概要」を押して「本番APIキーの取得」と「テストAPIキーの取得」という項目から、それぞれキーを確認し、先ほどの4項目にコピペします。
テストAPIは以下のような画面です。
プラグインのその他の項目は、必要に応じて設定しましょう。
電子メール設定
以下の2点はチェックしておいた方がよいです。
明細メールを送ります。
領収書の役割です。
決済エラー時にメールで通知しないと、不必要なコミュニケーションが生まれてしまうので設定しておいたほうが無難です。
高度な設定
価格表示設定は、以下のように設定しましょう。
綺麗な表示になります。
次に「利用規約と条件を有効にする」にチェックを入れると「チェックボックスのテキスト」に利用規約のURLを設定可能。
決済時に利用規約に飛べるようになります。
Stripeの導入方法【実装・ボタン】
Stripe Paymentsの「Add New Product」を押します。
※Add New Productで商品ページをつくらなくても設置はできますが、商品ページをつくると在庫数量を設定できます。
在庫数量は以下のように設定。
在庫数量を設定していないと際限なく注文できてしまうので、対処しきれないといった問題が発生する恐れもあります。
そのため、「商品ページ」は作ったほうがよいです。
決済ボタンの設置
Stripe Paymentsの「Products」を押します。
先ほど追加した商品が一覧にあるので、右の方にある「ショートコード」をボタンを設置したいページにコピペ。
設置してみると、デフォルトのボタンが表示されるようになります。
今すぐ購入を押すと、以下のように情報入力画面が出てきます。
試しにテストモードで、決済できるか確認しましょう。
決済できるか確認
決済できるかどうか確認するには、「テスト環境モード」に変更し架空のカードを使う必要があります。
テスト環境モードは、Stripe Paymentsの「設定」内の「一般設定」にある「本番環境モード」のチェックを外せばOKです。
架空のテスト用カードの情報は、Stripeに掲載されています。
テスト方法（Stripe）
テストカード番号の例（出典：Stripe）
決済ボタンの装飾
先ほどの青いボタンでは見栄えがよくないので、決済ボタンを装飾します。
「ボタンCSSクラス」にCSSクラスを入力。
ここでは、testとします。
追加CSSに、コードを追記します。
以下のような緑色のボタンの実装コードです。
.test { background-color:#06B305; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border:1px solid #06B305; display:inline-block; cursor:pointer; color:#F7F7F7; font-family:Arial; font-size:25px; font-weight:bold; padding:20px 40px; text-decoration:none; text-shadow:0px 1px 0px #528ecc; }
※必要に応じて修正してください。
ボタンを動かしたい場合は、CSSをさらに追加。
以下の記事が参考になります。
【CSS】ぷるぷる動くボタンなど、コピペで使えるアニメーションボタン10種類（ハウジェニック）
※外部サイトに飛びます
まとめ
今回は、Stripeの導入方法について解説しました。
Stripeを利用すれば、モノに限らず情報などのコンテンツも販売できます。
在庫設定もできるので、忙しくなったらセーブすることも可能。
WordPressでECサイトをつくるなら、AFFINGER5というテーマが使いやすいです。
SEOに強く、稼ぐことに特化したテーマ。
他のテーマとは違い、複数のサイトに使える点も便利ですよ。
今回は以上です。
