{"id":39044,"date":"2024-08-28T12:04:29","date_gmt":"2024-08-28T06:34:29","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=39044"},"modified":"2024-08-28T16:14:41","modified_gmt":"2024-08-28T10:44:41","slug":"no-code-payments-for-power-pages-portal-with-stripe-integration","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2024\/08\/no-code-payments-for-power-pages-portal-with-stripe-integration\/","title":{"rendered":"No-Code Payments for Power Pages Portal with Stripe Integration"},"content":{"rendered":"

\"No-Code<\/p>\n

Using the design studio’s Setup workspace, you can quickly add payment options to your Power Pages site<\/a>. This tool lets you add a payment section to your multi-step form without needing to write any code. With this setup, you can easily link your site to a payment provider, making it simple for users to make payments and improving their experience on your site.<\/p>\n

Scenario<\/strong>: A fitness club center wants to streamline its membership registration process and enable online payments for memberships, classes, and personal training sessions.<\/p>\n

To accept payments on your Power Pages<\/a> site, follow these steps:<\/p>\n

    \n
  1. Install the Package<\/strong>: The site admin installs a package that includes the necessary tables and prerequisites for enabling the payment feature.<\/li>\n
  2. Configure the Provider<\/strong>: The site admin or creator sets up the specific keys needed for a payment provider.<\/li>\n
  3. Enable Payments on Your Form<\/strong>: The creator adds the form and activates the digital payments feature on the required step of the multistep form.<\/li>\n<\/ol>\n

    Prerequisites<\/strong><\/p>\n

      \n
    1. Sign Up with Stripe:\n
        \n
      1. Set up a Stripe account as your payment provider.<\/li>\n
      2. Obtain the Stripe Marketplace payment app’s test mode or live keys.<\/li>\n<\/ol>\n<\/li>\n
      3. Set Up a Microsoft Dataverse Table:\n
          \n
        1. Create or identify a Dataverse table to use in a multistep form.<\/li>\n
        2. Ensure this table has a currency field type to charge the amount you want to collect from the site user.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

          To get started with the integration setup, follow these steps:<\/strong><\/p>\n

            \n
          1. Go to the setup tab in your Power Pages portal<\/a>.<\/li>\n
          2. Select “External Apps” in the integration group.<\/li>\n
          3. Find and install the Stripe application.<\/li>\n
          4. Once installed, click on the “Manage” option in the action column.<\/li>\n<\/ol>\n

            \"No-Code<\/p>\n

            Now, you need to choose the storage options:<\/p>\n

              \n
            1. Dataverse Storage:\n
                \n
              1. It requires the publishable and secret keys, which support only test mode.<\/li>\n<\/ol>\n<\/li>\n
              2. Azure Key Vault Storage:\n
                  \n
                1. Requires the Publishable and Secret keys and an additional Azure key.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

                  For more details on integrating with Azure Key Vault<\/a>, please refer to the relevant documentation.<\/p>\n

                  \"No-Code<\/p>\n

                  To get your publishable & secret key<\/p>\n

                    \n
                  1. Visit the Stripe Marketplace<\/a> and install the Microsoft Power Pages Payments app.<\/li>\n
                  2. Once installed, obtain your Stripe publishable and restricted key.<\/li>\n<\/ol>\n

                    \"No-Code<\/p>\n

                    Note: For the secret key, it is recommended to use the Restricted keys provided by Stripe. These keys help limit access and permissions for different areas of your account data in Stripe.<\/u><\/strong><\/p>\n

                    To implement this scenario, we created a fitness club portal with a multistep form and linked it to a custom entity called ‘Members.’ This entity includes the following fields:<\/p>\n

                      \n
                    1. Name<\/li>\n
                    2. Mobile Number<\/li>\n
                    3. Period (e.g., 1 month, 3 months)<\/li>\n
                    4. Fee (calculated based on the period: $200 for 1 month, $500 for 3 months, etc.)<\/li>\n<\/ol>\n

                      \"No-Code<\/p>\n

                      We added this form as the first step in the multistep form. The payment integration can only be added to the multistep form, not to single-step forms.<\/p>\n

                      \"No-Code<\/p>\n

                      In the next step of the multistep form, you will enable the payment mode:<\/strong>\u00a0<\/strong><\/p>\n

                        \n
                      1. Click on the step settings for the second step of your multistep form.<\/li>\n
                      2. Select “App Integrations.”<\/li>\n
                      3. Find the “Enable Digital Payment” option and enable it. (This option was disabled by default because the Stripe application wasn’t integrated yet.)<\/li>\n
                      4. After enabling it, you will need to bind the payment (Currency) field to the form.<\/li>\n<\/ol>\n

                        \"No-Code<\/p>\n

                        After completing the setup steps, you’ll notice a new payment field conveniently located below your form. This user-friendly interface allows customers to enter their payment information directly on your Power Pages site, eliminating the need for redirects or external payment gateways.<\/p>\n

                        \"No-Code<\/p>\n

                        Now, sync the site and preview it on your desktop. Fill out the form with the required details, and click “Next.” This action will create the record in the CRM and start the payment process.<\/p>\n

                        \"No-Code<\/p>\n

                        As shown in the screenshot below, you’ll see the $200 payment listed in the Stripe transaction section of your Stripe dashboard<\/a>.<\/p>\n

                        \"No-Code<\/p>\n

                        To test the portal’s payment functionality, Stripe provides dummy card details. Use these details to test how the digital payment integration works. For more information, you can explore Stripe\u2019s Developer Tools<\/a> documentation for testing card details.<\/p>\n

                        \"No-Code<\/p>\n

                        You can use any card details, regardless of region or brand (e.g., Visa, MasterCard). After entering the card information, click the “Pay Now” button to complete the payment.<\/p>\n

                        \"No-Code<\/p>\n

                        After completing the payment, you\u2019ll see the status of the initiated payment change from “Incomplete” to “Succeeded.”<\/p>\n

                        \"No-Code<\/p>\n

                        Conclusion<\/strong><\/p>\n

                        Integrating Stripe payments into your Power Pages site simplifies the payment process for your site, making it easier for members\/customers to pay for memberships, classes, and sessions. By following the setup and testing steps, you ensure a smooth and secure payment experience, enhancing overall customer satisfaction.<\/p>\n

                        Outsource Development Made Easy for Dynamics 365 CRM and Power Platform!<\/div><\/div><\/strong><\/p>\n

                        From customizing Microsoft Dynamics 365<\/a> to developing Copilot-enabled Power Platform Apps<\/a>, our outsourced development services ensure top-notch solutions tailored to your needs. Let our experts handle the technicalities while you focus on your core business. Email us at crm@inogic.com<\/a> to get started today.<\/p>\n","protected":false},"excerpt":{"rendered":"

                        Using the design studio’s Setup workspace, you can quickly add payment options to your Power Pages site. This tool lets you add a payment section to your multi-step form without needing to write any code. With this setup, you can easily link your site to a payment provider, making it simple for users to make\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2053,2763],"tags":[2901],"class_list":["post-39044","post","type-post","status-publish","format-standard","hentry","category-power-apps-portals","category-power-pages","tag-power-pages-portal"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/39044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=39044"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/39044\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=39044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=39044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=39044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}