> ## 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.

# Post-Purchase Placements

> Render a post-purchase success screen with the offer carousel inline: a complete branded thank-you moment in one call, using layout: 'thankYou' with per-placement immediate redemption.

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](/publishers/web/guides/intercept-paywall-abandonment)
instead.

## The complete pattern

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

```typescript theme={null}
// 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](/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, 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()`](/publishers/web/sdk-reference/redeem)
call; use it only if your flow genuinely has a second host step (see
[Redemption Modes](/publishers/web/concepts/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](/publishers/web/guides/attribute-subscriptions) 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](/publishers/web/concepts/redemption-modes#thankyou--deferred-the-legal-decoupling).

## 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/concepts/redemption-modes): deferred vs immediate side by side.
* [Reduce Paywall Churn](/publishers/web/guides/intercept-paywall-abandonment): the deferred counterpart of this guide.