Adding Manual Payment Options in Heightsplatform, using jQuery
HeightsPlatform has a super simple and sleek payment process. However, in my case, since I’m in China, I needed to provide a simple way to accept payment from other sources, namely, WeChat and Alipay and *PayPal.
So, I injected instructions to the user right inside of the payment window using jQuery. (See payment window screenshot below.) This is actually a mixed approach, as I didn’t want to use a completely separate payment gateway. If people still want to pay with a Credit Card, they can do so and immediately have access to the course. One day, I hope to have a fully integrated system where people can complete their payment, regardless of method, and immediately have access to the course without manually having to grant it to them, but until I can get that set up, this is my approach.
Currently, these non-credit card payments would only be for “manual” processing. In other words, they can register for the course on the site, but they won’t be able to pay for a specific course until they connect with me and make the payment of their preference. Once payment has been completed, the admin needs to manually grant access to the course. A bit clunky, but, here in China, WeChat is definitely the payment processing of choice and so it’s necessary.
*PayPal is actually a native option to use in Heightsplatform. However, because the currency I’m using (CNY) is not supported, it cannot work directly. Thus, I can bill them separately if the customer so desires (ironically in CNY).
The first thing you’ll need to do is navigate to “Account Settings” and then click on the “Custom Code” tab.
Here’s the script I’m using. You can edit the details for your own use. (Just be careful to not take out any brackets or quote marks, or you’ll break it.) This script looks for Heading 4 link of the payment form of the modal pop-up window and appends it there. It is, therefore, included with the heading 4 styling, so my span styling is relative to H4.
<script> $( '.modal-content .payment-form h4').append('<br /><br />WeChat, Alipay & PayPal:<br /><span style="color:black;font-size:0.65em;">*Requires manual confirmation.</span><br /><br /><span style="color:black;font-size:0.8em;">Please friend us on WeChat to set up payment.</span><br /><img src="[My WeChat QR Code Image Link]" width="100px"><br /><br />International Credit Card:<br /><span style="color:black;font-size:0.65em;">*Instant approval and access.</span>'); </script>