This blog tutorial will show one possible solution related to implementing custom payment gateway with Thrinacia Atlas SaaS (not On-premises solution) at the front-end AngularJS or Web UI level. Currently Thrinacia Atlas supports Stripe natively as core payment gateway, however if you wish to use something other then Stripe for payment processing, then this tutorial may be useful for you.
Note that this solution requires you have your own web server (CORS enabled) capable of interfacing to the Thrinacia Atlas REST API and custom payment gateway. Client web server acts as a proxy for all online transactions.
High level overview diagram illustrating how to accomplish this is shown below.
Basically the front-end AngularJS controllers and views need to be modified so that when user clicks to Contribute a transaction detail is not sent to Thrinacia Atlas for processing, but instead it’s sent to custom web server backend for processing. Such web server will need to make use of CORS as browser will be making Cross Origin request.
Client Web Server will then need to make another request to Custom Payment Gateway with payment information (such as credit card or bank card), and then if such transaction is successful make another request to Thrinacia Atlas REST API to record such transaction via manual transaction endpoint described here: https://origin.thrinacia.com/api-docs#account-campaign-pledge-manual-POST
When calling Thrinacia Atlas REST API endpoint for manual transaction from your web server you will need to ensure you are calling it as Portal Administrator account. This means you will need to save Portal Administrator username/password tokens securely on the web server somewhere and call the endpoint via direct server request and not from client browser to ensure credentials are not exposed to public for security reasons.
Note that request passed to your client web server should contain customer identifier such as email. You can then easily lookup person_id via following endpoint: https://origin.thrinacia.com/api-docs#account-portal-person-GET (again sending request as Portal Administrator Account).
If such person does not exist on Thrinacia Atlas, you will need to create it via following endpoint before you can create manual transaction (unless you are using guest checkout option): https://origin.thrinacia.com/api-docs#account-portal-person-POST
The implementation depends on how you want the workflow to operate. If you for example want everyone to go onto guest checkout, you won’t require person_id. If you want however to have valid person record with manual transaction you will need to ensure you can retrieve it or create it.
Thrinacia Atlas also offers two modes of processing contributions (direct and post procesing). If you need to emulate post-processing, you will likely need to write some code on client web server that will run in background and process transactions that were previously queued up and approved for processing by custom payment gateway, then send those transactions for manual transaction processing to Thrinacia Atlas.
Additional Notes and Tips:
To make things easier to implement, you can do the following:
- Enter dummy values for Stripe API tokens, as you won’t be using Stripe likely
- Comment out or disable Funding Step on Campaign Creator, if you use Direct Transactions feature, then this gets disabled automatically
- AngularJS controllers and views you may need to modify include: “InlineContributionCtrl.js”, “PledgeCampaignCtrl.js”, “inline-contribution.html” and “pledge-campaign.html”
- Edit “submit()” function to call client endpoint; change
Restangular.one('campaign', $scope.campaign_id).one('pledge').customPOST(pledgeInfo)to call client web server endpoints instead
- On response from client web server you can show thank you modal or you failure, depending on the status returned from the client web server endpoint (success or failure)
With each Thrinacia Atlas account you have ability to modify code via SFTP. Some plans additionally offer GIT access. Please make sure to use proper credentials to login via SFTP or public key if you are using GIT access.
CORS use is beyond this tutorial and it is assumed the reader knows how to use CORS and configure it correctly with their own web server. For more information about CORS please refer to the following tutorial: http://www.html5rocks.com/en/tutorials/cors