In our previous article, we covered how to setup the braintree client-side integration to support credit card payments. Today will be extending the Braintree client-side integration to support Apple Pay and Google Pay payments in Xamarin Forms.

• 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

In iOS, we have to do some setup configurations in the Apple Portal. (Here the steps). Then in the Entitlements.plist file, we need to enable Apple Pay and add the Merchant Id (for dev and prod).

In Android, we also need to do some setup configurations in the Braintree control panel. (Here the steps).

Let’s code

In our Forms project, we added a new method to the IPayService interface called TokenizePlatform, that will handle the tokenization based on the native platform payment offering (Apple Pay in iOS and Google Pay in Android), this method receives the payment amount and the merchant id.

Xamarin iOS project 

Add the package Naxam.BraintreeApplePay.iOS.

The iOSPayService will provide the Apple Pay Braintree implementation for TokenizePlatform method as well as implementing the PKPaymentAuthorizationViewControllerDelegate, which has handling methods for the following events: DidAuthorizePayment, PaymentAuthorizationViewControllerDidFinish and WillAuthorizePayment.

When creating the BTApplePayClient there are some important informations we need to pass:

• CountryCode (Country where the payment will be processed)
• CurrencyCode (Currency for processing the payment)
• PaymentSummaryItems (A summary item description of what you are paying)

Xamarin Android project 

The AndroidPayService will provide the Google Pay Braintree implementation for TokenizePlatform method.

Xamarin Forms project 

In PaymentPageViewModel we call the TokenizePlatform method to process native platform payment option.

Since we are using the same sample for all the payments options (platform, credit card, paypal, etc). Added PaymentOptionEnum, to provide a way to select the payment option to be used.

Also added constants for the MerchantId and the total amount to process.

In the XAML view added the Platform payment option and by using the OnPlatform extension will change the icon according to the native platform option (Google Pay/Apple Pay).

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. In iOS you need to create a sandbox tester account, you can find more information here.

For valid testing amounts you should use one of these.

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

Make sure to check out the third part of this series about Pay with Paypal Braintree integration (coming soon).

References

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

Happy Braintree integration!