Stripe Card Payment Features in Power Pages
Power Pages is a fantastic software-as-a-service tool that allows users to create custom external-facing web applications and portals that will enable external parties to interact with their data and processes. This tool also requires little to no code and can be built using business data. It is important to know that this tool was previously called Power Apps Portal.
Since Power Pages allows organizations to build dynamic enterprise websites, there must be a way for your consumers, partners, or users to make payments. This payment could be for a subscription, a service fee, or even to make a purchase. To make this possible, Power Pages has a Stripe payment feature that supports payment from credit cards, debit cards, Apple Pay, and Google Pay.
Prerequisites
To follow along with this article, you will need to have:
- A Microsoft team account and Microsoft 365 license. You can apply for a free license under the Microsoft 365 Developer Program if you don't have one.
- Knowledge of Power Pages.
- A Stripe developer account.
How to Create Power Pages Using Microsoft Copilot
Before you can integrate Stripe into your Power Page website, you will need have a Power Pages site up and running.
Using Microsoft Copilot, you can easily create a Power Page site by simply describing what you want.
1. Navigate to make.powerpages.microsoft.com.
2. Describe the website you want to build. Once you hit Enter on your keyboard. The prompt gets sent, and Copilot will automatically generate the website.
When describing the website you want to build, it's crucial to be clear about its purpose. For example, you might say: “I want to create a website with a single page that displays various cooking recipes. When a user clicks on a recipe, they're taken to a payment page. There should also be a cancel or back button that allows users to return to the home page.” (see figure 1.) This level of detail helps Copilot understand your needs and generate a more accurate page.
3. Hit Enter on your keyboard to generate the site using your prompt.
4. Give your site a name.
5. Pick a layout you like (figure 2), and select Create.
6. You can style your site by making modifications and deleting any elements you don't want.
7. Click on the Action button, then click Edit to link your call to action button to your Subscribe to our plan. The Subscribe to our plan page represents your payment page.
8. Navigate to the Subscribe to our plan page and make any style changes you want.
You can view your test cooking recipe website at Cooking Recipes.powerapps portals.com.
How to Install the Stripe Package for Your Power Pages – Stripe Integration
Before you get started, you will need to install the Power Pages – Stripe Integration package.
- Navigate to the Set up section in the design studio.
- Select External app (preview) (see figure 4).
- Click Install (in the Actions column) to start the Stripe integration. This enables digital payments.
4. Go to your Stripe developer dashboard. Here, you will find your Publishable and Secret Keys.
5. Head back to Power Page Design Studio.
6. Click manage and enter your Publishable and Secret keys.
7. Click Save.
8. Click on the Sync button.
Are you curious to know how this works? Head to the Solution section of make.powerapps.com. Here, you will see that the three underlying solutions were installed (figure 5).
- Power Pages Encrypted Settings V2
- Power Pages Stripe Integration V2
- Power Pages Payments V2
How to Set up the Data Page for Your Power Apps - Stripe Integration
Now that you have a website and installed the package, you must set up the data page. It is important to note that Power Apps is PCI DSS Compliant. This means it doesn't store card details in Power Pages or the Dataverse. Rather, it uses the Stripe Web Elements payment integration approach.
1. Navigate to make.powerapps.com.
2. Select Table.
3. Click Create a blank table and enter the field of data you want (see figure 6). Note that one of your columns (the column that gets the cost) should be in the currency data format.
4. Ensure that your table has at least Create and Write permissions.
5. Click on Form under the Data experiences section to create a form. You will, however, need to create two forms: one for user details and the other for payment checkout.
6. Click New Main Form to create your form within the UI.
7. Save and Publish. You can add and remove any field you want to remove. The second form should be blank, and you should hide all elements.
8. Navigate back to make.powerpages.microsoft.com.
9. Go to the Subscribe to our plan page.
10. Click the Multi Step form to create a form.
11. Click Ok.
12. Click on Add a first step.
13. Give this step a name. You can call it Collect info.
14. Pick the table you created in Power Apps and the first form you made.
15. Click Ok.
16. Click on the Add step to set up the second step of the workflow.
17. Give this second step a name. You can call it Collect payment.
18. Pick the table you created in Power Apps and the second form you made as well.
19. Click Sync to sync all the configurations.
20. Click on the Step setting.
21. Click on App integration and toggle on the Enable digital payment feature (figure 8).
22. Select a currency value from the amount field.
23. Click Ok.
Power Pages will automatically generate a card payment form for users, as shown in figure 9.
How to Install the Stripe Package for Your Power Pages - Stripe Integration
We are dealing with payments here. Hence, it is important to ensure that your integration works.
1. Navigate to docs.stripe.com/testing to get some test credit cards.
2. Click on Preview in the make.powerpages.microsoft.com UI and input your test card’s details. A successful payment will include the amount paid and the transaction ID, which is provided by Stripe (figure 10).
You can view the test cooking recipe website at Cooking Recipes.powerapps portals.com.
3. Navigate back to your Stripe Developers account to view the logs and events (figure 11) of your payment status.
Give it a Try!
This article demonstrated how you can integrate Stripe into your Power Pages. You should follow the steps described in this article and practice. Build your own Power Page website and check out the Stripe integration.
Ifeanyi Benny Iheagwara
Ifeanyi Benny is an experienced data analyst and Power Platform developer with unique technical and functional expertise. He is also a technical writer and content creator with expertise in open source and tech community building. He works daily with his clients to help them gain insight and build and improve their workflows to be more productive. He also loves sharing knowledge as an educator across channels, international conferences, and user groups.