> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encorekit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Thank-You Layout (Post-Purchase Placements)

> Render a post-purchase success screen with the offer carousel inline — a complete branded thank-you moment in one call.

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

```javascript theme={null}
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

```typescript theme={null}
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](/publishers/web/sdk-reference/placement).

**The receipt** is per-transaction payment context passed to
[`show()`](/publishers/web/sdk-reference/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'`](/publishers/web/guides/redemption-modes): 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](/publishers/web/guides/redemption-modes#the-pending-transaction) for a
later [`redeem()`](/publishers/web/sdk-reference/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).

## Related

* [`placement()`](/publishers/web/sdk-reference/placement) — the `PlacementOptions` contract.
* [`show()`](/publishers/web/sdk-reference/show) — the `receipt` parameter and result statuses.
* [Redemption Modes](/publishers/web/guides/redemption-modes) — deferred vs immediate side by side.