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

2022.10.232024.03.06

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

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

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

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

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

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

Stripeのアカウント作成

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

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

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

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

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

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

Stripe Paymentsの設定

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

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

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

一般設定

設定していきます。

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

一般設定

通貨　→　日本円に
今すぐ購入　→　データを購入する
ラストネーム（姓）を先にするにチェック
本番環境用の公開可能キーの入力
本番環境用のシークレットキーの入力
テスト環境用の公開可能キーの入力
テスト環境用のシークレットキーの入力

電子メール設定

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

電子メール設定

Stripe から領収書メール送信にチェック
購入後にお客様へメール送信にチェック
販売管理者へ売上通知メール送信にチェック

高度な設定

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

高度な設定

小数点以下の桁数を2→0に

Captcha 設定

不安であればGoogleのreCaptchaを入力しておきましょう。

設定は以上です。

商品の作成

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

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

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

商品情報

商品タイトルを記載　→　商品名
パーマリンクの修正　→　商品用パーマリンク
簡単な説明を記載　→　商品はPHPテンプレートデータです。
価格を設定　→　500
通貨を設定　→　日本円
ダウンロードURLを記載。→　Googleドライブ等のURL
ボタン CSSクラス　→　color: var(–color_text);　※ボタンの色変え

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

Stripe決済ボタンの設置

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

[asp_product id="12345"]

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

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

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

Stripe決済ボタンのカスタマイズ

/*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;
	}    
}