The Checkout Button Block allows you to create a purchase experience for donations, subscriptions or other products. The Checkout Button uses a streamlined modal checkout process that allows customers to make their purchase quickly and easily while remaining on the same page.

Using the Checkout Button Block

Before using the Newspack Checkout Button Block, you will need to complete the Reader Revenue Wizard setup for setting up Reader Revenue with Newspack.

Once that’s complete, you can add a Checkout Button Block by following these steps:

  1. Edit the post or page where you would like to add the block.
  2. Open the block inserter and search for Checkout, or scroll down to the Newspack section of the drop-down menu and select Checkout Button.
  1. This will add a Checkout Button to your editor. Like the regular Button block, you can edit the Checkout Button’s label, and use the style options in the right sidebar to change its appearance.
  2. The Checkout Button will only appear on the front-end after you assign a WooCommerce product to it. To do this, select the button, and use the field under “Select a Product” in the right sidebar to search for a product.

Customize the after-purchase experience

You can also optionally use the options in the ‘After purchase’ panel to customize what happens after the purchase is complete. You will be able to edit the label that displays at the bottom of the final modal screen, and change the button’s behavior between three built-in options:

  • “Close the modal” to have the window close automatically (this is the default behavior).
  • “Go to a custom URL” to send customers to a different page on your website or even to another website.
  • “Go to the previous page” to return to the page before the checkout started. You might want to use this, for example, if you link to an offer landing page from a content gate and would like to return readers to the page where they encountered the gate.

Customize ‘Name Your Price’ products

The Checkout Button block will not display the “Name Your Price” field for products that allow customers to pick their prices (like the default Newspack Donations products), but you will be able to set the price on a per-button basis. To do this:

  1. Add a Checkout Button Block to the editor.
  2. In the “Product” panel in the right sidebar, pick a product that uses “Name Your Price”.
  3. A new panel called “Name Your Price” will appear in the right sidebar, below the “After purchase” panel”. It will list the suggested and minimum price for the product, and allow you to change the price that the Checkout Button will charge:
  1. Edit the price, and publish the page.

Once the page is published, the Checkout Button Block will use your custom price in the modal checkout. This price can be changed to different amounts on a per Checkout Button Block-basis.

Customize product variations

Selecting a variable product allows you to let the reader select the variation before checkout or you can determine which variation should be purchased:

Allowing the reader to select the variation will render an intermediary modal for variation selection before the checkout:

Support Home

Checkout Button Block

Reader Revenue Table of Contents

Block Table of Contents