Carrd is one of the easiest ways to build a one-pager site and comes packed with great starting templates. If you are looking to build a simple marketing page and start collecting emails or even better pre-sales, look no further.
There are 2 ways to start collecting payments using Carrd and Payhere, the first one is simple and will work with any Carrd plan.
Integration one: Simple link
When you have configured your plan and set your pricing in payhere use the 'Copy link' button to grab the link to your hosted payment form.
Take this link and use it as the link on your 'Buy now' button in carrd.
Done. Now when your customers click on your button they'll be taken to your hosted payment form using payhere. (optional) When configuring your plan you can return them back to your Carrd site by setting your success URL.
Integration two: Payhere embed (Requires Carrd Pro Plus plan)
Using this method it definitely looks a little more slick and makes the payment form feel like it's built directly into your own site.
Step 1: Setup the embed code
The first thing we need to do is insert payhere's embed code. In Carrd click the '+' button to insert a new element and choose 'Embed'
You'll want to set style to 'hidden' and in the code box paste the following snippet.
Step 2: Inserting your button
Hit the '+' button again to insert a button on your page, you can set the text to whatever you want, we've gone with 'payhere'.
Now following integration one, grab your plans link from the payhere merchant admin, you can set your buttons URL to this link.
Finally we need to set a hidden attribute on the button so it works with our embed code, click the settings cog at the top of your button properties and scroll down to the attributes box. In here you'll want to enter:
data-payhere-embed=[YOUR PLAN LINK]
N.B. be sure not to wrap the plan link in quotes.
Once you have done that, save and publish your site and you should have a lovely payment modal open when your button is clicked 😁
If you run into any issues let us know and we'll be happy to assist you!