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.

​
The complete pattern

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

Encore.configure({
  apiKey: 'pk_live_yourpublishablekey',
  redemptionMode: 'immediate', // one-tap claim fits a "you're done" screen — see below
});
Encore.identify(customerId); // you know the customer post-purchase — identity powers attribution

const placement = Encore.placement('post-purchase', {
  layout: 'thankYou',
  appearance: { accentColor: '#0A6' },
  header: { title: 'Payment Successful' },
  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

interface PlacementOptions {
  layout?: 'list' | 'thankYou';   // default 'list'; unknown values fall back to 'list'
  appearance?: { accentColor?: string; backgroundColor?: string; textColor?: string }; // CSS color strings
  header?: { icon?: 'success' | 'none'; title?: string; subtitle?: string }; // payment-status block; icon is 'thankYou'-only
  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, configure redemptionMode: 'immediate': a claim opens the advertiser tab within the tap gesture and resolves { status: 'claimed' } — one action, no follow-up. The default deferred mode instead records a pending transaction for a later redeem() call — use it only if your flow genuinely has a second host step.

​
Gotchas

  • You own the payment copy. The receipt values and all header/footer strings come from your code — the layout displays nothing you didn’t pass.
  • 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 — older SDK versions degrade gracefully.
  • offerContext/footer/receipt need layout: 'thankYou'. header works in both layouts (only header.icon is thankYou-specific).