Integration with payment gateways (e.g., Stripe)

Integrating payment gateways like Stripe into your Power Pages portal enables you to securely accept payments from customers for services, products, registrations, or subscriptions. Power Pages doesn’t offer built-in payment integration out of the box, but through a combination of JavaScript, HTML embeds, REST APIs, Power Automate, and custom Dataverse tables, you can build a secure, functional payment experience.

---

Why Integrate Payment Gateways into Power Pages?

Power Pages is ideal for portals such as:

• Event registration systems
• eCommerce websites
• Donation portals
• Subscription-based services

Adding a payment gateway like Stripe enables:

• Secure transactions
• Global payment options (cards, wallets, bank transfers)
• Real-time status tracking
• Integration with back-office systems (via Dataverse)

---

Commonly Used Payment Gateways

Although multiple providers exist, Stripe is popular due to its:

• Easy-to-use APIs
• Rich documentation
• Support for one-time & recurring payments
• Built-in fraud protection
• Support for local currencies

---

Step-by-Step: Integrating Stripe with Power Pages

Prerequisites

• A Power Pages site
• A Stripe account (https://dashboard.stripe.com/)
• Access to Stripe API keys
• Basic understanding of HTML, JavaScript, and Power Automate
• Access to Dataverse tables (to store payment data)

---

Step 1: Setup Stripe Account & Product

1. Go to Stripe Dashboard
2. Create a new product and price
3. Navigate to Developers > API keys
4. Note down your Publishable Key and Secret Key

---

Step 2: Create Dataverse Tables (Optional)

Create two tables in Dataverse (via Power Apps):

• Payments: store transaction status, user info, amount, product ID
• Payment Logs (optional): for audit and webhook data

Columns in Payments:

• User (Lookup)
• Payment ID (Text)
• Amount (Currency)
• Status (Choice: Pending, Completed, Failed)
• Stripe Session ID (Text)

---

Step 3: Add a Payment Button to a Web Page

Edit a Power Page’s Web Page and embed HTML + JavaScript:

<button id="checkout-button">Pay Now</button>
<script src="https://js.stripe.com/v3/"></script>
<script>
    document.getElementById("checkout-button").addEventListener("click", async () => {
        const response = await fetch("/api/stripe/create-session", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ userId: "user123", amount: 4999 }) // example data
        });

        const session = await response.json();
        const stripe = Stripe("YOUR_PUBLISHABLE_KEY");
        stripe.redirectToCheckout({ sessionId: session.id });
    });
</script>

Replace /api/stripe/create-session with a Power Automate trigger or Azure Function that initiates the Stripe session.

---

Step 4: Create a Power Automate Flow or Azure Function

Option A: Power Automate + Custom Connector (for No Code)

1. Use a custom connector in Power Automate to call Stripe APIs.
2. Create a POST flow to https://api.stripe.com/v1/checkout/sessions
3. Set body parameters:
   { "payment_method_types": ["card"], "line_items": [{ "price_data": { "currency": "usd", "product_data": {"name": "Example Product"}, "unit_amount": 4999 }, "quantity": 1 }], "mode": "payment", "success_url": "https://yourportal.com/success", "cancel_url": "https://yourportal.com/cancel" }
4. Pass back the session ID to the frontend.

Option B: Azure Function (for Developers)

Use C# or Node.js to create a lightweight API endpoint that communicates with Stripe, then call it from your page using fetch().

---

Step 5: Handle Webhooks (For Payment Confirmation)

1. In Stripe Dashboard > Developers > Webhooks
2. Add endpoint:
   https://yourdomain.powerappsportals.com/api/stripe/webhook
3. Events to subscribe:
   • checkout.session.completed
   • payment_intent.succeeded
4. Handle the webhook (via Power Automate HTTP Trigger or Azure Function):
   • Update payment status in Dataverse
   • Send confirmation email

---

Step 6: Design Thank You Pages

Create two Web Pages:

• Success Page: for post-payment confirmation
• Cancel Page: if user cancels the process

Use Web Roles and Page Permissions to limit access if necessary.

---

Step 7: Securing the Integration

• Never expose Stripe Secret Key on the client-side.
• Use server-side logic (Azure Function or Power Automate) to create sessions.
• Use HTTPS on all endpoints.
• Validate Stripe webhook signatures.
• Store only necessary metadata (never full card data).

---

Best Practices

Area	Best Practice
Security	Always use server-to-server communication for sensitive operations
Monitoring	Use Stripe Dashboard & Webhook logs to monitor failures
Scaling	Modularize API calls using Power Automate Custom Connectors
Testing	Use Stripe’s test card numbers in test mode
Compliance	Ensure your portal is PCI-compliant (Stripe helps with this)

---

Use Case Examples

College Admission Portal

• Pay admission fees
• Download receipt
• Confirm payment via email

Small eCommerce Portal

• Pay per order
• Track inventory in Dataverse

Event Registration

• Book ticket
• Payment links sent via email