Exercise - Install the Stripe package

  • 5 minutes

To accept payments with Stripe on your Power Pages website, you need to perform the following actions:

  • Install the Stripe integration package.

  • Configure the Stripe integration with your API keys.

  • Change site visibility to Public.

Install the Stripe package

You can install the Stripe package to your Power Pages website in the Power Pages design studio for your site. To do so, go to Power Pages and sign in to the tenant with your Power Pages website.

  1. From the Power Pages Home tab, select Edit next to the website that you want to implement payment integration for.

    Screenshot of the Power Pages home page with the Edit button highlighted next to active sites.

  2. In the Power Pages design studio, go to the Set up tab from the left navigation menu and select External apps (preview) under Integrations.

  3. From the Integrations list to the right, select Install under Actions for Stripe.

    Screenshot of the Power Pages integrations page with the Stripe package install highlighted.

  4. In the Installing Stripe window that opens, select Start installation.

    Screenshot of the Installing Stripe window in Power Pages.

  5. The installation process takes a few minutes to complete, and you can monitor the process by looking at the Status column in the Integrations list.

Stripe integration configuration

When managing Stripe integrations in Power Pages, you can have the system manage your API keys in Microsoft Dataverse or Microsoft Azure Key Vault. Both storage options have different functionalities, with the main difference being that Dataverse only supports test mode keys, while Azure Key Vault supports test mode and live mode keys.

During this exercise, you use the Dataverse option because you’re using test keys. However, we recommend that you switch to Azure Key Vault when you're comfortable with Stripe integrations so that you can start using live mode keys in a production environment.

  1. To add your Stripe API keys, select Manage under Actions in the Stripe row.

    Screenshot of the Manage Stripe option in Power Pages.

  2. In the Enable Stripe pane that opens to the right, select the Dataverse option. Enter your publishable key in the Publishable key field and your restricted key in the Secret key field, and then select Save.

    Screenshot of the Dataverse storage option in Power Pages.

    Note

    Much like revealing keys in Stripe, you can only view the key's value when you enter it into the field. After you save or move on to the next field, you can't view the key's value.

  3. Finalize the integration by selecting Sync in the upper-right corner of the design studio.

    Screenshot of the Sync button in the design studio.

Now, when you build multistep forms, you can add a Stripe payment step. In the next unit, you build a multistep form with an integrated payment step. Then, you test the form by using the test card numbers that Stripe provides.

Site visibility

When you use Stripe on your Power Pages site, Stripe requires your website to be public. If your site is private, the payment form won’t be visible. To make your site public, your environment needs to be a test or production environment. Developer and sandbox environments don't have this capability.

  1. Go to the Security tab from the left navigation menu and select Site visibility under Manage.

  2. In the This site is menu, under Site visibility, select Public.

    Screenshot of the Site visibility settings with the Public setting highlighted.

  3. In the Set the site to public menu that opens, select Set to public.