How to Accept Payments in Carrd

By David Nge • Last Updated: November 21, 2022

Here's a step-by-step tutorial on how to implement checkout buttons so you can start accepting payments in Carrd.

In summary, we'll go over:

By the end of this tutorial you'll have successfully implemented one of the 3 checkout options and start accepting payments whether's if you're selling a product, accepting a donation, or getting customers to subscribe to your membership.

💡
Carrd is currently running a whopping 40% Black Friday discount on the Pro plan. Get it while it lasts.

Let's dive right in.

Adding a Stripe Checkout Button

This step assumes you already have an existing Stripe account and that you've added your a bank account for payouts, if you have not then follow Stripe's documentation to do so.

In order to accept accepting credit card payments via Stripe on Carrd you first have to enable third party checkout on Stripe.

Log in to your Stripe account, then head to the checkout settings page.

Scroll down the to bottom of the page, and in the Next steps section, select Enable client-only-Integration Allow.

Enable client-only integration in Stripe dashboard
Enable client-only integration in Stripe dashboard
Click Allow to confirm
Click Allow to confirm

Then add your Carrd URL to the Domains field. If you don't have a URL yet, you have to publish your Carrd website.

Add your Carrd URL so Stripe will recognize the website you're integrating it with
Add your Carrd URL so Stripe will recognize the website you're integrating it with

Next, head to the Stripe's Products page and create a new product. This is the product you'll eventually sell on Carrd:

Create a new product you're going to sell on Carrd
Create a new product you're going to sell on Carrd

In the product information page, set the

  1. Name of the product
  2. Product description
  3. Product Image
  4. Price
  5. One time or recurring payment
Set the product details
Set the product details

Then click Save Product.

You should now see the new product in the Products page.

Your new product created on Stripe
Your new product created on Stripe

Click into the product and copy the Price ID.

The Price ID starts with Price_XXXXXX. Note down this Price ID (or copy into a text editor) as you will need it later on when you create the checkout button in Carrd.

Click into the product and copy and Price ID
Click into the product and copy and Price ID

Next, head to Stripe's API Key dashboard and retrieve your API keys. If you have no idea what this is, it's just a piece of code you need to copy to enable Stripe's integration with Carrd.

From this page, copy your Publishable Key and the Secret Key into a text editor, you will need this later on to integrate with Carrd.

Copy your Stripe API Keys
Copy your Stripe API Keys

Once done, head to your Carrd editor.

In the Carrd editor, create a new Widget element.

Create a new widget in Carrd
Create a new widget in Carrd

In the Widget settings, set the following:

Set the Stripe checkout button details
Set the Stripe checkout button details

Click Done once you've set up the Stripe checkout button and Publish your Carrd website.

You've now set up the Stripe checkout button! Let's give it a try.

Head to your Carrd website and click on the pay button.

The Stripe checkout button now on your published Carrd site
The Stripe checkout button now on your published Carrd site

You should be redirected to the Stripe checkout page.

Clicking the Stripe checkout button will redirect to the stripe checkout page
Clicking the Stripe checkout button will redirect to the stripe checkout page

If you see the Stripe checkout page that means you've successfully implemented the Stripe checkout on your Carrd site and you can now accept payments via credit card!

Adding a Gumroad Checkout Button

This step assumes you have an existing Gumroad account. If not then create a Gumroad account here.

Login to you Gumroad account and head to the Products Page.

You will need to create a new Gumroad Product in order to start selling on your Carrd site.

If you have an existing Gumroad product, skip to this step to copy the product URL.

Create a new Product on Gumroad and fill in the product details.

Create a new product in Gumroad
Create a new product in Gumroad
Setting a product name and price
Setting a product name and price

Once you're done, publish your product.

Fill in the rest of product details and publish the product
Fill in the rest of product details and publish the product

Back in the Products page, click into one of the products you've created.

Head to the products page and click on a product
Head to the products page and click on a product

Copy the product URL. You will need this later on when you add a checkout button in Carrd.

Copy the product URL
Copy the product URL

Once done, head to your Carrd editor.

In the Carrd editor, create a new Widget element.

Create a new widget in Carrd
Create a new widget in Carrd

In the Widget settings, set the following:

Set the widget setting for Gumroad
Set the widget setting for Gumroad

Click Done and publish your website.

You've now enabled Gumroad checkout on your site!

New Gumroad checkout button in Carrd
New Gumroad checkout button in Carrd

Clicking the checkout button will enable the Gumroad pop up.

Clicking the checkout button will show the Gumroad pop up
Gumroad checkout page when a customer click "I want this!"
Gumroad checkout page when a customer click "I want this!"

Gumroad will automatically set up the checkout workflow where your customers can then fill their credit card info and for you to start accepting payment on your site :)

Adding a PayPal Button

This step assumes you have a Paypal Business account. If you don't have one sign up here.

First, login to your Paypal account and head to the Business Account settings page.

Copy your PayPal Merchant ID. You will need this when you set up a Paypal button on Carrd later on.

Login to your business account settings page and copy your merchant ID
Login to your business account settings page and copy your merchant ID

Once done, head to your Carrd editor.

In the Carrd editor, create a new Widget element.

Create a new widget in Carrd
Create a new widget in Carrd

In the Widget settings, set the following:

Set the widget settings for Paypal
Set the widget settings for Paypal

Once completed click Done and Publish your site.

You've now added a Paypal checkout button on your site and ready to accept payments.

Paypal button now enabled in Carrd
Paypal button now enabled in Carrd