Payment Request with Braintree
Last updated
Last updated
This guide uses the plugin at version 13 or later (which is in beta at this stage).
We will proceed in steps: setup, initialization and payment.
First we'll details the basic setup steps, of course you can skip the first few steps if you already have a working application you want to integrate the code into.
Install NodeJS and Cordova
Setup your Cordova project
Prepare an Account on Braintree
Install the In-App Purchases plugin and Braintree extension
Configure Braintree on
Once we have a Cordova application with Braintree support enabled and everything is in place on Braintree and Iaptic dashboards, we will move to coding a minimal demo app.
Initialize the in-app purchase plugin
Launch a payment request
Handle the purchase events
Finalize
Needless to say, make sure you have the tools installed on your machine. During the writing of this guide, I've been using the following environment:
NodeJS v10.12.0
Cordova v8.1.2
macOS 10.14.1
I'm not saying it won't work with different version. If you start fresh, it might be a good idea to use an up-to-date environment.
Follow the instructions from Braintree to create a sandbox account. https://www.braintreepayments.com/sandbox
Markdown your API Credentials: Merchant ID, Public Key and Private Key.
Also mark down your iaptic's App Name and Public Key.
Support for Braintree is added by installing an additional plugin with ID cordova-plugin-purchase-braintree.
Let's install it:
For this guide, I'll use an android device. As mentioned in the plugin's documentation, we have to add this section to our application's config.xml.
Assuming you're starting from a blank project, we'll add the minimal amount of HTML for the purpose of this tutorial. Let's replace the <body> from the www/index.html file with the below.
Let's also make sure to comment out Cordova template project's CSS.
You also need to enable the 'unsafe-inline' Content-Security-Policy by adding it to the default-src section:
We will now create a new JavaScript file and load it from the HTML. The code below will initialize the plugin.
Here's a little explanation:
Line 1, it's important to wait for the "deviceready" event before using cordova plugins.
Lines 5-8, we check if the plugin was correctly loaded.
Lines 11-13, we setup an error handler. It just logs errors to the console.
Whatever your setup is, you should make sure this runs as soon as the javascript application starts. You have to be ready to handle IAP events as soon as possible.
As mentioned earlier, we'll use iaptic for the server side integration with Braintree.
You are responsible for creating a user interface that presents the detail concerning the upcoming payment. Let's create a very simple interface.
This is a primitive state machine that displays the basket, then the progress of the payment flow. While in the basket, the "Proceed to Payment" button calls the pay() function.
Let's implement that function.
Let's build and test that!
The code above will work on both iOS and Android. We need to pick a test platform, so let's use Android.
We can build and run our app with:
You can then make a test payment using one of Braintree's test credit card numbers, like 4242 4242 4242 4242, with an expiry date in the future.
Here's the result:
Of course, your job doesn't end here. Iaptic will send a webhook notification to your server, indicating a payment for a given has been performed by the user. You should handle that webhook to deliver the purchase on your server.
When an identifier user makes a purchase, iaptic sends a notification to your server with the details of the transaction.
Here's an example body content.
You can process with enabling the feature for your user depending on this purchase status (in particular, check for a potential cancelationReason which would mean the purchase has been cancelled).
Iaptic documentation related to server-to-server webhook contains all the appropriate details, which fall outside the scope of this guide.
The Braintree implementation requires a server component that interacts with Braintree to create and settle transactions. Server side integration with the Braintree platform is outside the scope for this tutorial. We'll use 's own integration that provides a simple platform neutral interface.
Go to to create an account (or login if you already have one). Fill in the Braintree section in iaptic's settings.
For the most up-to-date information on how to install and setup the plugin, you can head to the .
You can download the .
We'll instantiate the , and use the provided braintreeClientTokenProvider and validator to handle the server-side part of the purchase process.
We add the standard purchase events handlers for when the transaction is approved and the receipt verified, with the block.
In our call to , we add in the Braintree platform with its configuration.
In particular, it requires a provider. For this example, we'll use the implementation provided by iaptic.
