This is an alternative to Chargify Direct, in which you post the entire form to Chargify’s servers and they redirect the customer back to you. The Braintree Drop In UI still allows you to avoid extensive PCI compliance work (though some is still required!) and it gives you more control over the customer experience.
You’ll need these things before we begin:
- A Chargify account. Sign up for a free Developer account if you don’t already have one.
- A Braintree Blue Sandbox account for testing. Sign up here if you don’t already have one.
- A reasonable comfort level with developing web applications in your language/framework of choice.
- A basic understanding of the Chargify API. Start here.
Here is a simple example form:
You can tell from the different styling that the PayPal button as well as the Card Number and Expiration Date fields are coming from Braintree, while the other fields belong to the example application.
I found these articles helpful:
In addition to the usual name, address and email fields and anything else you need to collect, the signup page needs these additional things:
Note that the client token needs to be generated on your server and inserted into the page. This is explained in the Braintree articles linked above and can be seen in the example code.
Place this where you want the payment form to appear. In the example, it’s at the top of the form, but it doesn’t have to be.
Note that the
id of the
<div> needs to match what you configured as the
container in the
Note also that the container must appear inside an HTML form tag, since it will be inserting a field into the form. For example:
When the form submits, all of the form fields, including the new hidden field with the nonce that Braintree inserted, will be sent to your server.
When the form is submitted to your server, you’ll need to use the nonce that Braintree JS inserted to create a customer in Braintree.
Assuming it is successful, the result will contain a customer. The customer’s id is what Chargify needs in order to process payments and renewals, and is supplied as the ‘vault_token’.
Alternately, if the customer has supplied PayPal credentials instead of a credit card, then the ‘customer’ from Braintree will have an array of ‘paypal_accounts’ instead of ‘credit_cards’, and you will need to supply
paypal_account_attributes instead of
credit_card_attributes when you create the subscription.
The Chargify Subscriptions API will complain if you don’t send a
payment_method_nonce, but you can supply any value because it is ignored in favor of the
paypal_email field. This is only for display on the Payment Details tab, but it may cause confusion at some point if it doesn’t match the email that the customer gave to PayPal when signing up.
The customer navigates to your page, fills out the form which includes the Braintree Drop-In UI as well as any additional fields you require, and submits the form to your server. You use the nonce to create a customer in Braintree, and then use the ID of the Braintree customer as the
vault_token to create a subscription using the Chargify API.
You can now change the default payment profile on an existing subscription via the API: http://help.chargify.com/announcements/change-payment-profile.html
Alternately, to update the payment details on an existing subscription, you may direct customers to the Chargify-hosted Self-Service page, the Billing Portal, or you may use the Chargify Direct
I hope that helps you get started using Braintree JS with Chargify! If you need more help and you have a paid account with Chargify, you can open a support ticket with them. Otherwise, if you’re on the free Developer plan, the best place to ask is on Stack Overflow.
The code for this example is available at https://github.com/wsmoak/chargify_braintreejs and is MIT licensed.
According to this article it isn’t possible to suppress the PayPal button in the Drop In UI. As long as PayPal is enabled for your Braintree account, the button will appear.