ブロックエディタのボタンブロックと WP Simple Pay の使用方法

ウェブサイトに合わせたボタンで、オンサイトオーバーレイ決済フォームやオフサイト Stripe Checkout フォームを起動したいと思ったことはありませんか？

このチュートリアルでは、WP Simple Pay でボタンブロックを設定して使用する方法を説明します。

支払いフォームの作成

まず、互換性のある決済フォームを作成する必要があります。単一のボタンから決済フォームを起動するという性質上、オーバーレイモーダルで開くように設定されたオンサイト決済フォーム、または追加フィールドのないオフサイト Stripe Checkout フォームのみが使用できます。

オフサイト Stripe Checkout フォーム

WP Simple Payの新規追加にアクセスし、支払いボタンの支払いフォームテンプレートを選択します。

次に、決済フォームビルダーの「Stripe Checkout」タブをクリックして、リダイレクトされたときにユーザーに表示されるStripe Checkout 機能をカスタマイズします。

「フォームフィールド」タブにフィールドを追加しないでください。オンサイトカスタムフォームフィールドは、ボタンブロックで使用できる決済ボタンを無効にします。

オンサイトオーバーレイモーダル決済フォーム

WP Simple Payの新規追加にアクセスし、支払いフォームの支払いフォームテンプレートを選択します。

次に、「オーバーレイモーダルで開く」にチェックを入れます。

ここから、必要に応じて決済フォームの「決済」設定を調整し、決済フォームを公開できます。

ボタンブロックの追加

ブロック互換の決済フォームを作成したら、ボタンブロックを追加して決済フォームを起動または Stripe Checkout にリダイレクトする準備ができました。ページ → 新規追加 にアクセスします。「+」アイコンをクリックして新しいブロックを挿入し、「ボタン」を検索します。

ここから、ボタンブロックの設定を必要に応じて調整できます。

決済フォームとボタンブロックの連携

ボタンブロックを挿入してカスタマイズしたら、作成した決済フォームまたは決済ボタンをリンクできます。ブロックの設定サイドバーで、「WP Simple Pay」パネルで使用したいフォームを選択します。

互換性のある決済フォームまたは決済ボタンを起動するために、どのボタンブロックでも使用できます。たとえば、価格表の列内のボタンを使用できます。