In this tutorial we will look at integrating with Braintree using their hosted fields and their GraphQl endpoint.
We will be focusing solely on Card Payments in the checkout.
In this example all files will be created directly into our codebase. For the sake of reusability it's advised you create your own
npm packages and import them.
- Configuration data (API keys etc)
- Braintree form initialized
- User inputs card data
- `nonce` token grabbed from Braintree
- Payment query created (using token)
- Payment handled
- Payment status returned
This is an example of the data flow from a file perspective (using
Links to internal docs coming soon
We are going to be using a Sandbox account for this but you could just as easily create a live account.
From the admin click on the API section. Here you'll want to create an
API key & a
Tokenization Key. You'll need these a little later.
Create your provider
We then include this in our config file. We also pass some basic config (nothing with sensitive data e.g. API keys).
To get this up and running we will do this in our
server/config/local.json. For production config you should read these docs.
You will now have access to all of these details in your provider. They will be passed as
Each payment provider should include 2 methods.
initialize when the provider is initialized and
validate when the payment is submitted.
We can use the
initialize method to pass data from the provider to our Falcon Client components.
We will install this package
client side. It does a lot of the heavy lifting for rendering a Braintree form with hosted fields.
You can either install this with
We now need to create a frontend component for our payment method and a plugin to handle the data.
<HostedField> components should have associated labels.
It's worth reading the package docs to see how the
<Braintree> component works. The main detail we need to know about is the
This returns a function, which when run returns a payment token (
nonce) from Braintree. We need this to process transactions.
demo-v2 example project the payment methods are mapped to components in 2 files.
In these files methods added to your config (
server/config/default.json -> payment/providers) are mapped to frontend components. We need to add Braintree to that mapping.
PlaceOrderSection.js maps the component based on it being within the
If you visit the checkout now you should see Braintree as an option and should also see the form appearing as expected.
The last step is to process the transaction. For this we will be using Braintree's GraphQL endpoint.
It's worth reading through their docs, especially if you want a more complex integration.
This package allows us to easily make well formatted GraphQL requests to 3rd party clients.
We install this
If you're using the
demo-v2 example project then you'll already have this
We can test the connection using the
ping query Braintree provide. To test this I've called the
ping method in the
initialize step. This way we should get a console log (in the terminal window running falcon server) when initializing the payment method on the frontend (visit the checkout and select Braintree).
We can now create the transaction in our
validate method in the provider.
That's it, our code will take care of the rest and send you to the success page or display your error. It's worth noting we've not added much error handling, styling or testing that you will need to use this on a production environment.
This code is not production ready, please only use it as an example