The Recharge Order Upcoming event triggers a Listrak Custom Event when a customer's next order will occur soon. In the journey, you can message a customer to confirm their subscription date, display their billing details, and display the items included in the subscription.
This guide will outline the personalization options to customize the journey and messages triggered by the Recharge integration.
Personalizing the Journey with Custom Event Properties
The Custom Event called Recharge Order Upcoming[[Your Store Name]] is automatically created as part of the integration process. Recharge passes the following payload to Listrak customized with the specific product information for the order.
{
"eventCategory": "order",
"eventType": "OrderUpcoming",
"eventTimestamp": "2026-04-30T11:00:00.0000000+00:00",
"customer": {
"email": "customer@example.com",
"firstName": "Jane",
"lastName": "Smith",
"externalCustomerId": "24662915678374",
"billingCity": "Philadelphia",
"billingProvince": "Pennsylvania"
},
"subscription": {
"id": "784594001",
"status": "active",
"createdAt": "2026-03-01T10:00:00+00:00",
"updatedAt": "2026-04-30T11:00:00+00:00",
"cancelledAt": null,
"cancellationReason": null,
"orderIntervalUnit": "month",
"orderIntervalFrequency": 1,
"nextChargeScheduledAt": "2026-05-30",
"isPrepaid": false
},
"product": {
"title": "Classic Cotton T-Shirt",
"price": "18.74",
"quantity": 1,
"productId": "15268877402278",
"variantId": "56305470505126",
"sku": "T100",
"imageUrl": "https://cdn.example.com/tshirt.jpg",
"linkUrl": "https://store.example.com/products/classic-cotton-t-shirt",
"productHandle": "classic-cotton-t-shirt"
},
"order": {
"id": "1369590001",
"totalPrice": "26.74",
"totalDiscounts": "0.00",
"lineItemsCount": 1,
"chargeId": "1369590001",
"lineItems": [
{
"title": "Classic Cotton T-Shirt",
"price": "18.74",
"quantity": 1,
"productId": "15268877402278",
"variantId": "56305470505126",
"sku": "T100",
"imageUrl": "https://cdn.example.com/tshirt.jpg",
"linkUrl": "https://store.example.com/products/classic-cotton-t-shirt",
"productHandle": "classic-cotton-t-shirt"
}
]
}
}
The JSON is saved to a Custom Event field and used to personalize the message. The table below outlines all fields created in Custom Event. Fields other than the JSON can be used as criteria in a Custom Event Decision Split, allowing customers to receive different messages or different logic based on the values of these fields.
Property Name | Data Type |
CustomJson | String |
product_title | String |
customer_billing_city | String |
customer_billing_province | String |
Personalizing the Message with Recharge Data
You can customize any message(s) in the journey based on the data passed in the JSON. The table below outlines the fields you can include in a message to display the data about a customer's upcoming order. The field values will match what is included in the payload mentioned in the previous section.
Object | Fields Used |
|
|
|
|
|
|
|
|
You have the option to create a fully coded HTML email from scratch or to edit the template that includes the basic design elements listed below.
If you code a message yourself, you can add any or all of fields from the table above. To display the personalized data, you will use the format {{object.fieldname}}. For example, to display the customer's first name uses the following tag. {{customer.firstName}}.
Example Template
You can also use the example template as a starting point.
[[HB BlockType="Custom" Source="Custom.customJson"]]
<div class="email-wrapper">
<div class="email-container">
<div class="email-header"><div class="brand">Your<span>Store</span></div></div>
<div class="email-hero">
{{#if subscription.isPrepaid}}
<h1>Your prepaid order is on its way! 📦</h1>
<p>{{customer.firstName}}, your prepaid subscription order will be processed soon.</p>
{{else}}
<h1>Your next order is coming up 🛒</h1>
<p>{{customer.firstName}}, here's a heads-up — your subscription order is about to be charged and shipped.</p>
{{/if}}
</div>
<div class="email-body">
<p class="greeting">Hi <strong>{{customer.firstName}} {{customer.lastName}}</strong>,<br/><br/>Your upcoming subscription order is listed below. If you need to make any changes, do so before the charge date.</p>
<p class="section-label">Order Items</p>
<table style="width:100%;border-collapse:collapse;margin:0 0 28px;">
<thead>
<tr>
<th style="padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:2px solid #e2e8f0;text-align:left;"></th>
<th style="padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:2px solid #e2e8f0;text-align:left;">Item</th>
<th style="padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:2px solid #e2e8f0;text-align:left;">SKU</th>
<th style="padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:2px solid #e2e8f0;text-align:left;">Qty</th>
<th style="padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:2px solid #e2e8f0;text-align:left;">Price</th>
</tr>
</thead>
<tbody>
{{ForAll order.lineItems}}
<tr>
<td style="padding:12px 14px;border-bottom:1px solid #f1f5f9;"><img src="{{imageUrl}}" style="width:48px;height:48px;object-fit:cover;border-radius:6px;" /></td>
<td style="padding:12px 14px;border-bottom:1px solid #f1f5f9;">{{title}}</td>
<td style="padding:12px 14px;border-bottom:1px solid #f1f5f9;">{{sku}}</td>
<td style="padding:12px 14px;border-bottom:1px solid #f1f5f9;">{{quantity}}</td>
<td style="padding:12px 14px;border-bottom:1px solid #f1f5f9;">${{price}}</td>
</tr>
{{/ForAll}}
</tbody>
</table>
<div style="background:#f8fafc;border-radius:8px;padding:16px 20px;margin:0 0 28px;display:flex;justify-content:space-between;align-items:center;">
<span style="font-size:14px;font-weight:600;color:#64748b;">Order Total</span>
<span style="font-size:20px;font-weight:700;color:#1a2b4a;">${{order.totalPrice}}</span>
</div>
<table class="detail-table">
<tr><td class="label">Charge Date</td><td class="value">{{subscription.nextChargeScheduledAt}}</td></tr>
<tr><td class="label">Order ID</td><td class="value">{{order.id}}</td></tr>
<tr><td class="label">Discounts</td><td class="value">${{order.totalDiscounts}}</td></tr>
<tr><td class="label">Items</td><td class="value">{{order.lineItemsCount}}</td></tr>
</table>
<div class="cta-wrap"><a href="#" class="cta-btn">Review and Manage Order</a></div>
</div>
<div class="email-footer">
<p class="footer-brand">YourStore</p>
<p>This email was sent to {{customer.email}}</p>
<p>{{customer.billingCity}}, {{customer.billingProvince}}</p>
</div>
</div>
</div>
[[/HB]]