In our previous article, we covered how to support Paypal payments in Xamarin Forms. There are use cases where you just need a quick, easy and UI ready way to start accepting payments, Braintree does provide a complete, ready-made payment UI called Drop- in UI. Today I will extending the sample to support Braintree Drop-In UI.

• Part 1. General Setup/Pay with Credit Cards
• Part 2. Pay with Apple Pay/Google Pay
• Part 3. Pay with Paypal
• Part 4. Drop-UI

Let’s code

In the Forms project, we added the following methods to the IPayService interface: OnDropUISuccessful, OnDropUIError and ShowDropUI to be able to support and handle the drop-in UI feature.

Xamarin iOS project

Add the package Naxam.BraintreeDropUI.iOS.

Implement the ShowDropUI in the iOSPayService this method will trigger the drop-in UI that displays a popup with all the payment options supported. In the specific case of Apple Pay, even when using the drop-in UI feature, we have to handle the tokenization based on the native platform payment offering so we will call the TokenizePlatform method which was implemented in this article.

Xamarin Android project

Add the package Naxam.BraintreeDropIn.Droid.

Implement the ShowDropUI in the AndroidPayService and add a OnActivityResult static method to handle Drop-In UI response.

In the MainActivity override OnActivityResult method and call AndroidPayService.OnActivityResult to process the result.

Xamarin Forms project

In the PaymentPageViewModel we call the ShowDropUI method to show the popup with all payment options.

In the XAML view add the DropUI option.

Let’s test

For the sake of this demo, I’m just displaying the tokenization result once you tap on pay but when getting the event OnDropUISuccessful is where you should call your backend endpoint to process the payment.

Now that we are ready, the result should be the following.

Check full source code here.

References

• https://developers.braintreepayments.com/start/hello-server/dotnet
• https://github.com/NAXAM/braintree-android-binding
• https://github.com/NAXAM/braintree-ios-binding
• https://developers.braintreepayments.com/guides/drop-in/overview/ios/v4
• https://developers.braintreepayments.com/guides/drop-in/overview/android/v3

Happy Braintree integration!