【WordPress】個人で始めるサブスクリプション（定額課金）・ビジネス

個人で始めるサブスクリプション・ビジネス（定額課金）

WordPressに定額課金機能を実装する方法

WordPressに定額課金機能を実装する方法はいくつかあります。

• プラグインのStripeを使って（年間 $59.95）
• WooCommerceを使って（年間 $199）
• オリジナルプラグインの開発を依頼して（開発委託費用）
• Stirpe Checkoutを使って（停止中？）
• Stripe APIを使って（無料）

ドメインにサーバー代と、個人で Web を維持していくのが大変なところに、プラグインを使うためにもお金がかかるって少ししんどいですよね。

そこで今回は少々手間にはなりますが、 無料で使えるStripe API を使って定額課金機能を WordPress にセットしたいと思います。

尚、本稿を作成する１週間ほど前は Stripe Checkout という機能が無料で使えていましたが、現在は❌。（Stripe Checkoutは、数行の HTML&JavaScriptコードで決済処理できる機能）　発展途上サービスなため今後も仕様が変わるかも知れませんが、基本を抑えていれば対応可能でしょう。

Stripeは、アメリカを拠点に世界36カ国対象に決済サービスを展開する企業。従業員数 2,000名以上で企業価値は 3兆 5,000億円以上とも言われてます。（非上場企業）

WordPressで定額課金する前の準備

今回の 「WordPress + 定額課金」 は、レンタルサーバー上で Stripe API を使って処理を実行していきます。そのための実行環境は以下の通り。

• レンタルサーバー（今回は VALUE SERVER）
• https に対応したドメイン
• WordPress本体
• レンタルサーバーへの Composer セット
• 課金対象の商品
• Stripe ライブラリ
• Stripe アカウント
• Stripe で決済処理を行うためのプログラム

レンタルサーバーへの WordPress 本体セットについては、ネット検索すればたくさんのドキュメントがありますので割愛させて頂きます。

「レンタルサーバーへのComposerセット」と「Stripeライブラリ」については、こちらの動画もしくは CodeCampus記事『コスパ最高？レンタルサーバーにPHPの開発環境Composerをセットしてみよう』をご参照ください。

本稿では主に「Stripeで決済処理を行うためのプログラム」についてご紹介させて頂きます。

下図のようにレンタルサーバー上に WordPress と Composer がセットされていることをご確認願います。

レンタルサーバー内のデータ

レンタルサーバーの Composer 状況、Stripe API のライブラリをインストール済み

Stripe ライブラリのインストール　 composer require stripe/stripe-php

WordPressのトップ画面の初期状態

Stripe 管理画面、商品登録した後の様子（https://dashboard.stripe.com/test/products）

WordPressでformタグを使う方法

さて WordPress の課金準備が整ったところで、まずは WordPress 内でデータを処理する方法（ POST & GET ）を確認。少しずつ PHP のデータ処理に頭を慣らしていきましょう。

• テンプレート内で PHP を実行
• 別途 PHP ファイルを作成して PHP を実行

WordPress内でデータの受け渡しを処理する方法

今回は処理を柔軟に実行でき、管理しやすい後者の「PHPファイルを作成して」を選択。 PHP で処理する場合の流れは以下のように。

まずは WordPress でサンプルの固定ページを作成し、以下の HTML コードを 「フォーマット -> カスタムHTML」 で入力＆公開。

<form action="https://sugukesu.o-namae.com/wp-form-test.php" method="post">
    <input type="text" name="name" placeholder="お名前">
    <button type="submit">送信</button>
</form>

**
一行目の URL はデータ送信先のファイル名になります。
適当に変更してご利用ください。

そして送信データを処理するファイル（プログラム）を作成。

ファイル名　wp-form-test.php
保存先　index.php と同じディレクトリ

<?php
  echo '--- form test start ---';
  $name = $_POST['name'];
  //echo $name."\n";
  echo htmlspecialchars($name);
  echo gettype($name);
?>

そして固定ページにアクセスして、名前を入力＆送信すると、入力内容が反映されていることが確認できます（下図参照）。

PHPの基礎では formメソッドを処理する時、

$POST['name'];

と書いていたと思いますが、WordPressの場合は

$_POST['name'];

と POST の前に _アンダーバー をつける必要があります。

これで WordPress 内のデータを処理できること確認できましたので、あとは実際にユーザーさんが入力した名前やメールアドレス、カード情報を処理できるように PHP を作成すれば OK。

WordPressに定額課金機能を実装する方法

まず今回ご紹介する Stripe の定額課金処理は ”一つの例” としてご参照ください。 Stripe の公式ドキュメントをみますと...結構難しく、また公式ドキュメントとサンプル紹介の GitHub 上のコードが違うため困惑します。今回ご紹介する処理とプログラムは、公式ドキュメントを読んで、エラーハンドリングして私が独自に作成したもの。ご自身の責任においてご利用くださいね。

さて先ほどまでのプログラムで、入力内容を処理するところまで実行できました。 Stripe の課金を実行するためには、上記で紹介した PHP プログラム意外にカード情報を検証するための JavaScript が必要。

【WordPressで Stripe API を処理するために必要なファイル群】

• JavaScriptファイル
• CSSファイル
• PHPファイル
• 決済完了のページ

【各ファイルをセットした様子（少し縦長のが画像です）】

注意点としては、決済処理を行う PHPファイル（subsc_charge.php）の保存ディレクトリ。決済処理を行う中で Composer の Vendor フォルダを使いますので、できれば Vendor フォルダとディレクトリを揃えた方がシンプル。

あとの JavaScript ファイルや CSSファイルは適当で、決済完了ページ（thanks.php）は wp-content/themes/twentytwenty/thanks.php ディレクトリに保存。これは決済実行時の情報を完了ページで受け取りたいため。尚、本稿では必要最低限の決済情報（ID）のみを受け渡しています。

それでは各ファイルのプログラムについて少しご紹介させて頂きます。尚、style.css については下記コードをコピペし、お好みで値を変えて使ってみてください。

.StripeElement {
    background-color: white;
    width: 100%;
    height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #fa755a;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    margin: 0.2rem;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}
.form-row input{
    margin: 1rem 0;
}
form button{
    margin: 1rem 0;
}

// Create a Stripe client
var stripe = Stripe('pk_test_hYDzU1uc1bV4kG7LDRfJA4DZ007PlIMzm5');¥

// Create an instance of Elements
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Style button with BS
//document.querySelector('#payment-form button').classList =
//  'btn btn-primary btn-block mt-4';

// Create an instance of the card Element
var card = elements.create('card', { style: style });

// Add an instance of the card Element into the `card-element` 
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
});

function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

上図は JavaScript のコード、役目としては入力されるカード入力情報を検証し、決済処理の PHP プログラムに顧客情報を渡します。公式ドキュメントや GitHub（Stripe） とは少し異なる処理ですが、問題ないでしょう。 JavaScript の実行結果として、最終的にこの決済固有のトークンを発行します。

入力されたカード情報などを”トークン”に変換することでセキュアな決済を実現していますね。

赤線部分をパブリックキーに変えてご利用ください。キーについては Stripe のダッシュボードより確認できます。

<?php
  require_once('vendor/autoload.php');
  //echo '1-';
  \Stripe\Stripe::setApiKey('sk_test_yhtn1Zf4hN6nawNnENMJY2Uz00yZGfuFQS');
  //echo '2-';
  $name = $_POST['name'];
  $email = $_POST['email'];
  $token = $_POST['stripeToken'];
  //echo $name."\n";
  //echo $email."\n";
  //echo $token;

 // Create Customer In Stripe
 $customer = \Stripe\Customer::create(array(
   "name" => $name,
   "email" => $email,
   "source" => $token
 ));
 //echo '3-';

// $subsc = \Stripe\Subscription::create([
$subsc = \Stripe\Subscription::create([
    "customer" => $customer->id,
    //"email" => $customer->email,
    //"name" => $customer->name,

    //'price' => 'price_HJL8sVu1YpBPcc',
    'items' => [['price' => 'price_HJL8sVu1YpBPcc']],
    //'items' => [['plan' => 'price_HJL8sVu1YpBPcc']],
  ]);


// Customer Data
$customerData = [
    'id' => $subsc->customer,
    'name' => $name,
    'email' => $email
  ];
  
  // Transaction Data
  $transactionData = [
    'id' => $subsc->id,
    'customer_id' => $subsc->customer,
    'product' => $subsc->description,
    'status' => $subsc->status,
  ];
  
  // Redirect to success
//  header('Location: success_subsc.php?tid='.$subsc->id.'&product='.$subsc->description);
//header('Location: ' . $_SERVER['HTTP_REFERER']);  前のページ
header('Location: https://sugukesu.o-namae.com/%e3%81%82%e3%82%8a%e3%81%8c%e3%81%a8%e3%81%86%e3%81%94%e3%81%96%e3%81%84%e3%81%be%e3%81%99/?tid='.$subsc->id);

こちらはユーザーが入力した顧客情報やカード情報を処理する PHP プログラム。必要最低限の情報で決済処理を実行しています。赤線部分をシークレットキーと商品の APP ID （下図参照）に書き換えてご利用ください。

商品の内容も PHP で制御できますが、今回は Stripe 管理画面で作成したものをセット。商品価格や課金サイクルを Stripe 管理画面で制御するとプログラムがシンプルに済む反面、複数のアイテムを管理するようになると少し不便に感じるかも。

そして上図では途切れているのですが、最終的に header('Location: で 「固定ページ：ありがとうございました」 に飛ばします。この時決済 ID を移動先に持っていきます。

<?php
/**
 * The template for displaying single posts and pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 * Template Name: thank you
 * Template Post Type: page
 */

get_header();
?>

<main id="site-content" role="main">

  <?php
    if(!empty($_GET['tid'] )) {
      $GET = filter_var_array($_GET, FILTER_SANITIZE_STRING);

      $tid = $GET['tid'];
    } else {
      header('Location: https://sugukesu.o-namae.com/error/');
    }
  ?>

    <header class="entry-header has-text-align-center header-footer-group">
      <div class="entry-header-inner section-inner medium">
        <h1 class="entry-title"><?php the_title(); ?></h1>
      </div>
    </header>
    <div class="post-inner thin ">
      <div class="entry-content">

        <p>ご登録内容</p>
        <ul>
            <li>購入商品： メルマガ</li>
            <li>ご購入価格： 300 円</li>
          <li>お取引 ID: <?php echo $tid; ?></li>
          <li>メルマガday： 毎月15日</li>
        </ul>
        <p>初回メルマガ送信までしばらくお待ちください。</p>
        <hr>
        <p><a href="index.php" class="btn btn-light mt-2">もどる</a></p>
      </div>
    </div>

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

こちらは「固定ページ：ありがとうございました」で使用する固定ページ用オリジナルテンプレート。処理がうまくいかなかった時用の エラーページ URL を確認しておきましょう。

上図は今回使用する固定ページ一覧。そして実際に課金申し込みしてもらう「メルマガサービス」のページは下記のように。

固定ページの編集画面でブロック追加 --> フォーマット --> カスタムHTML を選択。そして下記のような HTML コードを追加。

【ブロック１】
<link rel="stylesheet" href="https://sugukesu.o-namae.com/stripe_css/style.css">
<form action="https://sugukesu.o-namae.com/subsc_charge.php" method="post" id="payment-form">
  <div class="form-row">
    <input type="text" name="name" class="form-control StripeElement StripeElement--empty" placeholder="お名前">
    <input type="email" name="email" class="form-control StripeElement StripeElement--empty" placeholder="メールアドレス">
    <div id="card-element" class="form-control"></div>
    <div id="card-errors" role="alert"></div>
  </div>
  <button type="submit">申し込む（テスト）</button> <br>
  <small>課金テスト用のため、実際にはメール配信されません </small>
</form>

【ブロック２】
<script src="https://js.stripe.com/v3/"></script>
<script src="https://sugukesu.o-namae.com/stripe_js/script.js"></script>

まずブロックを2つに分けている理由は、上記コードを 1つのブロック内に記述すると WordPress 側が不要な閉じタグを要求するため。

またメルマガの申し込みフォームは、 <form> タグ内に記述されている内容で、今回は ”名前” と ”メールアドレス”、”カード情報” と必要最低限のもの。 入力データを送信する URL を変更して利用しましょう。

そして最後に決済が完了した時の Thank You 画面。右サイドバーのテンプレート部分を上図のように変更して、決済処理を完了しましょう。

はい、設定が少し長くなりましたが、これでセット完了なのでメルマガの固定ページを開いて実際にメルマガに申し込んでみましょう。下記のように「固定ページ：ありがとうございました」まで案内されれば OK ですね。

テスト用カード

4242424242424242 期限とCVCは適当

Sample Page https://stripe.o-namae.com

そして実際に課金されたかどうか Stripe の管理画面を開いて確認。

管理画面の「支払い」に登録内容が記載されていれば OK ですね。また支払いの詳細を確認するとユーザーとして登録されていることも確認できます。

実際のメルマガ運営については、Stripe から顧客リストを CSV で打ち出し一括送信するか、決済時の顧客情報をデータベースに保存し、PHPから送信するかのいずれかでしょう。

WordPressに定額課金をセットする様子の動画

本稿でご紹介させて頂いた内容を動画に収録してみました。本テキストと合わせてご参照ください。

• WordPressに入力フォームを追加する方法の動画
• WordPressに定額課金機能を追加する方法の動画

よくあるエラー

(index):1 Uncaught IntegrationError: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().
--->  
form タグのあとで　<script src="https://js.stripe.com/v3/"></script>　していますか？

script.js:48 Uncaught TypeError: Cannot read property 'addEventListener' of null
--->
Stripe API の公開キーとシークレットキーのペアが正しいですか？商品 ID なども正しいですか？

まとめ

WordPressのプラグインを利用するだけでなく、PHPやHTMLも使えると個人ビジネスの幅も広がります。 「個人ビジネスに興味はあるけれど技術的に不安」という方は、ぜひCodeCampへ！ 現役エンジニア講師陣があなたのビジネスチャンスを強力にバックアップしてくれますよ。

まずは無料体験でお試しください。