Implementing the Google Payment Request API

Google I/O 2017 brought along many new and awesome technologies including the future of online payments: The Payments Request! Below is a demonstration of the it:

This is a new technology so there is not a lot of documentation on it. The goal of this article is to help you integrate this with your own payments method. Before you read this blog, please read this first:

https://docs.google.com/document/d/1izV4uC-tiRJG3JLooqY3YRLU22tYOsLTNq0P_InPJeE/edit

This article gives you the necessary knowledge on the workflow and also provides code snippets. Since the basic idea can be seen there, I will not be doing a full step-by-step tutorial. Instead, my aim is to talk about the confusing parts as well as to go over the mistakes I made and how you can fix it.

Diving In — Demo Site

In order for Payments Request to work, we first need to have our own demo site which will support our payment app. Github Pages provides a quick, free, and easy way to get started on a demo.

To get started quickly, clone my sample repository at

(Simplified from https://github.com/rsolomakhin/rsolomakhin.github.io to only provide support for BobPay). Once that is complete, we will need to make some small changes to provide compatibility with your own payments app.

Lets first edit the manifest file.

  1. Open the bobpay folder. Inside, you should see two JSON files.
  2. Open the one named “bobpay-app.json” and edit the id and value:
{ 
“related_applications” : [{
“platform” : “play”,
“id” : “your_android_app_package_name_here”,
“min_version” : “1”,
“fingerprints”: [{
“type”: “sha256_cert”,
“value”: "your_apk_fingerprint_here"
}]
}]
}

3. Next, open the “payment-manifest.json” and add the link to your bobpay-app.json.

{   
"default_applications" : ["https://your_link_here"]
}

For example, a link could look like this: “https://yanfii.github.io/bobpay/bobpay-app.json"

(If you visit the link and you see the contents of “bobpay-app.json”, that means you got the right link)

Creating a Server

Your demo website must also have a server component for setting the HTTP Link Header to the payment-manifest.json. A quick and easy way to do this would be to use the Google Cloud Platform. An example of such a server can be seen at https://emerald-eon.appspot.com/. However, in your own, make sure to include your own custom HTTP Link Header with rel=”payment-method-manifest” attribute. This can be done with this snippet:

app.head('/your_header', function(req, res) {
  res.status(200).links({
    'payment-method-manifest':
    'link_to_your_payment_manifest.json',
  }).end();
});

To check that your header is working as intended, you can run this line in your terminal:

$ curl --head http://your_url/your_header

It should return a 200 status code along with your links.

Creating the BobPay APK

Now lets finally get started on creating the actual payment method itself! To do this, you need the latest version of Android Studio which can be downloaded here:

  1. Creating a new Project

First, lets create a new Project. For simplicity reasons, let’s name our imaginary payment system ‘bobpay’. Since browsers and apps communicate with each other through Intent extras, we need to modify the Android Manifest file to be able to respond. We can do this by adding this code snippet into the AndroidManifest.xml:

<activity android:name=".PaymentActivity">
<intent-filter>
<action android:name="org.chromium.intent.action.PAY" />
</intent-filter>
<meta-data android:name="org.chromium.default_payment_method_name"
android:value="your_server_here"
/>
<meta-data android:name="org.chromium.payment_method_names"
android:resource="@array/method_names"
/>
</activity>

Browsers communicate and pass data to installed applications via Intent extras. By adding this snippet of code, when there is a “PAY” intent, the browser will send the payment details to the PaymentActivity. The meta-data tags identify the default payment method name. The reason you may have multiple meta-data tags is if you wish to provide support for multiple payment methods.

2. Creating the PaymentActivity

Now, let’s create a new Activity. Open the project and head to java/projectName. Right click and create a new Activity. Let’s name it PaymentActivity. This is where the transaction detail in the form of JSON is processed. Here, you can perform error checks such as when the intent is null etc… Just make sure to return the intent back to the browser so it can process the payment. You can do this with this snippet of code:

Intent result = new Intent();
if(!noError){
//Put extras into result here
}
setResult(mError? RESULT_CANCELLED: RESULT_OK, result);
finish();

Optional:

REMINDER: If you did not edit the ‘id’ and ‘value’ in the Demo site manifest, make sure you do so now. ‘id’ is your android package name and ‘value’ is your SHA256 fingerprint. You can find out your fingerprint with:

$ unzip app-release.apk && keytool -printcert -file META-INF/CERT.RSA

And were done! Download Chrome Canary from the Play Store, head on over to your test website, and check out the future of online payments that you created yourself :). Below is a demonstration of the Payment Request API.

Ending Thoughts and Takeaways

The Payment Request API is a huge leap in the world of mobile payments. It has become much more secure and can be processed with just a few taps!

I would like to thank Rouslan Solomakhin for helping me integrate this. I ran into many difficulties and he guided me through every step of the way. I would also like to thank my team for giving me the opportunity to work on this along with providing support. During my time working on this, I learned you should never be afraid to ask for help. With the internet, you have the power to contact experts from across the world. Just remember to be courteous and respectful of their time!