演習 - Power Pages での支払フォームの構築とテスト

5 分

Power Pages で支払方法を統合する場合、フォームと、データを接続する関連テーブルが必要です。この演習では、支払方法を統合する際に何が必要かを理解するための新しいテーブルとフォームを作成します。この目的でテーブルとフォームが使用可能になっている場合は、それらを使用でき、マルチステップフォームの構築に進むことができます。

支払連絡先テーブルの作成

テーブルとフォームを作成する前に、これらのリソースをソリューションの内部で構築するのがベストプラクティスです。ソリューションは、環境間でカスタマイズ、アプリケーション、コンポーネント、およびコンフィギュレーションをグループ化、管理、および転送するために使用できるパッケージです。

Power Pages に移動して、Stripe 統合を行うために追加したテナントにサインインします。
左側のナビゲーションメニューから ソリューション を選択し、上部のメニューから + 新しいソリューション を選択します。
ソリューションに 支払をテスト などの名前を付け、割り当てられた公開元がない場合は既定の公開元を使用します。
支払をテスト ソリューションで、テーブルメニューから + 新規 を選択し、テーブル > テーブル (高度なプロパティ) を順に選択します。
右に開く 新しいテーブル パネルで、テーブルに 支払連絡先 と名前を付け、プライマリ列を名前とし、次に保存を選択します。
支払連絡先 テーブルに移動した後、上部のメニューから + 新規 を選択し、続いて列を選択します。
列に 支払額 と名前を付け、データ型に通貨を選択して、保存を選択します。

重要

マルチステップフォームで Stripe 統合を使用する場合、[通貨] 列が必要です。この列により、ユーザーに請求する料金が決定されます。 [通貨] 列がないと、統合が機能しません。
ユーザーの電子メールアドレスを追跡する、電子メール という名前の別の列を追加します。フォーマットとして メール を持つ 1 行テキスト データ型を使用します。

これで、支払連絡先テーブルの準備ができているはずです。次のセクションでは、このテーブルに関連付けられたフォームを構築し、ご使用の Power Pages Web サイトでそのフォームをマルチステップフォームに追加します。

テーブルのフォームの変更

支払連絡先テーブルをサイトのマルチステップフォームに関連付ける場合、その支払連絡先テーブルに関連付けられたフォームを選択する必要があります。新しいテーブルに関連付けられた標準フォームでは、ユーザーが入力するすべての情報が表示されない場合があります。この問題を解決するためには、既存の メイン情報 フォームに列を追加する必要があります。

支払連絡先テーブルから、データエクスペリエンス セクションで フォーム を選択します。
フォーム ページで、フォームタイプが メイン の情報フォームを選択し、上部のメニューから編集を選択します。
開いた 新しい支払連絡先 フォームエディターで、一覧から名前を選択することで、左側の テーブル列 ペインから次の列を追加します。
- メール
- 支払額
注

支払額を選択する場合は、必ず支払額列の WITHOUT (基準) を使用してください。また、必要に応じて 所有者 を非表示にすると、フォームの読みやすさが向上する可能性があります。
フォームエディターの右上にある 保存して公開 を選択します。

これで、支払を行うユーザー用に設定されたテーブルとフォームができました。次のセクションでは、これらのリソースを Power Pages サイトのマルチステップフォームに統合します。

マルチステップフォームコンポーネントの作成

フォームもテーブルに直接関連付けられますが、Power Pages デザインスタジオでカスタムフォームを作成できます。次のセクションでは、マルチステップフォームを作成し、それを Stripe と統合する方法を説明します。

まず、Power Pages ホームページから Power Pages サイトを編集して、デザインスタジオにアクセスします。
フォームの表示が必要なページに移動するか、+ ページ を選択して空白のページを追加します。
ご使用のページの + セクションを追加 エリアで、コンポーネントを選択します メニューの下にある マルチステップフォーム を選択して、新しいマルチステップフォームを作成します。
マルチステップフォームを追加 ウィンドウが開いた場合は、+ 新しいマルチステップフォーム を選択します。
フォームに支払のような名前を付けてから、完了を選択してフォームを作成します。
作成したフォーム領域で、+ 最初のステップを追加する を選択して、フォームの最初のステップを追加します。
開く ステップを追加 ウィンドウで、ステップに 情報を収集 という名前を付け、前に作成した 支払連絡先 テーブルを選択します。 フォームの選択 の下で、情報を選択し、OK を選択します。

注

情報フォームは、選択した名前フィールド、メール フィールド、および 支払額 フィールドで前に編集したのと同じ メイン フォームです。 所有者 フィールドを非表示にした場合、マルチステップフォームには表示されません。
フォームの上部にある + ステップを追加 を選択します。
開いた ステップを追加 ウィンドウで、ステップに支払と名付けます。前のステップで使用したのと同じ 支払連絡先 テーブルと情報フォームを選択し、OK をクリックします。
フォームのステップ 2/2 の途中で、ステップ設定 を選択します。
左のナビゲーションウィンドウから アプリ統合 に移動し、デジタル決済を有効にする の横にあるトグルスイッチを選択して、Stripe 統合をオンにします。 金額フィールドを選択 で 支払額 を選択し、OK を選択してフォームを完成します。

これで、名前、メール、および 支払額 にユーザー入力が必要な 1 ステップがある完全なマルチステップフォームができました。その次のステップでは、入力されたユーザー入力と、添付された支払フォームが表示されます。価格の金額も、支払額 フィールドに結び付けられているはずです。
ユーザーがフォームを表示し、それをテストするには、フォームのアクセス許可を変更する必要があります。そのためには、フォームの上部にある + 新しいアクセス許可 を選択します。
右に開く 新しいテーブルのアクセス許可 ペインで、次のフィールドが自動的に入力されることを確認します。
- テーブル - 支払連絡先
- アクセスの種類 - グローバルアクセス
- アクセス許可
  - 読み取り
  - 作成
新しいテーブルのアクセス許可 ペインの下部で + ロールの追加 を選択します。 管理者 および 認証されたユーザー のロールを選択し、次に保存を選択します。
デザインスタジオの右上隅にある同期を選択し、プレビュー > デスクトップ を選択してページをプレビューします。

フォームのプレビュー中に、Web ページの設定によっては 適切なアクセス許可がありません というメッセージが表示されることがあります。フォームを表示するには、Web サイトにサインインする必要があります。

Web サイトが Power Pages テンプレートの 1 つを使用している場合、次の手順を実行します。
1. Web サイトの右上隅で、サインインを選択します。
2. 外部アカウントでサインインする の下で Microsoft Entra ID を選択します。テナントにサインインし、アクセス許可の要求を受け入れる。
3. 前にサイトにサインインしていない場合、情報を入力し、保存を選択して、支払フォームに戻ります。

フォームが表示され、次のスクリーンショットのようになります。

次のセクションでは、使用できるテストカード番号を含む "Stripe" フォームでのテストオプションについて説明します。

フォームをテストする

Power Pages サイトで Stripe 支払のテスト中、Stripe はユーザーが使用できるテストカードのセットを提供します。一覧はまた、カードのブランドに関連付けられた PaymentMethod ID と Token ID を提供します。完全な一覧については、「テストカード」を参照してください。

テストの方法は単純であり、一覧からカードを選択し、通常の支払方法と同様にサイトのフォームに情報を入力する必要があります。

デザインスタジオのプレビュー機能から支払フォームに移動し、記憶しておいた情報を名前フィールドと メール フィールドに入力します。フォームの 情報を収集 ステップにあることを確認してください。

注

入力する情報はテストのみを目的としており、実際のメールアドレスに関連付けられた実名である必要はありません
支払額 に対しては、任意の数値を入力してから、次へを選択します。

注

この数値の制限は、個々の列の設定に依存します。通貨列を設定すると、値の制限を変更するオプションが表示されます。通貨のタイプを指定できます。

[次へ] を選択すると、フォームの支払ステップに移動します。このステップでは、Stripe のドキュメントからのテストカード番号を入力します。
カード を選択し、任意のテストカードを入力します。フォームの下部で 今すぐ支払う を選択し、プロセスを完了します。有効期限には将来の日付を指定できます。セキュリティコードは 3 桁で、郵便番号は 5 桁です。

注

ここで、情報を収集 ステップから提供した情報が支払ステップの上部に表示されますが、ここでは 読み取り専用 モードになっています。
支払を確認すると、トランザクションの名前、メール、支払額、および トランザクション ID を表示する概要ビューが表示されます。

支払が正常に行われたことを内部的に確認するために、支払連絡先 テーブルでレコードを見ることができます。

Stripe で確認するには、トランザクション ページに移動します。ここでは、トランザクションが成功として表示され、説明の下にトランザクション ID が表示されます。

次の手順

ここで支払フォームの開発とテストを練習したので、この知識を会社のデータや個人のデータ、ユースケースに統合できるようになりました。

テストから本稼働キーに切り替える場合、API キーを格納するときに Azure Key Vault を使用する必要があると理解していることが重要です。 Dataverse ストレージは、本稼働キーを使用する支払統合では承認されません。 Azure Key Vault にキーを追加するには、次の手順に従います。

Azure の アプリ登録 ページからアプリの名前を取得します。 Azure portal のアプリの名前は、Portals- という接頭辞を持つサイトの名前です。サイト名が Contoso Coffee の場合、Azure portal のアプリ名は Portals-Contoso Coffee になります。
Azure portal の Key Vaults に移動し、新しい Key Vault を作成するか、既存の Key Vault を使用します。
新しい Key Vault を作成する際に、アクセス許可モデルを選択する必要があります。 Azure のロールベースのアクセス制御または Key Vault のアクセスポリシーを選択できます。
Stripe 制限キーを Key Vault のシークレットとして追加します。 Azure Key Vaultでシークレットを作成する方法の詳細については、「Azure portal を使用して Azure Key Vault との間でシークレットの設定と取得を行う」を参照してください。

フィードバック

このページはお役に立ちましたか?