WordPress│有料コンテンツを販売する方法│Stripe

WordPressにはECサイトのような物販サイトを作るWoocommerceがありますが、もう少しシンプルな有料記事を作りたくなることはないでしょうか？

実はStripeの決済システムが使えるプラグイン「Accept Stripe Payments」というものがあり、簡単に有料記事化することができます。

ちなみに気になる手数料ですが3.6%です。noteやBrainなどよりもはるかに安い手数料です。

あわせて読みたい

料金体系と手数料 Stripeは初期費用・運用コスト0円｜利用料は決済手数料のみで導入可能なオンライン決済プラットフォームです。お客様の状況に合わせたプランのご提案も可能です。

本記事はその備忘録です。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

Accept Stripe Paymentsで有料コンテンツを販売する方法

クレジットの決済ができるようするためにはしっかり手順を踏む必要があります。

以下、わかりやすく解説します。

Stripeのアカウント作成

まずは決済システムのStripeのアカウントを作りましょう。

下記のリンクからアカウントを作成できます。

Stripeのアカウント作成後、管理画面が表示されます。

またWordPressプラグインと連携するためのキーが表示されていますのでメモしておきましょう。

• 公開可能キー
• シークレットキー

そしてテスト環境にチェックをいれると、キーが変更されます。

こちらもメモしておきましょう。

• 公開可能キー
• シークレットキー

合計4つのキーをのちほど設定します。

Accept Stripe Paymentsのプラグインをインストール

続いてWordPress側の設定をしていきます。

管理画面のプラグインから「Accept Stripe Payments」で検索。

プラグインをインストールしましょう。

Stripe Paymentsの設定

Accept Stripe Paymentsのインストール後、管理画面に専用メニューが表示されます。

設定メニューから、各種設定をしてきましょう。

変更する箇所だけ解説します。

一般設定

設定していきます。

キーは先の項目でメモしたキーを入力しましょう。

電子メール設定

メールを残しておくことは重要です。

高度な設定

価格の桁数は見やすくしましょう。

Captcha 設定

設定は以上です。

商品の作成

管理画面のメニューからAdd New Productを選択します。

今回はWordPressカスタマイズの商品でPHPのテンプレートをひとつ作成してみます。

入力した箇所は以下の通り。

最後に記事の右側に表示されている商品のショートコードをメモしておきましょう。

Stripe決済ボタンの設置

新規に投稿記事を作成して、先ほどメモしたショートコードを記載します。

[asp_product id="12345"]

すると下記のような商品タイトルと価格、ボタンが表示されます。

このままだと見た目が微妙なので少しCSSを追加します。

※結構、上書きして無理やり修正しているので、商品タイトルが長すぎる場合は見た目がくずれますので注意。

/*Stripe決済ボタン*/
.asp_price_container {
    text-align: center;
    font-size: 25px;
}
.asp_product_name {
	font-size: 16px!important;
    line-height: inherit!important;
}
.asp_product_item {
	padding: 24px!important;
	margin: 20px auto;
    text-align: center;
    background-color: #fff;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
	border-radius: 16px;
	position:relative;
}
.asp_price_container {
    text-align: right;
    right: 23px;
    float: right;
    font-size: 25px;
    position: absolute;
    bottom: 82px;
}
.asp_product_description {
    border-bottom: 1px solid var(--color_main);
}
.asp_product_buy_btn_container button {
    display: inline-block;
    min-width: 75%;
	border: 0;
    margin: 0;
    border-radius: 80px;
    padding: .4em 2.5em;
    font-size: 16px;
    text-shadow: none!important;
    color: #fff!important;
    letter-spacing: 1px;
    text-decoration: none!important;
    background: var(--color_main)!important;
    box-shadow: 0 2px 2px rgb(0 0 0 / 10%), 0 4px 8px -4px rgb(0 0 0 / 20%)!important;
}
.asp_product_buy_button {
	position: relative;
	top: 4px;
}	
.asp_product_buy_btn span {
    position: relative;
    top: -4px;
}
@media (max-width: 768px) {
	.asp_price_container {
		bottom: 97px;
	}
	.asp_product_name {
		width: 77%;
		text-align: left;
		min-height: 41px;
	}    
}

Stripe決済テスト

テスト決済をしてみましょう。

固定記事に商品のショートコードを記載しておきましょう。

あとはボタンを押して決済のテストをします。

設定の本番環境モードにチェックが入っていなければ、決済はされません。

Stripeのテスト決済についての公式ドキュメント

あわせて読みたい

Test card numbers 実際に資金を移動することなく、Stripe の実装を検証するには、テストカードを使用します。支払いの成功と拒否、カードエラー、不審請求の請求、銀行認証など、さまざまな…

公式ドキュメントから、たとえば日本のVISAのクレジットカードの決済をシュミュレーションする場合は下記の番号を利用します。

テスト用の決済の情報を入力します。

決済が成功してCheckout-Result画面が表示されれば成功です。

見た目の修正版（少しだけ）

.asp-thank-you-page-msg-wrap {
    background: #fff!important;
    border: 0px solid #C9DEC1!important;
}

またメールアドレスにも決済された時のメールが届いているのを確認しましょう。

本番環境に変更する

テスト決済が完了したら、本番に移行しましょう。

設定から本番環境モードにチェックを入れます。

以上でWordPressにStripeの決済を導入できました。

まとめ

Stripeのプラグインにはアドオンも付いていて、Paypal決済などの拡張も可能です。

またブロガーが増えている昨今、コンテンツを盗む人も増えています。

その対策として有料コンテンツは有効手段の一つです。

気になる方は是非試してみてください。