The Third Bear
Out of the box, ActionKit supports payments via credit card, ACH direct debit in the USA (if you’re using Braintree) and PayPal.
If Braintree is your backend payment processor, it’s relatively simple to add Apple Pay, Google Pay, and even Venmo into your donate pages.
Like credit card payments, these payment methods all work by sending the sensitive details directly from the end user’s browser to Braintree, where they’re validated and stored; getting back a “token” from Braintree that doesn’t contain any sensitive details; and handing that token to ActionKit for further processing and storage. ActionKit’s servers then handle the details of passing the token back to Braintree to actually finalize a payment and store the results.
That data flow means that you don’t need any custom server-side code — you can accept Apple Pay donations with just some edits to your ActionKit templates.
The specifics will depend a lot on your specific donate page layout and how you want the user experience to flow. And there are some potentially tricky details, particularly if you’re using a three-step donate flow instead of one-step, or if you’re already supporting ACH and PayPal payment methods on the same page. But the gist is very simple:
- Add Braintree’s client libraries for Apple Pay (and other desired extra payment methods) as
scripttags - After Braintree is initialized in general by ActionKit, initialize Apple Pay (and other desired extra payment methods) in Javascript code. Braintree’s developer documentation breaks down the steps involved; basically you’ll check if Apple Pay is supported on the end user’s current device, hook up Braintree’s Apple Pay features if so, and attach an event listener to a “Pay with Apple Pay” button.
- In that event listener, you’ll initialize an Apple Pay payment request, which shows a device-specific prompt to the end user.
- When that payment request succeeds and gets routed automatically through Braintree for tokenization, you’ll grab the special payment token from Braintree, and put that token where ActionKit is already expecting to find one, as if it were a credit card payment.
- You can also grab other donor info from the Apple Pay prompt. Depending on how you configure it, you can collect email address, billing address, and other details during the Apple Pay prompt, which can then be passed back to ActionKit.
- Finally, you’ll either auto-submit the form, or stash all of the above in hidden form fields and present the user with a final confirmation screen, depending on your UX preferences.
- When you do submit the form, you’ll also want to include some kind of custom action field that identifies this as an Apple Pay payment, like
action_payment_is_applepay=1or some other ad-hoc convention. (On the backend, remember that ActionKit is just getting an opaque payment token to process the donation, so it has no idea that the token came from anything other than the standard credit card method it’s expecting.)
You’d repeat with essentially the same high-level steps if you want to support Google Pay and Venmo.
The Rough Edges
This all works really well, but there are a few places where things aren’t quite perfect.
The biggest of these is recurring donations. As far as we can tell, this should be fully supported with all of the payment methods discussed here. But in our testing we’ve run into errors on the ActionKit side that we haven’t worked through yet. For now we recommend hiding the Apple Pay option if the end user selects recurring.
The second is that you’ll need to fork ActionKit’s Braintree Javascript library. This is for a very trivial reason: you need to run some Javascript code to initialize payment methods after Braintree itself has been initialized, and you need access to the Braintree Javascript objects. We’ve filed a ticket with ActionKit requesting a place to hook in code so that forking isn’t necessary, but for now it’s unfortunately required.
The third is that you need to add a specific file at a specific URL in your ActionKit instance. This is specific to the Apple Pay integration: as part of the setup process with Apple, you’ll get a file that you need to host at https://act.yourdomain.com/.well-known/apple-developer-merchantid-domain-association so that Apple can verify your domain ownership. ActionKit doesn’t have features to host static files at custom locations, but they may be able to help on a one-off basis if you file a support ticket and send them the file that Braintree gives you to host at that URL. Alternatively, if you’re running ActionKit behind Cloudflare with proxying enabled, you can set this up on the Cloudflare side.
If all of this sounds too complicated we’re of course happy to just take care of it for you! This is not a big project — reach out and we can talk about your setup and give you a customized estimate.