しみずしみず
2017/08/24

カード決済システム stripeをWEBサイトに簡単に導入してみるVol.3 –実装編

この記事は約4分で読めます。

カード決済システム stripeをWEBサイトに簡単に導入してみるVol.3 –実装編

WordPressビジネス

オンラインカード決済システム『Stripe』について前回までにどんなサービスかとアカウントの設定方法などを書かせて頂きました。

■Vol.1 概要編

カード決済システム stripeをWEBサイトに簡単に導入してみるVol.1 – 概要編

■Vol.2 アカウント作成編

カード決済システム stripeをWEBサイトに簡単に導入してみるVol.2 –アカウント作成編

今回は実際に実装する手順を記事にしたいと思います。

もくじ

1.前提
2.プラグインのインストール
3.WP Simple Pay for Stripeの設定
4.WP Simple Pay Lite for Stripe Companionの設定
5.テスト決済ページを表示してみる
6.おわりに

1.前提

今回実装についての前提は、下記の通りです。

・サイトがSSL化している
以前にも書かせて頂きましたが、サイトがSSL化していないと動作しません。

・WordPressである
このサイトがWordPressなので実装環境はWordPressです。 
勿論WordPressでなくとも実装可能です。

・プラグイン使用
WordPressプラグインを使用する事で、コードを一行も書かずに実装可能です。
細かいカスタマイズはできませんが、こちらの方が実際の需要は多いのではないでしょうか。

 

・テストモードで検証
Stripeは非常に簡単に決済テストが可能です。
今回はテストモードで実装します。

2.プラグインのインストール

以下の2つのプラグインを管理画面からインストール・有効化してください。
この2つのプラグインのおかげで非常に簡単に設置が可能になります。

※インストール方法については省略させて頂きます。

1.WP Simple Pay for Stripe
2. WP Simple Pay Lite for Stripe Companion

3.WP Simple Pay for Stripeの設定

先にStripeアカウントの管理画面に入り、APIキーを取得します。

テストモードで実装しますので、左のメニューの『View test data』をオンにし、APIをクリックしてください。

表示されている『publishable key』と『Sercret key』のTOKENをコピーしておいてください。

 

コピーしたら、WordPressの管理画面にログインしてください。

ログインしたら、左メニューの『Simple Pay Lite』の赤枠に先ほどコピーしたTOKENをペーストして下さい。

4.WP Simple Pay Lite for Stripe Companionの設定

こちらのプラグインは設定と言っても、インストールしていれば準備は完了してます。

なので決済ボタンを付けたいページもしくは決済ページを作成します。

今回は固定ページで『テスト決済ページ』を作成しました。

固定ページ編集画面に行くと、プラグインをインストールした事により、エディタにStripeマークが表示されています。

このボタンから、『Basic product checkout』を選択します。

選択すると、ショートコードが入力されます。

各パラメーターの説明です。
・stripe name : ショップの名前。サイト名に書き換えると良いでしょう。
・description:商品名。商品名に書き換えましょう。
・amount:販売価格。販売価格に書き換えましょう。

今回は、下記のように設定しました。

stripe name=”CamaradeShop”
description=”泣く子も黙る!スーパーバナナ”
amount=”999″

以上で準備が完了しました。

驚くほど簡単ですね。

5.テスト決済ページを表示してみる

今回設定したテスト決済ページはこちらです。

https://hp-renew.jp/test_pay_page

適当に商品を設定してみましたが、ボタンを押すと実際にクレジットカード入力画面が立ちあがります。

 

下記テストカード情報を入力して、実際にテスト購入も可能です。

■テストカード
カード番号:4242 4242 4242 4242
MM/YY:01/30
CVC:1111
 

こんな感じで。
※テストモードなので、実際に課金はされません!

決済情報を保存するにチェックすると、次回以降はメールアドレスを入力した段階で、確認コードが届くようになります。

実際にテスト購入が完了すると、Stripeの管理画面にも即座に反映されます。
管理画面左メニューの『View test data』をオンにして、『payments』をクリックすると、
購入完了データの一覧が表示されます。

おわりに

いかがでしたでしょうか?
カード決済システムが驚くほど簡単に構築できてしまいました。

商品数も少ない場合や複雑な仕様などない場合はには本当にお手軽に導入できてしまいます。

本格的な会員サイトやECサイトを制作する場合、カード入力画面等のカスタマイズが必要な場合は、やはりStripeのAPIをカスタマイズしないといけません。

そういった要件で導入を検討されている方は是非ご相談下さい!
WordPressのカスタマイズは大好物です!

また別の機会にカスタマイズについてもご紹介しようかと思います。

カード決済システム stripeをWEBサイトに簡単に導入してみるVol.3 –実装編
しみず WEBディレクター&クリエイター

WEBディレクター&クリエイターのしみずです。 主にWeb制作に関係する業務を統括しています。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。