/BraintreePaymentsPCF

Power App code component (PCF) with Braintree Drop-In UI to facilitate credit card and PayPal payments

Primary LanguageTypeScriptMIT LicenseMIT

BraintreePaymentsPCF

This is a simple Power App code component (PCF) that allows to facilitate credit card and PayPal payments in Power Apps via Braintree payments.

Install and Use

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

If you want to use PayPal as a payment option, you also need to set up a developer sandbox acount with PayPal and link it to Braintree account. Follow these instructions on how to do this.

Import as a solution package

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

  • Code PCF component tema_Technomancy.BraintreePayments hosting the Drop-in UI from Braintree to capture credit card details and initate PayPal payment.
  • 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 folder

    npm install 
    
  4. Follow the instruction here on how to

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 and labels
  • 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. Set the PayPalEnabled property to true if you want to use PayPal as a payment option.

  4. 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)) 
    

OnChange handler

  1. For test integration, you can use:

Setup Checkout Azure Function

The integration with a payment gateway requires a secure server componet 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 installation instructions of the Braintree Azure Function repository to setup th eserver component.

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