Stripe Card Payment Features in Power Pages

Power pages are amazing! Don’t miss out; complete your checkout!

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. This Stripe feature 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 to have a Power Pages site up and running.

You can easily create a Power page site using Microsoft Copilot by simply describing what you want.

1. Navigate into 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.

Figure 1: Building your website with copilot | Used with permission from Microsoft.

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.

Figure 2: The site layout customization view of Power Pages | Used with permission from Microsoft.

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 Subscription to our plan. The Subscribe to our plan page represents your payment page.

Figure 3: Customizing a button in Power Pages | Used with permission from Microsoft.

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.

1. Navigate to the Set up section in the design studio.

2. Select External app (preview) (see figure 4).

3. Click Install (in the Actions column) to start the Stripe integration. This enables digital payments.

Figure 4: Stripe integration in Power Pages | Used with permission from Microsoft.

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

Figure 5: This screenshot shows the various Power Pages solution installed after the Stripe integration in Power Pages | Used with permission from Microsoft.

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 Compliance. 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 your desired data field (see figure 6). Note that one of your columns (the column that gets the cost) should be in the currency data format.

Figure 6: Build out your table in Power Apps | Used with permission from Microsoft.

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.

Figure 7: Creating a form in Build out your table in Power Apps | Used with permission from Microsoft.

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.

16. Click Ok.

17. Click on the Add step to set up the second step of the workflow.

18. Give this second step a name. You can call it Collect payment.

19. Pick the table you created in Power Apps and the second form you made as well.

20. Click Sync to sync all the configurations.

21. Click on the Step setting.

22. Click on App Integration and toggle on the Enable digital payment feature (figure 8).

23. Select a currency value from the amount field.

24. Click Ok.

Figure 8: The digital payment in Power Pages | Used with permission from Microsoft.

25. Power Pages will automatically generate a user card payment form, as shown in Figure 9.

Figure 9: Collect payment page at Power Pages | Used with permission from Microsoft.

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 Preview in the make.powerpages.microsoft.com UI and input your test card’s details. A successful payment will include the amount paid and Stripe's transaction ID.

You can view the test cooking recipe website at Cooking Recipes.powerapps portals.com.

Figure 9: Successfully processed message in Power Pages | Used with permission from Microsoft.

3. Navigate back to your Stripe Developer account to view the logs and events of your payment status.

Figure 10: The events page on your Stripe developer account | Used with permission from Microsoft.

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.

The contents of external submissions are not necessarily reflective of the opinions or work of Maven Analytics or any of its team members.

We believe in fostering lifelong learning and our intent is to provide a platform for the data community to share their work and seek feedback from the Maven Analytics data fam.

Submit your own writing here if you’d like to become a contributor.

Happy learning!

-Team Maven