Press "Enter" to skip to content

Braintree integration in Xamarin Forms (Part.1 )

It’s very common to have credit card processing in applications offering services or that are product marketplace based. A great option to process payments is the solution Braintree Payments provide.

Braintree Payment Gateway is a simple and modern way to accept payments. Along with its list of flexible features, it provides the ability to merchants to accept payments online or within a mobile application.

In this article, will be showing how to do the Braintree client-side integration in a Xamarin Forms app.

Since there’s a lot of content to cover it will be divided into 4 parts:

Before starting

It’s important to know that you need to have a sandbox account created and also the backend server-side implementation. Check more information about it here.

The first thing you need is to generate a client token in your server which will be used to initialize the client SDK with the client token returned. Here you can find information on how to do it: https://developers.braintreepayments.com/guides/authorization/client-token.

After you have this setup, we are ready to get started.

Let’s start!

Android setup

Install the package Naxam.Braintree.Droid (An awesome Braintree Android Binding made by NAXAM).

In the AndroidManifest.xml make sure to add the wallet metadata:

<meta-data android:name=”com.google.android.gms.wallet.api.enabled” android:value=”true” />

iOS setup

Install the package Naxam.BraintreeCard.iOS (An awesome Braintree iOS Binding made by NAXAM).

The following packages will also be used in this sample: 

Let’s code

In the Xamarin Forms project let’s create a new interface called IPayService.

In this interface, we will have the following:

  • InitializeAsync: Initializes the Braintree SDK with the client token (Client token is provided by your backend)
  • CanPay: To know if everything is initialized and ready to use
  • TokenizeCard: Tokenizes the provided credit card
  • OnTokenizationSuccessful: An event that will raise if the card tokenization was successful
  • OnTokenizationError: An event that will raise if the card tokenization failed

In the Xamarin Android project provide the native implementation for IPayService.

In the Xamarin iOS project provide the native implementation for IPayService.

In the Xamarin Forms project let’s create a ViewModel to add the payment handling.

Also, let’s create a model that will represent credit card data:

Finally, create some UI to gather the credit card details:

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 OnTokenizationSuccessful is where you should call your backend endpoint to process the payment.

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

To test with a valid credit card you should use one of these.

That’s all for now, check the full source code here.

Make sure to check out the second part of this series about Pay with ApplePay/GooglePay Braintree integration (coming soon).

References

Happy Braintree integration!

5 Comments

  1. Will Will

    Great 👍🏾 I like it.
    I’m so excited for the next parts.
    Please can you provide the next part

    Thanks

  2. Sumit Sumit

    We are waiting to part 2

    • Rendy Rendy

      Coming later today!

      • Will Will

        (Y)

  3. Pedro Pedro

    Hi Rendy, thank you for this docs, I was looking for something like this for a while.
    I am having an issue, when I install Naxam.Braintree.Droid I get “java.exe” exited with code 2, I am using VS2017 (Net Core 2.1) and installed Version 2.10.0.1 of the package

Comments are closed.