更新日: 2020年7月10日
公開日: 2020年5月11日

[テンプレ付き]WordPress×Stripeでネットビジネスを始めよう

個人でも気軽に Web 上で課金機能を搭載できる「Stripe」。

今回は WordPress に Stripe 対応のプラグインを使って、基本的な課金機能を利用する例をご紹介します。

[テンプレ付き]WordPress×Stripeでネットビジネスを始めよう
Stripeとは
Stripeのアカウント登録
Stripeプラグインのセットアップ
商品の登録
商品を買う
商品の一覧表示
まとめ

[テンプレ付き]WordPress×Stripeでネットビジネスを始めよう

Stripeとは

stripe.comn

Stripeは、アメリカを拠点に世界３６カ国に決済サービスを展開する企業で、従業員数 2,000名以上、企業価値 3兆 5,000億円以上の非上場企業。 Stripe を利用すれば個人・法人問わず Web上でクレジットカード決済機能を利用でき、Webビジネスを加速させてくれます。実施に私も使っていますが、入金もスムーズで、見やすい管理画面が ◎ です。

そんな個人・法人のビジネスを後押ししてくれる Stripe、使い方は大きく分けて 2つ。 Stripe 公式の API を使って Web に実装する方法と、WordPress のプラグインを使って実装する方法。

今回は API より簡単そうな WordPress のプラグインを使って、WordPress に課金機能を搭載する様子をご紹介します。

【Stripe の特徴】

個人でも即座に課金機能を利用できる
入金サイクルも早い
テストモードがある
比較的分かりやすいAPI等のドキュメント
クレジットカードの他に銀行振込や Apple Pay なども対応
手数料 3.6%

【Stripeプラグインの利用にむいているビジネス】

コンテンツの販売
商品点数の少ないビジネス
ユーザー管理を共わないビジネス

Stripeのアカウント登録

WordPress で Stripe を利用する場合の準備項目をリストアップ。

SSL で接続できる WordPress本体
本人確認用の免許証や携帯電話
売るもの
利用規約や免責などのドキュメント

基本的には以上で、特徴としては会員登録などのお客様用 "ログイン" 機能が不要という点。

一般的にはネットで何か買い物をしようとした場合、ユーザー登録が必要になります。しかし、 Stripe の場合、特別ユーザー登録がなくても課金可能。ユーザー管理が必要な場合もあるかもしれませんが、コスパ＆スパム対策を考えるとなくても大丈夫でしょう。課金に対するユーザー情報は、 Stripe の管理画面で確認できますので、返金等イレギュラーな対応が必要になった場合も対処できます。

また Stripe へのユーザー登録及び本番モードへの認証は、特別難しくありませんのでここでは割愛させて頂きます。まずは Stripe にアクセスしてユーザー登録してみてください。

Stripeプラグインのセットアップ

WordPress のプラグイン検索で「Stripe」と実行すると 10種類ほど該当プラグインがヒット。今回はオンラインビジネスのサポートを手掛ける「Tips and Tricks HQ」社作のプラグイン Stripe Payments を使用。

注意！「Stripe WordPress 使い方」などで検索すると、1年以上更新していないプラグインを使ってケース紹介するコンテンツも見受けられます。 Stripe は「お金」と「カード情報」が関係する処理プログラムになりますので、できるだけ新しいプラグインを使うようにしましょう。古いタイプは、決済処理の JavaScript コードなどが違ってきます。

Stripeのプラグイン自体の導入は簡単で、 WordPress の管理画面から「プラグイン → 新規追加 → Stripe」で「Stripe Payments」をインストール＆有効化。そして Wordpress 管理画面左サイドバーの「Stripe Payments → 設定」を開き、内容を確認。

【Stripe 導入初期の主な設定項目】

通貨（一般設定）
言語（一般設定）
金額の小数点表示（高度な設定）
APIキー

管理画面は日本語に変換されていますので分かりやすいと思います。ただ、 APIキーについては、初めての方にとっては少し不安に思うこともあるでしょう。

WordPress の Stripe プラグイン設定画面に必要な APIキーは、 Stripe 管理画面で確認可能（下図参照）。

まずはテスト用の APIキーをコピーして WordPress の管理画面に入力＆保存してください。以上で WordPress で Stripe を使う場合のセットは完了です。

商品の登録

WordPress & Stripe で商品を登録する手順は、ブログを投稿する手順と同じ。

いろいろ細い部分の設定も可能で、概ねのビジネスはこのプラグインがカバーしてくれそうです。

⚠️商品登録時の注意点⚠️

現在「Stripe Payments」のバージョンは 2.0.28 で、商品のサムネイル画像を登録するときに注意が必要。

画像ファイル名が英語以外の場合、サーバーに保存される画像ファイル名と WordPress が認識する画像ファイル名が異なります。その結果、画像ファイルは正常にアップロードされたのに画像が表示されないというエラーに。一手間かかるケースもあるかもしれませんが、画像ファイルを初め、取り扱うファイルはなるべく ”英語” を使うようにしましょう。

商品を買う

テスト時のクレジットカード番号は、VISA が '''4242424242424242'''' カード期日は適当でOK。（詳細）

商品の登録が完了したら、次は実際に商品ページを開いて、テスト購入してみましょう。初期の状態であれば、 VISA か MasterCard を使って決済可能。

決済が正常に完了すると購入完了画面に移行（下図参照）。

今回の場合は「有料コンテンツ」を設定しましたので、決済完了後にコンテンツの URL を確認できます。また決済の情報は即座に Stripe の管理画面にも反映されて、ネットビジネスを楽しむことが可能（下図参照）。

尚、本番モードで利用する場合は、本人確認や入金先の銀行口座など１時間ほどの手続きが必要に。

決済完了後にコンテンツの URL を紹介する仕様となっていますので、URL は”公開”状態。URL を知っていれば誰でもアクセスできる状態です。パスワードで閲覧制限や決済時のメールアドレスなどでブロックするとコンテンツを守れそう。

また JCB カードも利用できるそうですが、私の場合、１ヶ月以上経っても保留中、Stripe に問い合わせするもしばらくお待ち下さいとのこと（2020.05.11）。

商品の一覧表示

今回利用したプラグイン「Stripe Payments」では、登録商品の一覧を表示してくれるページが標準で用意されています。

https://codecamp.o-namae.com/products/

ただしカテゴリ別やアイテム数などの細かい情報は....ないですね。そこで即席ではありますが、プラグイン「Stripe Payments」用の商品一覧をカスタマイズできる簡単なテンプレートを作ってみました。

上図ページリンク

上図のコードを今確認する


<?php
/**
 * Template Name: item-list-stripe
 * Template Post Type: page
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */
get_header();
global $wpdb;
//$results = $wpdb->get_results( 'SELECT * FROM wp_posts' );
//1 var_dump($results[0]);
//Comment
?>
<main id="site-content" role="main">
    <?php
        get_template_part( 'template-parts/content', get_post_type() );
    ?>
    <header class="archive-header has-text-align-center header-footer-group">
        <div class="archive-header-inner section-inner medium">
            <h1 class="archive-title">
            <?php
                $item_count = $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->posts WHERE post_type='asp-products' AND post_status='publish'" );
                echo "<p>商品数： {$item_count}</p>";
            ?>
            </h1>
            <?php
                echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
                $items = $wpdb->get_col( "SELECT post_title FROM $wpdb->posts WHERE post_type='asp-products' AND post_status='publish'");
                foreach ( $items as $item ) {
                  echo '<ul><li>';
                  echo '<a href="https://codecamp.o-namae.com/asp-products/'.$item.'">'.$item.'</a>';
                  echo '</li></ul>';
                }
            ?>
            <?php get_template_part( 'template-parts/pagination' ); ?>
</main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>