Xamarin.forms: [Spec] PaymentButton

[pauldipietro]

PaymentButton

The built-in functionality provided by Android and iOS for payment via Google Pay and Apple Pay, respectively, has become a near-ubiquitous functionality in modern apps that allow for the purchase of goods. Providing an out-of-the-box experience for users to easily insert such a button into their app without having to write one on their own could be highly valuable.

API

var paymentButton = new PaymentButton();
paymentButton.ButtonType = "Donate";
paymentButton.SupportedNetworks = ["Amex", "Discover", "JCB", "MasterCard", "Visa"];
paymentButton.OnTapped += OnPaymentButtonTapped;
paymentButton.OnPaymentSuccess += OnPaymentSuccess;

<PaymentButton ButtonType="Donate" SupportedNetworks="Amex, Discover, JCB, MasterCard, Visa" OnTapped="OnPaymentButtonTapped" OnPaymentSuccess="OnPaymentSuccess"/>

For reasons discussed later, it may be worth having an easily accessible option for setting a ButtonType value. Supported networks can also be a topic worth investigating. An event handler for when the item is tapped can bring up the necessary system payment,

Implementation

Android Dependencies & Manifest

Google Pay requires the following dependencies and Manifest modifications:

dependencies {
    implementation 'com.google.android.gms:play-services-wallet:16.0.0'
    implementation 'com.android.support:appcompat-v7:24.1.1'
}

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

Networks

Currently, each payment platform supports the following payment networks for debit and credit cards:

Apple Pay:

• American Express
• Cartes Bancaires
• China Union Pay
• Discover
• EFTPoS (Electronic Funds Transfer at Point of Sale)
• Electron ("Visa Electron")
• iD
• Interac
• JCB
• Maestro
• MasterCard
• Store credit and debit cards ("privateLabel")
• QUICPay
• Suica
• Visa
• Visa V Pay

Google Pay:

• American Express
• Discover (U.S. only)
• Electron ("Visa Electron" -- outside U.S. only)
• Elo credit cards (Brazil only; Elo debit cards aren’t accepted)
• JCB (Japan and U.S. only)
• MasterCard
• Visa

Due to this disparity (such as Google Pay not supporting Union Pay), there may be two options for implementation:

1. Ignore a network if it is not one of the accepted networks on the platform, and have it be clearly documented.
2. Support only the networks which overlap by default (and again, document it).

Merchant Settings

Both platforms (Apple Pay, Google Pay have similar merchant info/identifier values). Some things will need to be set in platform projects, such as having features enabled in entitlements, but this is to be expected and documented.

Payment

Apple Pay uses the PKPaymentRequest class to encapsulate the request for payment, with various information such as the supported networks. Google Pay supports something similar using the PaymentDataRequest JSON object.

Styling

Apple Pay currently provides a PKPaymentButtonType that allows the user to easily set the type of button, such as a "donate" style that causes the button to say "Donate with" and the Apple Pay logo (per the docs).

Alternatively, there is support for "Set up Apple Pay":

Other types are listed as well. If possible, this could be handled by Forms to ease the setup process by replacing the button/functionality if the device is not yet set up.

The Google Pay docs state that the user should ("Do") use the Google Pay mark provided by Google (available as an asset on the linked page) to indicate that it will be used. They also have their own "Buy with G Pay" buttons (also on the same page) styled in either black or white.

Being able to set these styles without the need for a platform specific feature or custom renderer could reduce the user's workload, where having a generic "type" could be documented to state that this will only affect platforms which support it; currently, this is only iOS, but should Google add something similar in the future, the API could retroactively fit it.

Backward Compatibility

This is a new feature and should work on any device which supports Apple Pay/Google Pay.

Difficulty : Medium/High

Dependent on any issues that may arise with requirements in particular.

[amirvenus]

This would make Xamarin.Forms even more amazing!

Would be nice to support macOSas well for Apple Pay.

[lewixlabs]

HI @pauldipietro ,
as i said here
I could contribute, if you need.
Nice to see this proposal, but i think:

• would be cleaner if this paymentbutton would integrated as extension of Xamarin Forms (external nuget plugin).
• Samsung Pay is the other main actor of payment world, probably it can be handled https://t.co/5IuckXlkKv

[getheme225]

Hi @pauldipietro, is a very usefull control, for e-Commerce app , i' am actually working on something like. I want to contribute Too.

[icquire]

Hello @pauldipietro. How is this Project going? I'm very interested in the results as well. Need for any contribution?

[majdaneq]

Hi guys, any updates? Let me know if you need any contribution.

[Mo-ha-mmed]

One year later .... Still nothing !

[eltomali]

Hi! How is this going? This would be a great feature.

[lewixlabs]

HI @pauldipietro ,
as i said here
I could contribute, if you need.
Nice to see this proposal, but i think:

• would be cleaner if this paymentbutton would integrated as extension of Xamarin Forms (external nuget plugin).
• Samsung Pay is the other main actor of payment world, probably it can be handled https://pay.samsung.com/developers

My contribute was available (I work in payment development world), but I think @pauldipietro proposal will be a draft for a long time...
He doesn't work anymore for microsoft, I don't know if he has free slots for this project