確認後にStripe購入ボタンを追加する

確認メッセージの後にStripeの購入ボタンを表示しますか？ WPFormsを使用すると、WordPressで支払いフォームを作成できます。ただし、作成したフォームはデフォルトのWPForms送信ボタンを使用します。カスタムPHPスニペットを使用すると、Stripeアカウントで作成した購入ボタンを表示するようにフォームをカスタマイズできます。

このチュートリアルでは、WPFormsにStripe購入ボタンを追加する方法を説明します。

フォームの作成

まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。フォームビルダーで、フィールドをフォームに追加します。例として、ボランティアを希望するユーザーの情報を収集するために、ボランティアサインアップフォームを作成します。

フォームのAJAXを無効にする

次のステップは、AJAXフォーム送信を無効にすることです。これを行うには、設定 » 一般に移動し、詳細設定をクリックして詳細設定を開きます。

ここに表示されたら、AJAXフォーム送信を有効にするオプションをオフに切り替えます。このステップは重要です。有効になっていると、ページがアクションを検出できなくなり、ボタンが表示されなくなります。

エントリープレビューを有効にする（オプション）

このチュートリアルでは、フォーム送信後にエントリープレビューを表示したいと思います。このステップを完了するには（これは完全にオプションです）、設定 » 確認に移動します。ここで、 確認メッセージの後にエントリープレビューを表示するオプションをオンの位置に切り替えます。

フォームを更新したら、必ず変更を保存してください。

スニペットの追加

これで、フォーム送信後にこのボタンを追加するスニペットを追加する時間です。スニペットをサイトに追加する方法と場所についてサポートが必要な場合は、このチュートリアルを確認してください。

/*
 * Add Stripe buy button embed code after form is submitted
 *
 * @link  https://wpforms.com/developers/how-to-add-a-stripe-buy-button-after-confirmation/
 */
     
   
function wpf_dev_add_stripe_embed_button(  $form_data, $fields, $entry_id ) {
      
    // Below, we restrict output to 3116
    // This ID will need to be updated
    if ( absint( $form_data[ 'id' ] ) !== 3116 ) {
        return;
    }
 
// Below starts the JavaScript needed to create your button
// Remember to replace the button ID and publishable key to match your own Stripe account
// https://stripe.com/docs/payment-links/buy-button
?>
 
<script async
  src="https://js.stripe.com/v3/buy-button.js">
</script>
 
<stripe-buy-button
  buy-button-id="buy_btn_unique_to_your_own_stripe_account"
  publishable-key="pk_test_vbMx6qBxSR49z9231ZNYVP7o00euSPrTfx"
>
</stripe-buy-button>
  
<?php
      
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_add_stripe_embed_button', 10, 3 );

上記の Сниппетには、ご自身のサイトに合わせて更新する必要があるものがいくつかあることに注意してください。3116をご自身のフォームIDに合わせて更新してください。フォームIDの検索方法については、こちらのチュートリアルをご覧ください。

また、上記の Сниппетのbuy-button-idとpulishable-keyを更新して、これらの支払いを受け取れるようにする必要があります。ボタンIDは、Stripeアカウントでカスタム購入ボタンを作成する際に自動的に生成されます。購入ボタンの作成方法については、Stripeのドキュメントを参照してください。

これで、フォームが送信されると、確認メッセージ、エントリープレビュー情報、および支払い/寄付のためにStripeにリンクするボタンが表示されます。

これで完了です！ WPFormsのフォーム確認にStripe購入ボタンを追加する方法を学びました。

次に、確認メッセージのスタイルも変更しますか？ 確認メッセージボックスのスタイルを削除する方法に関するチュートリアルをご覧ください。

関連

アクション参照: wpforms_frontend_output_success