独自ショップでモナコイン決済!|4. WooCommerceとBTCPay Server

独自ショップでモナコイン決済! 独自ショップ

【独自ショップでモナコイン決済!】
1. BTCPay Server と Electrum-MONAの準備
2. WordPressのインストール
3. WordPressの初期設定
4. WooCommerceとBTCPay Server

プラグインとテーマをインストール

ようやくここからは、WordPressのブログを、【モナコイン決済ショップ】にするためにプラグインとテーマをインストール、設定していきます。

1. WooCommerceと親テーマのインストール

WordPressのダッシュボード(管理画面)にログイン、[プラグイン] → [新規追加] から[WooCommerce] を検索。インストールして有効化します。

WooCommerceとBTCPay Server

住所入力、アンケートなどの設定をしながら進みます。

▼設定はこちらを参考にさせていただきました

2020年度版:WooCommerceのインストールから設定、ECサイト開設を徹底解説
WooComerce バージョン4からインストール方法が変わりました。また設定も一部変わっています。最新のWooCommerceのインストールから、ECサイト構築までの設定を解説します。

設定の途中でテーマが選べます。今回は無料テーマの[Storefront]を選択。ここでは設定せず、子テーマを作って作成→有効化し、そちらで設定していきます。

▼子テーマの作成はこちらを参考にさせていただきました

WooCommerce : Storefront の子テーマを作成 - HomeMadeGarbage
Storefront の子テーマを作成しました。 Storefront の子テーマについて 公式サイトでおしゃれな子テーマも販売されています。 Storefront Themes – WooCommerce 無料のものもあるようです。 Boutique – WooCommer … "WooCommerce : Stor...

2. BTCPay for WooCommerceのインストール

次に[プラグイン] → [新規追加] から、[BTCPay for WooCommerce]を検索し、インストール → 有効化します。

BTCPay for WooCommerce… WooCommerceでBTC決済ができるようにする
https://ja.wordpress.org/plugins/btcpay-for-woocommerce/

WooCommerceとBTCPay Server

プラグインとテーマの設定

ここからは、ご紹介いただいた動画を参考に。

BTCPay – WooCommerce

1. BTCPay Serverの設定

もなこいにすた氏(@MONACOINISTA)のブログの手順で、BTCPay Serverの新しい[Store]を作成、Electrum-MONAと連携する、というところまでを済ませておきます

BTCPayServer(Monacoin)の初期設定から請求まで
スクリーンショットで説明

2. BTCPay for WooCommerceの設定

WordPressのダッシュボード(管理画面)にログイン、プラグイン→BTCPay for WooCommerceの[setting]から設定をしていきます。

WooCommerceとBTCPay Server

以下の部分を書き換え。

◆ Title:BitCoin → モナコイン または MonaCoin(決済方法の選択名となる)

◆ Customer Message:
You will be redirected to BTCPay to complete your purchase.
お支払いは「BTCPay」にリダイレクトされます(注意書きなので、このような日本語を追加すると親切?)

◆ API Token:
BTCPay URL(eg,https://your-bitpay.com/)
https://btcpay.electrum-mona.org/

Pairing Code: コードを入力 ※コードの取得方法は次の項目で

◆ Invoice pass to “confirmed” state after: 承認回数を選択
(推奨される数値教えてくださいえらい人!)

【PaintingCodeの取得】

BTCPay ServerのURLを入力すると、Get a pairing code: の横に、BTCPayトークンの取得ページへのリンクが出現します。

WooCommerceとBTCPay Server

ここをクリックすると、BTCPAYのサイトにジャンプしますので、StoreIdが設定したものになっているかを確認(複数あったら選択)し、他は何も触らず[Recuest pairing]

WooCommerceとBTCPay Server

次のページでも何も触らず[Approve]」

WooCommerceとBTCPay Server

次のページの一番上、緑の枠内に表示されたコードがPairing Codeです!

WooCommerceとBTCPay Server

WordPressに戻って、API Token:の2段目にこのPairing Codeを入力し、「Pair」を押すと…

WooCommerceとBTCPay Server

無事ペアリングされましたヽ(=´▽`=)ノ〜

WooCommerceとBTCPay Server

c. WooCommerceの設定

WordPressのダッシュボード(管理画面)から、WooCommerce → 設定 → 決済を確認すると…【BTCPay – MonaCoin】という支払い選択が追加され、ONになっています!

WooCommerceとBTCPay Server
WooCommerceのショップの設定は、最初の設定ウィザードから進めれば、特に難しい部分はありませんでしたが、細かい個別設定があるので、後から一つ一つ丁寧に確認したほうがよさそうです。

応用:DL専用にする

functions.phpの設定

ここまでで物販ストアはほぼ完成。でも、こちらはダウンロード専用ショップにしたいので、あともう少しカスタマイズしていきます。

決済時、カートに入れて進んでいくと…

WooCommerceとBTCPay Server

このように、お届け先のいらないダウンロード販売に必要ないことまで全部お聞きしてしまうことになります…。個人情報の管理のリスクを避ける、購入側もかんたん、というわけで。こちら↓を参考に、住所欄を消しました。

WooCommerce:決済画面の住所入力を非表示にする - HomeMadeGarbage
デジタルコンテンツ販売であるため、住所入力は必要無いと思い非表示にしました。 ※まず、Storefont の子テーマを作った上でカスタマイズします。 子テーマを作成した記事はこちらです: WooCommerce : Storefront の子テーマを作成 – WordPress &#82 … "WooCommerce:...

おかげさまで無事、HN欄とメアドだけに。

WooCommerceとBTCPay Server

動作確認

さあ!最後にどきどき動作確認です!商品を登録し、カートに入れて決済へ進むと…BTCPay Serverの決済画面が登場。
・表示されたQR
・ウォレットで開く
その他[コピー]のタブへ移ると
・直接アドレスの表示&コピー
もできるので、ユーザーの送金環境によって使い分けて送金できます。

WooCommerceとBTCPay Server

送金してみると…。

WooCommerceとBTCPay Server

大 成 功!!!ヽ(=´▽`=)ノ

肝心の商品ですが、この「戻る」ボタンから戻って表示されるマイページと、購入時に入力したメールアドレスに届くダウンロードリンクからダウンロードができます。

おまけ:アイコンを作ってみた

大変細かいところではありますが…モナコイン専用ショップなので、決済時表示されるこの「bitcoin」がなんだかややこしいんじゃないだろか?ということで…

WooCommerceとBTCPay Server

このアイコンをモナコインっぽくしました。どうでしょう?

WooCommerceとBTCPay Server

このアイコンは、
FTPでサーバーにアクセス。インストールしたWordPressのフォルダー内
→ wp-content
→ plugins
→ btcpay-for-woocommerce
→ assets
→ img
内の「icon.png」の差し替えで変えられます。

このファイルを一応ここに置いておきます。プラグインのライセンス上、推奨するものではありません。また、プラグインをアップデートしたときには差し替える必要がありますのでご注意ください。

あとは、
・ショップ案内
・プライバシーポリシー
・特定商取引法
などのページを作成、商品を登録して行く作業。

完成したサイトがこちら! ※実際に稼働中のショップです

GemBox Pro
暗号資産(仮想通貨)グッズと販促ツール
GeMona -モナコインでダウンロード-
モナコインのダウンロードショップ!

商品をアップするだけのモールとは違い、なかなか大変な作業ではありますが、WordPressを触ったことがあれば難しいものではありません。モナコイン販売をご検討中だった方、ぜひ挑戦してみてくださいヽ(=´▽`=)ノ

Special Thanks

このたび大変お世話になりました
Electrum-MONA・BTCPay Server(MonaCoin)管理の 脇P さま(@WakiyamaP
わかりやすい設定記事を書いてくださった もなこいにすた さま(@MONACOINISTA
自サイトに導入されていて、設定動画をご紹介くださった アポロさま(@hu_maple
導入経験あり、何でも聞いて!と言ってくださった 宇都宮さま(@utsu_monacoiner
本当にありがとうございました!

タイトルとURLをコピーしました