The Modal Checkout is a WooCommerce-based checkout that is used by the Checkout Button block and the Donate block. It allows readers to make purchases without navigating away from their current page in your site.

The Modal Checkout will be used automatically for checkouts when supported — you don’t need to turn it on to enable it, but there are a few settings you can change, detailed below.

Customizing Billing Fields

You can change what Billing Fields are displayed in the Modal Checkout by navigating to WP Admin > Newspack > Reader Revenue, and clicking on the Donations tab.

The fields you select will be used for products that don’t require shipping. When a product requires shipping, all of the address fields will be shown.

Displaying Transaction Details

Transaction Details are hidden by default, but will be displayed automatically if you’ve set your site’s store up to charge taxes, or if shipping or fees apply to the item being purchased. They will also be displayed when making a purchase with recurring payments, like a subscription or monthly or annual donations. This way, the extra information is only presented to readers when it adds more context about their purchase.

The Transaction Details are displayed on the second step of the Modal Checkout:

Checking Out with Name Your Price

When a product has Name Your Price enabled, the Modal Checkout will proceed with the product’s suggested price. On the second step of checkout, readers will have the option to increase the price they pay.

This is only applied to non-donation products that are purchased with the Checkout Button block.

Products with Variations

When a product has multiple variations, and the Checkout Button block is set to allow readers to pick a variation on checkout, the Modal Checkout will first present a grid of available variations, their names, and their prices:

Applying Coupons

When coupons are enabled in WooCommerce, readers will be able to click a link at the top of the modal to enter their coupon information.

Supported Payment Gateways

The Modal Checkout officially supports the following payment gateways:

  • WooCommerce Stripe Gateway is fully supported, and requires minimal setup.
  • PayPal Payments is our one supported gateway for accepting payments from PayPal. PayPal Payments requires some specific settings to work with the Modal Checkout — there’s more information about those settings here.

Note: Nearly every aspect of WooPayments is supported except for the WooPay express pay option. This option is not supported in Newspack because it cannot be used in iframes, such as our Modal Checkout.

The Modal Checkout also supports WooCommerce’s core payment options for non-subscription purchases:

When an unsupported payment gateway is enabled, the Checkout Button and Donate blocks will use the regular full-page WooCommerce checkout flow instead of the Modal Checkout.

Covering Transaction Fees

Readers can opt into covering transaction fees at the point of checkout. In the Newspack > Reader Revenue > Payment Methods > Additional Settings, you’ll see options for “Transaction fees”:

These options let you configure how much extra to add to the transaction’s total. The default values are set to Stripe’s standard 2.9% + 30¢ fee.

When prompted to enter payment details during a donation transaction, the reader is presented with the option to cover the transaction fees. If they opt in, the total amount of the transaction will be increased by the configured amount. To make that box appear, you must enter a Custom Message, such as the one shown here:

Support Home

Modal Checkout Table of Contents

Reader Revenue Table of Contents