Braintree payments PCF component (Power Apps)

(The below has been described and tested for Canvas Power Apps. This has not yet been tested and adapted for Model-driven apps. As for the Power App Portal app, another integration pattern is appropriate, to be discussed later)

This package for import in your CDS environment and the source code of the control are packaged here: https://github.com/andrew-grischenko/BraintreePaymentsPCF

This simple Power App code component (PCF) facilitates credit card payments in Power Apps via Braintree payments.

Install and Use

Before you begin, create a Braintree Sandbox account here – it’s free for testing. You will need it to facilitate the payments.

Import as a solution package

Download and import the managed solution package BraintreePayments_managed.zip or the unmanaged package BraintreePayments_unmanaged.zip. As a result, you should get the solution BraintreePayments containing:

• Code PCF component tema_Technomancy.BraintreePayments hosting the credit capture Drop-in UI from Braintree
• Demo canvas Power App BraintreePaymentsDemo

Skip the next section, “Build from the source”, if you just want to set up and use the solution.

Build from the source

Prerequisites:

• NPM
• Windows OS
• VS Code

1. Install Power Apps CLI and all its dependencies as described here: https://docs.microsoft.com/en-us/powerapps/developer/common-data-service/powerapps-cli
2. Clone the repository https://github.com/andrew-grischenko/BraintreePaymentsPCF into a folder
3. Run the commands in the foldernpm install
4. Follow the instructions here on how to

• build and test the component: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/implementing-controls-using-typescript
• package and deploy the component: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls

Setup the code component BraintreePayments and the app logic

1. Import a code component (PCF control):

• Select menu Insert > Custom > Import component
• Select the “Code” tab
• Select the BraintreePayments component and import it
• On the left panel, find the component and add it to the screen

1. Set up the TokenizationKey attribute with the Tokenization key from your Braintree account. See more details in Braintree documentation here. For the Sandbox environment, it should start with “sandbox_”
2. Setup the visual appearance of the control (optional):

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

1. Set up the PaymentAmount with the payment amount (must be more than 0).
2. Set the property CheckoutURL of the component with the URL of the Checkout function (see below the section Setup Checkout Azure Function)
3. Handle the payment events – success and errors – with OnChange handler of the component by verifying the PaymentStatus attribute, e.g. If(BraintreePayments.PaymentStatus = "completed", Navigate(Receipt))

1. For test integration, you can use the card number “4242424242424242” with any future expiry date. See here for more test cards: https://developers.braintreepayments.com/guides/credit-cards/testing-go-live/node

Setup Checkout Azure Function

Integrating a payment gateway requires a secure server component to communicate with the Braintree API. This solution implements this as an Azure Function – a simple Node.js function taking the payment “nonce” and a payment amount as parameters, initiating a “sale” transaction and returning the result.

Please follow the Braintree Azure Function repository’s installation instructions to set up the server component.

Once this is done, use the URL of the function to set up the CheckoutURL of the component (see above).