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:

• 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

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: 

• Acr.UserDialogs: Used to display a loading while getting the card tokenization response
• Plugin.CurrectActivity: Used in the Android project to know which is the current activity
• XamarinFastEntry.Behaviors: Used for validating the credit cards fields

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

• https://www.metizsoft.com/blog/braintree-payment-gateway-integration
• https://developers.braintreepayments.com/guides/credit-cards/server-side/dotnet 
• https://github.com/NAXAM/braintree-android-binding
• https://github.com/NAXAM/braintree-ios-binding
• https://developers.braintreepayments.com/guides/credit-cards/overview

Happy Braintree integration!