Exercise - Build and test a payment form in Power Pages
When integrating payment methods in Power Pages, you need a form and an associated table to connect the data to. For this exercise, you create a new table and form to give you an idea of what you need when integrating payment methods. If you already have tables and forms available for this purpose, you can use them and then skip to building the multistep form.
Create a payment contact table
Before you create tables and forms, it's a best practice to build these resources inside a solution. A solution is a package that you can use to group, manage, and transport customizations, applications, components, and configurations between environments.
Go to Power Pages and sign in to the tenant that you added Stripe integrations to.
Select Solutions from the left navigation menu and then select + New solution from the upper menu.
Name the solution Test payments (or something similar) and then use the default publisher if you don't have an assigned publisher.
In the Test payments solution, select + New from the table menu and then select Table > Table (advanced properties).
In the New table pane that opens to the right, name the table Payment contact, keep the primary column as Name, and then select Save.
After going to the Payment contact table, select + New from the upper menu and then select Column.
Name the column Payment amount, select Currency for the data type, and then select Save.
Important
When using Stripe integration on a multistep form, you need a currency column. This column determines how much to charge the user. If you don't have a currency column, the integration won't work.
Add another column named Email that tracks the user's email address. Use the Single line of text data type with Email as the format.
You should now have a payment contact table ready to go. In the next section, you build out the form that’s associated with this table and then add it to a multistep form on your Power Pages website.
Modify the table's form
When associating the payment contact table with the multistep form on your site, you need to select a form that's associated with the payment contact table. The standard form that’s associated with new tables might not have all the information that you want users to fill out. To fix this issue, you need to add columns to the existing Main Information form.
From the payment contact table, select Forms under Data experiences.
On the Forms page, select the Information form with the form type of Main and then select Edit from the upper menu.
In the New Payment contact form editor that opens, add the following columns from the Table columns pane to the left by selecting their name from the list:
- Payment amount
Note
When choosing a payment amount, make sure that you use the payment amount column WITHOUT (base). Also, optionally hiding the Owner could be beneficial in helping with your form's readability.
Select Save and publish in the upper right of the form editor.
You should now have a table and a form set up for people to use to make payments. In the next section, you integrate these resources into a multistep form on your Power Pages site.
Create a multistep form component
Though forms are also directly associated with tables, you can build custom forms in the Power Pages design studio. The following sections teach you how to build a multistep form and integrate it with Stripe.
Start by editing your Power Pages site from the Power Pages home page to get to the design studio.
Go to the page that you want the form on, or select + Page to add a blank page.
In the + Add a section area of your page, select Multistep form under the Choose a component menu to create a new multistep form.
If an Add a multistep form window opens, select + New Multistep form.
Name the form something similar to Payment and then select Done to create the form.
In the created form area, select + Add the first step to add the first step of your form.
In the Add step window that opens, name the step Collect information and then select the Payment contact table that you previously created. Under Select a form, select Information and then select OK.
Note
The Information form is the same Main form that you previously edited with the Name, Email, and Payment amount fields selected. If you hid the Owner field, it shouldn't display on the multistep form.
Select + Add step in the upper part of the form.
In the Add step window that opens, name the step Payment. Select the same Payment contact table and Information form that you used in the previous step and then select OK.
While still on step 2/2 of the form, select Step settings.
Go to App integrations from the left navigation window and select the toggle switch next to Enable digital payments to turn on Stripe integration. Select Payment amount for the Choose amount field and then select OK to complete the form.
You should now have a complete multistep form with one step requiring user input for Name, Email, and Payment amount, and the next step displaying the provided user inputs and an attached payment form. The price amount should also be tied to the Payment amount field.
For users to view the form and for you to test it, you need to modify the form's permissions. To do so, select + New permission in the upper part of the form.
In the New table permission pane that opens to the right, make sure that the following fields are autofilled:
- Table - Payment contact
- Access type - Global access
- Permission to
- Read
- Create
Select + Add roles in the lower part of the New table permission pane. Select the Administrators and Authenticated Users roles and then select Save.
Select Sync in the upper-right corner of the design studio and then select Preview > Desktop to preview the page.
When you’re previewing the form, depending on how your webpage is set up, you might notice the You don't have the appropriate permissions message. To view the form, you need to sign in to the website.
If your website uses one of the Power Pages templates, complete the following steps:
Select Sign in from the upper-right corner of the website.
Select Microsoft Entra ID under Sign in with an external account. Sign in to your tenant and accept the permission request.
If you haven't previously signed in to your site, enter your information, select Save, and then return to your payment form.
Your form should now be visible and should resemble the following screenshot.
The next section covers your testing options with the Stripe form, including test card numbers that you can use.
Test the form
When you’re testing Stripe payments on your Power Pages site, Stripe provides a set of test cards for you to use. The list also provides the card brand's associated PaymentMethod and Token IDs. For the full list, go to Test Cards.
The method of testing is simple and only requires you to pick a card from the list and then fill out your site's form, similar to how you would approach making a normal payment.
Go to your payment form from the design studio's preview function, and then enter information into the Name and Email fields that you remember. Make sure that you're on the Collect information step of the form.
Note
The information that you enter is for testing purposes only; it doesn't need to be a real name that’s associated with a real email address
For Payment amount, enter any number and then select Next.
Note
The limits of this number are dependent on the individual column's settings. When you set up a currency column, you're given the option to modify the value limits. You can also designate the type of currency.
After you select next, the system takes you to the Payment step of the form. This step is where you enter a test card number from Stripe's documentation.
Select Card and then enter any of the test cards. Select Pay Now in the lower part of the form to complete the process. The expiration date can be any future date, the security code can be any three digits, and the ZIP code can be any five digits.
Note
The information that you provided from the Collect information step should now display in the upper part of the Payment step, but in Read-only mode.
After you confirm the payment, the system takes you to a summary view that displays the Name, Email, Payment amount, and transaction ID of the transaction.
To confirm that the payment was a success internally, you can look at the records in your Payment contact table.
To confirm in Stripe, go to the Transactions page, where your transaction should display as Succeeded with the transaction ID under Description.
Next steps
Now that you have practice in developing and testing a payment form, you should be able to integrate this knowledge with your own company or personal data and use cases.
When switching from test to live keys, it's important to know that you need to use the Azure Key Vault when storing your API keys. Dataverse storage isn't accepted for payment integrations with live keys. Follow these steps when adding your keys to Azure Key Vault:
Obtain the name of your app from the App registrations page in Azure. The name of the app in the Azure portal is your site's name with a Portals- prefix. If your site name is Contoso Coffee, then the app name in Azure portal would be Portals-Contoso Coffee.
Go to Key Vaults in the Azure portal and create a new key vault or use an existing one.
While creating a new key vault, you need to choose a permission model. You can choose Azure role-based access control or a Key Vault access policy.
Add your Stripe restricted key as a secret to the key vault. For more information about how to create a secret in Azure Key Vault, go to Set and retrieve a secret from Azure Key Vault using the Azure portal.