Use the Payment Content Block

Sell stuff directly on your landing page with the Payment content block. The Payment block syncs products from your Square account to Mailchimp. You can also add new products to a payment block that automatically sync to your Square account.

In this article, you’ll learn how to add a Payment content block to your landing page, choose or add new products, and customize its styles and settings.

Before You Start

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

  • Payment blocks are only available for landing pages and you can only use one Payment block per landing page. Make sure you’re familiar with Landing Pages in Mailchimp.
  • To sell things on your landing page with the Payment block, you’ll need to connect Square to Mailchimp.
  • Buyers from your landing page will be added to the Mailchimp list associated with your Square integration. Buyers who haven't opted in to marketing emails will be added as non-subscribed contacts, and can receive transactional emails, social ads, or postcards.
  • Products must be at least $1 to be synced or added to Mailchimp.
  • Make sure the address in your account’s Billing Settings is set to a country that’s currency matches what you have set in Square.

How It Works

The Payment content block includes space for a product image, title, cost, description, and checkout button. When visitors click the checkout button, they'll they’ll see a checkout form on your landing page.

checkoutform-landingpage

After they complete the checkout form, Mailchimp will send them a receipt.

When you add the block, you can browse and choose a product from your Square account, or add a new product directly into Mailchimp. We include the block by default in the Promote Products and Accept Payments templates. Because you can only choose one product in the Payment block, it works best for products that do not have variants. For example, a product with variants is a T-shirt that comes in Small, Medium, and Large.

Payment-content-block

Mailchimp syncs with your Square account whenever you access a Payment block. New products added to a Payment block will sync to your Square account immediately. You can make permanent edits to product details that sync to Square on your Connected Sites page.

Note

  • We recommend you include your preferred business contact information on your landing page in case buyers have a question or need help.

About Shipping and Sales Tax

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

After you add a Payment content block to your landing page and insert or add a product, you’ll need to 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.
example-productcontentblock-contenttab-details

If your Square account lists the sales tax as part of the product price, you’ll still need to enter your sales tax rate in the Payment content block in Mailchimp.

For more information about how to create and manage your tax settings in your Square account, check out Square’s article on the topic.

Insert the Payment Block

To insert the Payment content block on a new landing page, follow these steps.

  1. Navigate to the Campaigns page.
  2. Click Create Campaign.

    button-create-campaign

  3. Click Landing Page.

    create-landing-page

  4. Click and drag the Payment block into your landing page.

All set! Read on to learn more about how to add a product, add content, and adjust the style and settings of the Payment block.

Add a Product

There are a few ways you can add products to the Payment block.

To add products, you'll either insert one from your Square store or add a brand new product in Mailchimp.

Add a Product from Your Store

When you click on a Payment block, Mailchimp syncs to your connected Square account. You can choose from products you already have in Square.

To add a product that’s already in your Square store, follow these steps.

  1. In the landing page builder, click the Payment content block.
  2. On the Content tab, click Add Product.
    button-paymentblock-clickaddproduct
  3. In the Select a Product modal, search for the product you want to include, and click Insert.
    button-paymentblock-selectaproduct-clickinsert

Add a New Product

You can add brand new products to the payment block. You’ll be able to sell a new product through Mailchimp immediately, and we’ll sync the product to your Square store. The title and price are the only fields required to add a new product.

To add a new product, follow these steps.

  1. In the landing page builder, click the Payment content block.
  2. Click Add Product.
    button-paymentblock-clickaddproduct
  3. Click Add.
    modal-selectaproduct-paymentblock-clickadd
  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.
    button-uploadanimage-clickbrowse
  6. In the Description field, type a description of your product.
  7. In the Price field, type the price of your product. Your new product must be at least $1.
  8. In the SKU field, type the SKU of your product.
  9. Click Save.
    button-selectaproduct-clicksave

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

Customize the Payment Block

After you choose or add a product, you can customize the content that will appear on your landing page. These updates will only change the product in the landing page you’re working with. To change the product in Square, update the product on your Connected Sites page.

To customize the Payment block, follow these steps.

  1. In your draft landing page, click the Payment content block.
  2. Update the Title, Shipping, and Tax fields. Enter 0 into any fields that do not apply.
    example-productcontentblock-contenttab-details

  3. To add a short description to your product, toggle the Description slider and use the field provided.
    payment-content-block-toggledescription-on

  4. To update your product’s image, click Replace, Edit, or Remove.

    payment-content-block-editmainimage

  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 Manager. paymentcontentblock-addadditionalimages

  6. To edit your checkout button text, use the Button Text field.

    payment-content-block-buttontext

  7. On the Style tab, edit styles for the Product title, Product price, Image style, Button style, and Button text style.

    payment-content-block-styletab

  8. On the Settings tab, choose a layout and adjust the checkout button’s alignment and width.

    payment-content-block-settingstab

  9. Click Save & Close.

Continue building your landing page, and publish it when you’re ready.

Find data about the sales you make on your landing page reports. You can also find this sales data about the sales you make on your Mailchimp landing pages in your Square account.

Change the Price of an Item

To change the price of a product in a Payment content block on a published landing page, you’ll first update the product price in your Connected Sites page or in your Square account. To learn how to update the price in Square, check out Square’s item management guide. After you’ve updated the price, return to your landing page to re-sync the updated price information to your Payment content block.

To re-sync an updated product price to your landing page, follow these steps.

  1. Navigate to the Campaigns page in your account.
  2. Click the drop-down menu for the landing page you want to work with, and click Edit.

    campaigns dropdown edit LP

  3. In the Content section, click Edit Design.
    cb-button-landingpage-clickeditdesign

  4. Click the Payment content block in your landing page.
  5. 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.

    payment-content-block-syncingstatus

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

  7. Click Save & Publish.

You’re good to go! The new item price should be listed on your published landing page.


Was this article helpful?

Anything else we can do to improve our site?