Set up payments integration

Enable your Power Pages site to accept payments by using design studio's Set up workspace. With this no-code integration, you can add a payment component to your multistep form, enabling your website to integrate with a payment provider.

To accept payments on your Power Pages site, you must complete these steps:

Step 1: Install the package. In this step, the site admin installs the package consisting of required tables and other prerequisites for the environment to enable payments experience.

Step 2: Configure provider. In this step, the site admin or maker configures keys specific to a payment provider.

Step 3: Enable the payments experience on your form. In this step, the maker includes the form and enables digital payments on the required step for the multistep form.

Important

• This feature only works with the enhanced data model.
• This feature requires Power Pages website build version 9.5.10.x for the payments control to show on the site.

Prerequisites

• Sign up for an account with Stripe as your payment provider and obtain test mode or the live keys from the payments app installed from Stripe Marketplace.
• Create or identify a Microsoft Dataverse table you want to use in a multistep form. This table must have a currency field type that is used to charge the amount that you wish to collect from the site user. For more information, see How to create and modify Dataverse tables by using the Data workspace.
• Configure a multistep form using a Dataverse table with a step to allow users to pay. This step displays the payments control once configured in a later step.

Step 1: Install the package

1. In the design studio, select Set up.
2. Under Integrations, select External apps.
3. Select the Install action for Stripe.
4. Once the package installation is complete, restart the website from Site Actions in the admin center.

The installation action might take a few minutes. The action changes to manage once the installation is complete.

Step 2: Configure the provider

Once you install the package, you can begin to configure Stripe for your Power Pages site.

Step 2a: Obtain your Stripe keys

1. In the design studio, choose Set up.

2. Under Integrations, select External apps.

3. In the Integrations table, select the Manage action for Stripe.

4. Go to the Stripe Marketplace and install the Microsoft Power Pages Payments app.

5. After the app is installed, obtain the Publishable and Restricted keys required to enable this integration. These values are needed in later steps.

   Note

   • For the secret key, we recommend using the restricted API keys that Stripe provides to limit access and permissions for different areas of your account data in Stripe.
   • Release 9.6.3.x. added support for live mode keys in addition to test mode keys. To understand various types of keys, refer to Stripe's documentation on API keys.

Step 2b: Choose your storage type

You can use Dataverse (only supports test mode) or Azure Key Vault (supports both test mode and live mode) to store the Stripe API keys.

If you choose Dataverse, continue to step 2d (Add your keys to your configuration).

If you use Azure Key Vault, add the Stripe Restricted key as a secret in a key vault and assign permissions to your site by following step 2c (Configure Azure Key Vault (optional)).

Step 2c: Configure Azure Key Vault (optional)

If you choose Azure Key Vault as your storage type, complete the following steps.

1. Within the Azure portal, obtain the name of your app in App registrations which corresponds to your Power Pages website.

   The app name is the same as your website name with a prefix of "Portals-". If your site name is "Woodgrove Bank Applications", then the app name on the Azure portal is "Portals-Woodgrove Bank Applications". Note this app registration name for use in the following steps.

   

2. Sign in to the Azure portal and navigate to Key Vaults.

3. Create a new key vault or use an existing one. While creating a new key vault, you have to choose a permission model. You can choose either Azure role-based access control or a Key Vault access policy. To see the appropriate steps, select the below tab based on your choice of permission model.

   Azure role-based access control

   1. Navigate to your key vault in the Azure portal.
   2. Select Access control (IAM) on the left side menu.
   3. Select + Add on the top of the page, and then select Add role assignment.
   4. Under the Job function roles tab, search for Key Vault Secrets User role name, select it, and then select Next.
   5. For Assign access to, select User, group, or service principal.
   6. Select + Select members and search for your site's app registration name as described at the beginning of step 2c.
   7. Select the app for your site and select Next.
   8. Select Review + assign.

   Key Vault access policy

   1. Select Access policies on the left side menu.
   2. Select + Create on the top of the page.
   3. Under Secret permissions, select Get > Next.
   4. Search for your site's app registration name as described at the beginning of step 2c.
   5. Select the app for the site and then select Next.
   6. Select Create.

   Your site now has permissions to read secrets from this key vault.

4. Add your Stripe restricted key as a secret to the key vault. To learn how to create a secret in Azure Key Vault, go to Set and retrieve a secret from Azure Key Vault using the Azure portal.

Step 2d: Add your keys to your configuration

1. In the design studio, enter the settings in the Enable integration panel.

   If you're using the Dataverse storage option, enter the Publishable and Secret keys.

   If you're using the Key Vault storage option, enter the Publishable key, Azure Key vault name, and Secret name.

2. Select Save and close the panel. If you encounter an error while saving, refer to the error message and resolve the key vault setup related issues.

3. Select Sync.

Step 3: Enable the payments experience on your form

To enable payments, complete the following steps:

1. Create a multistep form step for the Dataverse table used in your multistep form process where you want to accept payments.

2. Add table permissions for the Dataverse tables used in the multistep form process (you need at least Create and Write permissions) and assign appropriate web roles.

3. Select Sync.

4. In the design studio, select Pages and navigate to the webpage where the payment experience is intended.

5. Add or edit the multistep form, and create a step called Pay (or similar).

6. Proceed to Step settings.

   

   • Select App Integrations.
   • Toggle Enable digital payments to on.
   • In Choose amount field select the currency type field on the table used to charge the amount that you want to collect from the site user.  

   Note

   Configuration of payment methods and more settings can be done directly in Stripe. They might require acceptance of other terms and configuration.

The payment control is automatically added to the form step that shows a preview of payment methods enabled for accepting payments.

Preview and test your webpage

On the Pay step, you should be able to perform a payment using test cards available on Stripe's website.

A successful payment shows the confirmation with the amount paid and a transaction ID returned from the payment provider.

Note

You should disable the back-button from the Step settings if you don't want to allow users to go to the previous step from the payment step.

If this step is the last step of your multistep form, a submit button is enabled that submits the form and completes your process.

Control payments feature in a tenant

An administrator can disable payments in a tenant by setting the disablePaymentIntegrationForPages tenant level setting through PowerShell.

To run PowerShell cmdlets, you must first install the required modules.

Disable payments

After installing the modules, run the following command in a PowerShell window as an administrator:

$requestBody = @{
     powerPlatform = @{
         powerPages = @{
             disablePaymentIntegrationForPages = "All"
         }
     }
 }
 Set-TenantSettings -RequestBody $requestBody

Administrators are the users having one of the following Azure roles:

• Dynamics 365 administrator
• Power Platform administrator

When the payments feature is disabled in a tenant:

• Makers have the following experience in the External apps area.

  

• Makers have the following experience in the App integrations tab of a multi-step form configuration.

  

Each experience includes the following message:

"This application has been disabled by your organization. Contact your administrator to enable."

Note

Once this tenant setting is set to All, it prevents the setup of payments capability going forward for additional sites. It does not impact any configuration and payment setup on forms that may have already been completed by makers in their environments.

Enable payments

To enable the payments feature in a tenant, run the following command in a PowerShell window as an administrator:

$requestBody = @{
     powerPlatform = @{
         powerPages = @{
             disablePaymentIntegrationForPages = "None"
         }
     }
 }
 Set-TenantSettings -RequestBody $requestBody

Considerations

• Payment currencies and amounts. Minimum and maximum payment amount values can vary by currencies. Review the Stripe documentation on supported currencies to ensure your form and tables are configured correctly to accept payments in that range.

• Payment Card Industry Data Security Standard (PCI DSS) Compliance. This feature uses the Stripe Web Elements payment integration approach and card data isn't stored in Power Pages or Dataverse. PCI compliance is a shared responsibility and applies to business as well. See Stripe's documentation on validating your PCI Compliance.

• Payments table. For storing transactions, there's a new payments table installed with the solution. The table is automatically related to the table that you choose when you configure the form steps. You can use the table to view the details of transactions and status. This table is just a snapshot of information that is provided, which you can use to create other experiences for your business users in Power Apps or Power Pages. For more details and troubleshooting payment-related issues, you should rely on the payment provider, such as Stripe's dashboard.

• Webhook. The payments feature also configures a webhook on Stripe that is used to asynchronously update the status of payments that might take extra time for completion.

  Note

  When a website is in private mode, this webhook may not be able to communicate with the Power Pages and hence you may receive emails from Stripe. This is intermittent behavior and once your website is switched to public mode, the webhook should be able to communicate successfully.