Press "Enter" to skip to content

Braintree integration in Xamarin Forms (Part.4 )

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.

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

Happy Braintree integration!

7 Comments

  1. Paolo F Paolo F

    Great article, very useful. Thanks!

  2. Kai Kai

    Hello Rendy,

    thank you for your great articles.
    I implemented braintree like you mentioned in a test app and everything works great in iOS. In Android, after calling GooglePayment.IsReadyToPay the Respose is always false on my Test Device (Samsung Galaxy 10 with Android 10). I used your code and integrated “com.google.android.gms.wallet.api.enabled” to the Android manifest. Any idea what I have missed?

    Thaks in advance
    Kai

    • Paolo F. Paolo F.

      I think it’s normal if you are not using platform specific payments in braintree, just cut them out with an optional parameter in the initialize method that deactivates them if you do not use them. At least, this is what I did.

    • Rendy Rendy

      Are you testing on a real device?

      • Kai Kai

        Yes, Samsung Galaxy S10 with Android 10.

    • Jenish Jenish

      I am also facing same error. testing on real device.

  3. Kai Kai

    Thank you for your response.

    Yes, I am using a real device for testing.

Comments are closed.