Skip to main content
Render a post-purchase success screen with the offer carousel inline. The 'thankYou' layout turns the moment right after a purchase into a complete branded thank-you. Use it when the placement fires right after a successful transaction: a checkout confirmation, a payment-success page, a subscription upgrade. For intercepting a user who didn’t purchase, see Reduce Paywall Churn instead.

​
The complete pattern

import Encore from '@encorekit/web-sdk';

Encore.configure({ apiKey: 'pk_live_yourpublishablekey' });
Encore.identify(customerId); // you know the customer post-purchase; identity powers attribution

const placement = Encore.placement('post-purchase', {
  layout: 'thankYou',
  redemptionMode: 'immediate', // one-tap claim fits a "you're done" screen (see below)
  appearance: { accentColor: '#0A6' },
  header: { title: 'Payment Successful' }, // also the default, shown for clarity
  offerContext: { title: 'A little thank you, just for you.' },
  footer: { text: 'Secured by Acme' },
});

// On your payment-success page, per transaction:
const result = await placement.show({
  receipt: { amount: '$9.99', purpose: 'Pro Plan' }, // → "You paid $9.99 for Pro Plan"
});

if (result.status === 'claimed') {
  // Advertiser tab already opened (immediate mode). The SDK renders nothing
  // after a claim; show your own confirmation here if you want one.
}

​
The options

// The 'thankYou' variant of PlacementOptions
{
  layout: 'thankYou';               // selects the post-purchase composition
  redemptionMode?: 'deferred' | 'immediate'; // per-placement; default from configure()
  appearance?: { accentColor?: string; backgroundColor?: string; textColor?: string }; // CSS color strings
  header?: { icon?: 'success' | 'none'; title?: string; subtitle?: string }; // payment-status block; title defaults to "Payment Successful"
  offerContext?: { title?: string; subtitle?: string }; // priming copy above the offers ('thankYou' only)
  footer?: { text?: string };                           // trust line below the carousel ('thankYou' only)
}
Copy slots take plain constant strings; the full field contract and render order live in the placement() reference. The receipt is per-transaction payment context passed to show(): { amount: '$9.99', purpose: 'Pro Plan' } renders “You paid $9.99 for Pro Plan” as the status subtitle. Render-only: it is never sent to Encore’s servers.

​
Why immediate mode

For post-purchase surfaces, set redemptionMode: 'immediate' on the placement: a claim opens the advertiser tab within the tap gesture and resolves { status: 'claimed' }. One action, no follow-up, on a page the user is about to leave. The default deferred mode instead records a claim for a later redeem() call; use it only if your flow genuinely has a second host step (see Redemption Modes).

​
Wire up analytics

To attribute the conversions and revenue this placement drives back to Encore offers, identify the user with your stable customer id (as in the pattern above) and forward your subscription events to Encore with that same id. Attribute Subscriptions to Offers is the how-to, including the simple path if RevenueCat already manages your subscriptions.

​
Gotchas

  • You own the payment copy. The receipt values and all header/footer strings come from your code; the layout renders no payment facts you didn’t pass. (header.title is the one composed default: “Payment Successful” when you omit it.)
  • receipt + header.subtitle: receipt wins (a warning is logged). For a fully custom status line, build the string yourself and pass it as header.subtitle at show() time (placement options are evaluated per call) instead of using receipt.
  • Format amount yourself. Values render verbatim: '9.99' shows as “You paid 9.99”.
  • offerContext.subtitle is a fallback. A campaign perk line on the active offer supersedes it and follows the carousel as the user pages. Put must-show copy in offerContext.title.
  • Unknown layout values fall back to 'list' with a warning, so older SDK versions degrade gracefully.
  • offerContext/footer/receipt need layout: 'thankYou'. header works in both layouts (only header.icon is thankYou-specific).
  • 'thankYou' + 'deferred' is legal but warned. The claim is recorded with no redirect and no primer; you own calling redeem() later, which renders the minimal reward story. See the legal decoupling.