Stripeの導入方法【WordPressでECサイトを構築】

悩んでいる人

自社サイトをECサイト化したいです！そのために、決済システムをサイトに導入したいのですが方法がよくわかりません。

このようなお悩みを解決します。

・決済サービスはStripeがおすすめ
・プラグインで簡単に実装可能
・決済ボタンの装飾方法まで紹介

ヒロキタナカ（@hiroky_info）

今回はWordPressでECサイトを構築するために、Stripeを導入する方法について解説します。

Stripeとは、世界でもっとも利用されている決済サービスです。

アメリカの成人の90%がStripeを使用するビジネスから購入したことがあります。

出典：Stripe

アメリカのサービスですが、数多くの有名企業もStripeを利用しています（AmazonやGoogle、Microsoftなど）。

名だたる企業や最近有名になったスタートアップ企業も利用しているサービスなので、かなり安心感がありますよね。

Stripeの導入方法【登録・プラグイン】

Stripeの導入方法【登録・プラグイン】

以下の手順でStripeを導入します。

1. Stipeへの登録、設定
2. Stripe Payment（WPのプラグイン）のインストール、設定
3. Stripeの実装

Stripeに登録

stripe に登録します。

基本的に無料で利用可能。

サービスが購入されたときに、手数料はかかります。

料金体系（Stripe）

決済手数料は、決済成立ごとに3.6%です。

初期費用もなく月額料金もないので、かなり良心的ですよね。

筆者も自社のECサイトに導入しています。

出典：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に、コードを追記します。

以下のような緑色のボタンの実装コードです。

※必要に応じて修正してください。

ボタンを動かしたい場合は、CSSをさらに追加。

以下の記事が参考になります。

【CSS】ぷるぷる動くボタンなど、コピペで使えるアニメーションボタン10種類（ハウジェニック）

※外部サイトに飛びます

まとめ

今回は、Stripeの導入方法について解説しました。

Stripeを利用すれば、モノに限らず情報などのコンテンツも販売できます。

在庫設定もできるので、忙しくなったらセーブすることも可能。

WordPressでECサイトをつくるなら、AFFINGER5というテーマが使いやすいです。

SEOに強く、稼ぐことに特化したテーマ。

他のテーマとは違い、複数のサイトに使える点も便利ですよ。

今回は以上です。