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



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

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

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

目次
  1. [テンプレ付き]WordPress×Stripeでネットビジネスを始めよう
  2. Stripeとは
  3. Stripeのアカウント登録
  4. Stripeプラグインのセットアップ
  5. 商品の登録
  6. 商品を買う
  7. 商品の一覧表示
  8. まとめ

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

Stripeとは

image

stripe.comn

Stripeは、アメリカを拠点に世界36カ国に決済サービスを展開する企業で、従業員数 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のアカウント登録

image

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

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

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

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

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

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

image

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 で商品を登録する手順は、ブログを投稿する手順と同じ。

image

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

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

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

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

商品を買う

image

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

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

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

image

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

image

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

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

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

商品の一覧表示

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

image

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

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

image

上図ページリンク

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

<?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(); ?>

GitHub

利用方法: WordPressのテンプレート追加機能を使用。テンプレートの追加方法は こちら をご参考ください。

暫定的プログラムなため、商品ID とサムネイル画像の一致確認処理を行っていません。登録商品を削除した後などに画像表示がズレる可能性があります。

PHP とデータベースを学習中の方、もしくは学習済みの方であればわかると思いますが、要は必要な情報をデータベースからピックアップして利用しているだけ。カテゴリについては機能搭載していませんが、データベースのテーブル: wp_postmeta から必要な項目をセット&ピックアップすれば可能でしょう。

私もそうですが、もしプログラミングをやっていなかったら、 phpMyAdmin を開いてデータベースを確認して自分の欲求を満たそう、とは考えず、恐らく他のプラグインを探したりして時間を浪費していると思います。また条件にあうプラグインがなければ、機能実装を断念... というところでしょう。

尚、フルマックスで Stripe の機能を楽しもうと思いますと、やはり API の利用が必要に。その場合は、 Composer が必要になってきますので、レンタルサーバーではなく、VPS などのサーバーで WordPress を利用する必要が出てくるでしょう。

本稿でご紹介した内容を操作する様子です。テキストと合わせてご参照ください。

Webサイト制作スキルが身に付く

CodeCampの無料体験はこちら

まとめ

小規模決済を手っ取り早く採用しようと思うと、プラグインの Stripe Payments 良さそうですね。

ただ注意点としてはプラグインの更新が止まったとき。 Stripe 本体のバージョンはどんどん更新されるのにプラグインの処理が古いバージョンのままだとエラーが出て、決済が実行されなくなると思います。そうした意味で”大規模決済サイト”には不向きと考えられますね。

またプラグインに頼ると決済時の機能が限定的に。例えば API を使うと銀行振込や JCB、チャージが可能に。また商品一覧の部分でもご紹介したように柔軟に商品を取り扱おうと思うとデータベースの知識も欠かせません。

「チョット課金興味あるけど、PHP とか データベースは....」「今データベース勉強しているけど ....さっぱり...」 という方、プログラミングレッスンはすでにお済みでしょうか?

本や YouTube だけだと息詰まりやすいと重いますが、プロの方から教えてもらえればストレスフリーでスムーズです。プログラミングを嫌になる前に、一度 CodeCamp の体験レッスンをご検討ください。

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp