I’ve just put together a Xamarin Forms Stripe example app, based on their standard iOS and Android examples that let you browse products (Emoji), choose a shipping address and method, add and select a payment method, and purchase the product.

It started off very simply, but as I explored more and more facets of their iOS example, I wanted to replicate it in Xamarin/Xamarin Forms, such as the way the credit card flips over to its back when you enter the zip code, or the way the card icon changes between visa, amex etc as you enter the digits. None of this was strictly necessary, but it was fun.

I’m far from having implemented everything, but I’ve decided to stop here for now. The basics of callling the Stripe API via their SDK are there.

The complete code is here on GitHub.

This is the readme:

A Xamarin Stripe example

Watch this video to see this example in action:

The video shows using Stripe’s API from a Xamarin app that runs on iOS, Android and Windows, with all the code, including the UI code being shared across all three platforms.

Running the example

Clone this repository, open it in Visual Studio and update the Config.cs file to enter your own values. To get these values I recommend following the instructions Stripe provide for their iOS and Android example apps (register with Stripe and one-click deploy their example server to Heroku).

The top level structure

If you are familiar with Xamarin then the code structure will be familiar. At the top level there are projects for each of the three supported platforms (iOS, Android and Windows, as well as a project for the code that is shared between them, XamarinStripe.Forms

I didn’t write any code in the platform-specific projects for this example.

Inside the shared code

Here you will find folders for:

Models: Not much here since I’ve reused the models from the Stripe SDK where possibe
ViewModels: These wrap the models and expose functionality that is consumed by the views, making use of the Services to do so. They have no “awareness” of the views.
Views: These bind to the ViewModels and are defined almost entirely in Xamarin Forms XAML, with some code to do animations. The XAML gets rendered as native UI elements, so an iOS button will look like an iOS button and an Android text entry field will look like an Android field.
Services: These encapsulate discrete functionality such as credit card verification, Product storage (check out the ProductsDataStoreService for the Emojis that are for sale), and communication with the Heroku based service that we use to not store secrets in the app.

Pull requests welcome!

I implemented some, but by no means all of the functionality from Stripe’s iOS and Android examples. For example I didn’t do Apple Pay, not did I set up the Settings page. None of these are hard, but I spent a weekend doing this first example and I’ve run out of time. Please don’t hesitate to contribute.

Also, I am not a Stripe expert. To be honest I had never used the API before putting this example together, so feel free to let me know if I’ve made mistakes.

Don’t hesitate to use this example code, but you are responsible for verifying that it is correct.

Calling the Stripe API from .NET

If all you are about is how to call the Stripe API from C#, then you’ll want to check out:

EphemeralService.cs which encapsulates talking to the intermediary Heroku service to do things get a Stripe ephemeral key and create a new payment intent;
PaymentOptionsViewModel which lists the payment methods available for a customer
AddCardViewModel which creates a payment method and attaches it to a customer
ShippingAddressViewModel which adds a shipping address to a customer
CheckoutViewModel which creates a payment intent and confirms it.

Initial author

This example was originally created by Damian Mehers