---
title: "Offering a pre-order 'pay early' option"
slug: "offering-a-pre-order-pay-early-option"
date: "2025-07-11T11:40:37+00:00"
modified: "2026-05-05T04:46:53+00:00"
author: "admin"
canonical: "https://preproduct.io/docs/offering-a-pre-order-pay-early-option/"
---

> > When products are on [charge-later or deposit-upfront pre-order](https://preproduct.io/docs/types-of-pre-orders/), PreProduct lets you offer a ‘pay early’ option — a great way to boost upfront cashflow. You can also offer an exclusive discount as an incentive, either as a percentage or fixed amount.

### Admin setup

##### Setup for individual listing

This option is off by default. To enable it, head to PreProduct’s main dashboard, click the listing name, and click the “Other payment options” button on the left of the screen.

##### Options

- **Name** – The customer-facing label for the option. For example: *“Pay early and save 25%”*
- **Discount Amount** – A fixed monetary discount per unit (in your store’s primary currency)
- **Discount Percentage** – Alternatively, set a percentage discount per unit

To remove the option, just click the red **“Remove”** button from that same screen.

![Adding a pay-early option](https://preproduct.io/wp-content/uploads/2025/07/pay-early-option.gif)

##### Setup via templates

PreProduct also supports pay-early options on the template level, meaning you can set and manage the setting across many listings from the [templates](https://preproduct.io/docs/templates/) screen.

!["Other payment options" on the templates screen](https://preproduct.io/wp-content/uploads/2025/10/template-w-multistep-option-1024x367.png)

### Storefront

When a listing has a ‘pay early’ option enabled, a selection box appears above the pre-order button. It uses your brand color and font settings from PreProduct’s setup screen.

##### Customising appearance options

The name for the ‘pay early’ option comes from the step above. You can also customize the name of the regular pre-order option via **Setup → Customise wording** — update the **“Pre-order plan name”** field near the bottom of that screen ([customised wording doc](https://preproduct.io/docs/on-page-cart/)).

![](https://preproduct.io/wp-content/uploads/2025/07/pay-early-and-save-storefront-1024x690.png)

##### Developer customising options

You can style each element of the ‘pay early’ UI by adding a `window.ppSelectableSellingPlansStyles` JavaScript object. PreProduct will apply your styles accordingly.

Here are the supported keys:

```javascript
window.ppSelectableSellingPlansStyles = {}

window.ppSelectableSellingPlansStyles[`.pp-selling-plans`] = `background: #fff; color: pink;`
window.ppSelectableSellingPlansStyles[`.pp-selling-plans__option`]
window.ppSelectableSellingPlansStyles[`.pp-selling-plans__radio`]
window.ppSelectableSellingPlansStyles[`.pp-selling-plans__name`]
window.ppSelectableSellingPlansStyles[`.pp-selling-plans__option:checked`]
window.ppSelectableSellingPlansStyles[`.pp-selling-plans__option::after`]
window.ppSelectableSellingPlansStyles[`.pp-selling-plans__option:checked::after`]
```

### **Customer Portal & Shopify Order Status Page**

PreProduct also supports a different kind of ‘pay early’ feature on the **customer portal** (enabled by default) and **Shopify order status page** (disabled by default).

This version isn’t designed for marketing — it’s more about giving customers a way to pay off pre-orders using different payment methods.

For more details, check out our [Customer Portal documentation](https://preproduct.io/docs/customer-portal/).