Use the Payment Content Block

Sell stuff directly on your landing page with the Payment content block. The Payment block syncs products from your payment processor, like Square or Stripe to Mailchimp. And if you add a new product directly to a Payment block, it will automatically be added to your payment processor.

In this article, you’ll learn how to use a Payment block on your landing pages.

Before you start

Here are some things to know before you begin this process.

• To use the Payment content block, you’ll first need to connect your payment processor to Mailchimp. Learn how to connect Mailchimp to Square and Stripe.
• Payment blocks are only available for landing pages.
• You can use one Payment block per page and one payment type per block.
• Recurring payments or subscriptions are not supported at this time.
• Make sure the address in your account’s Billing Settings is set to a country that matches what you have set in your payment processor. To learn more, check out Square and Stripe resources on international payments.

How it works

When you add the Payment block to your landing page design, it creates a space for a product image, title, cost, description, and purchase button. You can browse and choose a product from your Square or Stripe account, or add a new product in Mailchimp.

When page visitors click the button, they’ll see a checkout form to place an order directly from your page.

Mailchimp syncs with your payment processor each time you access a Payment block. New products added to a Payment block will sync to your payment processor immediately, and you can make additional changes to your product details on the site details page for your integration.

About shipping and sales tax

First, make a note of the sales tax and shipping rates for the product you want to sell. The Payment content block doesn’t add sales tax or shipping charges to your product unless you enter them in the Payment block.

After you choose a product, enter the correct rates in the shipping and sales tax fields. We’ll apply these charges to the total cost of the product at checkout.

If your payment processor lists the sales tax as part of the product price, you’ll still need to enter your sales tax rate in the Payment block in Mailchimp. Learn how to manage tax settings for Square and Stripe.

Add a product

You can add an existing product from your store or add a brand new product in Mailchimp.

Add an existing product

When you click on a Payment block, Mailchimp syncs to your payment processor. You can then choose products you’ve already created.

To add a product that’s already in your payment processor, follow these steps.

1. Click and drag the Payment block into your layout.
   
   This block will not be available to drag from the editing pane if it is already in your page design.
2. On the Content tab, click Change Product.
   
3. In the Select a Product modal, search for the product you want and click Insert.
   

Add a New Product

When you add a brand-new product directly to the Payment block, we'll sync it to your payment processor so you can sell it through Mailchimp immediately. Title and Price are the only fields required to add a new product.

To add a new product, follow these steps.

1. In your layout, click the Payment block.
2. Click Change Product.
   
3. Click Add.
   
4. In the Title field, type your product’s name.
   
5. Click Browse to open your file manager and choose an image. Or, drag and drop an image from your computer into the Select a product modal. If you do not have an image, you can skip this step.
   
6. In the Description field, type a description of your product. This is optional.
7. In the Price field, type the price of your product. Your new product must be at least $1.
8. Click Save.
   

Nice! Your product will automatically be added to your store.

Customize the payment block

After you choose or add a product, you can customize the content that will appear on your page. These updates will only change the product details in the page you’re working with. To change the product details in your payment processor, update the product on your site details page.

To customize the Payment block, follow these steps.

1. In your layout, click the Payment block.
2. Update the Title, Shipping, and Tax fields. Enter 0 in fields that do not apply.
   
3. To add a short description to your product, toggle the Description slider and use the field provided.
   
4. To update your product’s image, click Replace, Edit, or Remove.
5. To add an image gallery to your page, toggle the Additional Images slider. Then, click the plus sign to choose images from the content studio.
   
6. To edit your checkout button text, use the Button Text field.
   
7. Click the Style tab to edit styles for the product title, product price, image, and button.
   
8. Click the Settings tab to choose a layout and adjust the checkout button’s alignment and width.
   
9. Click Save & Close.

Great! Now that your Payment block is all set, continue building your page and publish it when ready.

Change and sync the price of a product

To change the price of a product in a Payment block, you’ll first update the product price through your site details page. After you make any changes, navigate back to the product block in your landing page to sync the updated price.

To learn how to change the price of Square products in your landing page, check out Connect or Disconnect Mailchimp for Square.

To learn how to change the price of Stripe products in your landing page, checkout Connect or Disconnect Stripe.

Sync updated price

To update the price displayed in an existing Payment block, follow these steps.

1. In your layout, click the Payment block.

2. On the Content tab, check to make sure that the new price is listed. If it takes a few seconds to sync, you’ll see the syncing status.

   

3. When the price has synced, click Save & Close.

4. When you're ready to publish your landing page, click Save & Publish.