SeedProd ボタン & 価格表との連携方法

このドキュメントでは、SeedProdの価格表または単一ボタンを、WP Simple PayのオンサイトオーバーレイフォームおよびオフサイトStripe Checkoutページと連携させる方法を説明します。

WP Simple Payフォームの準備 + ショートコードの取得

このチュートリアルを完了するには、支払いフォームが既に作成されている必要があります。また、SeedProdボタンまたは価格表が準備されていることも前提とします。

このセットアップを完了するには、WP Simple Pay → 支払いフォームの管理画面からフォームのショートコードをコピーする必要があります。

SeedProdボタンとWP Simple Payの連携

SeedProd → ランディングページメニューで、連携したい価格表/ボタンのあるページを選択すると、ドラッグ＆ドロップエディタが読み込まれます。

次に、各価格表ボタンの下にショートコードブロックを追加します。ここでは、「シルバーパッケージ購入」ボタンを使用します。左側のリストからショートコードブロックを見つけ、適切なボタンの下にドラッグして配置します。

作成されたオレンジ色のハイライトエリアにあるショートコードを入力テキストをクリックします。これにより、ショートコードブロックエディタが開きます。

ショートコードのテキストエリアは最初は空白です。ここで、記事の冒頭でコピーしたショートコードを貼り付けます。ショートコードには、ここに表示されているものとは異なるID番号が含まれている可能性が高いです。

次に、次のコードをショートコードの下の新しい行にコピー＆ペーストします。

<script> 
( function( $ ) {
var ids = [ '24' ];

// Do not modify.
ids.forEach( function( id ) { $( 'a[href~="#form-' + id + '"]' ).click( function( e ) { e.preventDefault(); $( '.simpay-form-' + id + ' .simpay-payment-btn' ).click(); $( '#simpay-modal-control-' + id ).click(); }); });
})( jQuery );
</script>
<style> 
.simpay-form-wrap { display: none; } 
</style>

ショートコード内のID番号が、表示されているようにvar idsエリアに入力されていることを確認してください。

あと1ステップで完了です！

連携したい価格表ボタン（この例では「シルバーパッケージ購入」ボタン）をクリックすると、そのボタンの設定パネルが開きます。

ボタンリンクフィールドに#form-24を入力します。*下の例では、24をフォームのIDに置き換えてください。

完了したら、右上にある大きな緑色の保存ボタンをクリックします。

上記の手順を各価格表ボタンに対して繰り返したら、保存の右側にある下矢印をクリックし、公開を選択します。これで価格表が公開されました。

ボタンはWP Simple Payフォームを起動するように設定されています。