“Stripe” payments PCF component (Power Apps)

If you need your employees to process payments on behalf of the customers in Power Platform, you will need a custom solution described below. It’s built for Canvas Power Apps and uses Microsoft Power Apps Component Framework (PCF). The source code for the component and ready-to-import Dataverse solutions (managed and unmanaged) are available in the Stripe PCF GitHub repository.

Architecture

The solution facilitates a safe, PCI DSS-compliant way to accept credit card payments in Canvas Power Apps with Stripe. It consists of a custom connector and a code component (PCF).

The architecture of the solution:

Your Canvas Power App application (A) hosts the payment component (A2) on one of the screens. The component loads the Stripe.js client (B2) from the Stripe SaaS CDN (B) and injects the credit card capture fields (B3) as an iframe to enable secure and compliant payment flow. A client API key (public) needs to be specified as part of the component setup.

To facilitate payment, register the PaymentIntent data on Stripe API, declaring which amount and currency of the payment will be. As a result of this operation, you get the client_secret to be used to confirm the payment. The StripePaymentIntents custom connector (A1) exposes the operation CreatePaymentIntent(), which interacts with PaymetIntent API (B1) and returns the PaymentIntent object, including the client_secret value, which is then used by the payment component (A2). The connector requires the secret API key to be provided to establish a connection (A3).

Please note that the credit card details in the architecture are NOT exposed to any part of your application or connector API but instead are sent directly to Stripe’s secure endpoint. This is the (only) recommended integration pattern, and it ensures the security and PCI DSS requirements compliance.

Install & use

Import the managed solution package into the environment as per the usual process. As a result, you should get the following:

1. PowerApps Component Framework (PCF) control tema_Technomancy.StripePayments3 embedding Stripe Elements UI and logic.
2. Custom connector StripePaymentIntents that integrates for Payment Intent Stripe API
3. A simple demo Canvas Power App StripePaymentsDemo showing how to use these to process card payments.

Demo Canvas Power App

Launch the StripePaymentsDemo stripe power apps to see the demonstration of the components in action:

Set up your Stripe account

Sign up for Stripe APIs and SaaS here: https://dashboard.stripe.com/register – it’s free for testing purposes. You will receive two keys – publishable and secret – as explained below, and this is where you will see the payment transactions and access heaps more needed functions.

Set up the custom connector StripePaymentIntents

1. Add a new connector to your Power App – find the StripePaymentIntents connector (added by the imported solution).

Please do NOT use the standard Stripe connector, as it doesn’t provide the required payment API methods.

2. Create a new connection for the custom connector and specify as API key the string as:

Bearer your_stripe_api_secret_key

where:

• Bearer (and the following space character) – the required authentication keyword.
• your_stripe_api_secret_key – the secret key from the Stripe account Dashboard (usually starting with sk_)

Setup the code component StripePayments and app logic

1. Import a code component through “Insert > Custom > Import component”

2. Set up the properties of the component:

• StripeClientKey – the Publishable key from your Stripe account

3. Setup the Customer attribute with a customer reference as a string (optional)

4. Setup the visual appearance (optional):

• CardFontSize – font size of the card number capture element
• ButtonFontSize – font size for the Pay button
• ErrorFontSize – font size of the error messages

4. Get the PaymentIntent object when the payment amount is known. Execute the connector function CreatePaymentIntent and store it in a variable, e.g: Set(payment_intent, StripePaymentIntent.CreatePaymentIntent( { amount: price * 100, currency: “aud”, description: “test payment” } ));

where:

• payment_intent – the variable to be used in the next step
• StripePaymentIntent – the connector object
• amount – the numeric value of the payment amount in hundreds of currency (e.g. cents).
  • please note, it cannot be less or more than the specified limits on payment amount, otherwise, you will get an error like “StripePaymentIntent.CreatePaymentIntent failed: { “error”: { “code”: “parameter_invalid_integer”, “doc_url”: “https://stripe.com/docs/error-codes/parameter-invalid-integer”, “message”: “This value must be greater than or equal to 1.”, “param”: “amount”, “type”: “invalid_request_error” } }
• 100 – the multiplier to get the expected amount
• “aud” – currency code, must be one supported by Stripe.
• description – any string, can be empty

If you get the following error, it’s like

5. Set the property PaymentIntentClientSecret of the StripePayment component to use the PaymentIntent’s object’s client_secret value:payment_intent.client_secret

6. Handle the payment events – success and errors – OnChange handler of the component by verifying the PaymentStatus attribute, e.g.If(StripeWidget.PaymentStatus = “completed”, Navigate(Receipt))

7. For test integration, you can use the credit card numbers described here. You can use card number “4242424242424242” with any future expiry date and any 3-digit CVV code.

Please feel free to contact andrew@technomancy.com.au for any feedback or business inquiries.