# Post-Purchase Component

# Post-Purchase

## Summary

The `<frak-post-purchase>` component is designed for checkout confirmation pages. It displays a sharing prompt to buyers, encouraging them to share the product with friends. The component adapts its message based on whether the user is a **referrer** (existing advocate) or a **referee** (was referred by someone).

## Requirements

- An initialized `FrakSetup` configuration object
- Purchase tracking data (customer ID, order ID, and token) for attribution

More information about the [FrakSetup](/developers/components/frak-setup) object.

## Parameters

| Attribute | Type | Description |
|-----------|------|-------------|
| `customerId` | `string` | Merchant customer ID for purchase tracking. All three tracking props (`customerId`, `orderId`, `token`) must be present for tracking to fire. |
| `orderId` | `string` | Merchant order ID for purchase tracking. |
| `token` | `string` | Checkout token for purchase tracking. |
| `sharingUrl` | `string` | Base URL to share. Falls back to the merchant domain when omitted. |
| `merchantId` | `string` | Override the merchant ID resolved from SDK config. |
| `placement` | `string` | Placement ID for [backend-driven configuration](/developers/concepts/placements). |
| `classname` | `string` | CSS class names applied to the root element. |
| `variant` | `"referrer"` \| `"referee"` | Force a display variant instead of relying on backend evaluation. |
| `badgeText` | `string` | Label for the badge pill above the message. Hidden when omitted. |
| `referrerText` | `string` | Override the message shown to referrers. Use `{REWARD}` as placeholder. |
| `refereeText` | `string` | Override the message shown to referees. Use `{REWARD}` as placeholder. |
| `ctaText` | `string` | Override the CTA button text. Use `{REWARD}` as placeholder. |
| `imageUrl` | `string` | Override the image shown on the left of the card. Falls back to the built-in gift icon when omitted. |
| `products` | `string` | JSON-stringified array of product cards forwarded to the sharing page when the CTA is clicked (set the JS `products` property for a real array). |
| `preview` | `string` | Render in preview mode (e.g. Shopify/WordPress theme editor): bypasses the client-ready gate and no-ops the click handler. |
| `previewVariant` | `"referrer"` \| `"referee"` | Which variant to show when `preview` is set. Defaults to `"referrer"`. |

## Usage Examples

### Basic Post-Purchase

```html
<frak-post-purchase
    customerId="cust_123"
    orderId="order_456"
    token="tok_abc"
></frak-post-purchase>
```

### With Custom Text

```html
<frak-post-purchase
    customerId="cust_123"
    orderId="order_456"
    token="tok_abc"
    badgeText="Thank you!"
    referrerText="Share with friends and earn {REWARD}!"
    refereeText="You were referred! Share to earn {REWARD} too."
    ctaText="Share now"
></frak-post-purchase>
```

### With Placement

```html
<frak-post-purchase
    placement="checkout"
    customerId="cust_123"
    orderId="order_456"
    token="tok_abc"
></frak-post-purchase>
```

Text and styling are resolved from the [placement configuration](/developers/concepts/placements) set in the business dashboard.

### With Custom Sharing URL

```html
<frak-post-purchase
    customerId="cust_123"
    orderId="order_456"
    token="tok_abc"
    sharingUrl="https://my-shop.com/products/awesome-product"
></frak-post-purchase>
```

### Force a Variant

```html
<!-- Always show the referrer message -->
<frak-post-purchase
    variant="referrer"
    customerId="cust_123"
    orderId="order_456"
    token="tok_abc"
></frak-post-purchase>
```

## Purchase Tracking

The component supports automatic purchase tracking when all three tracking attributes are provided:

- `customerId` — Your internal customer identifier
- `orderId` — The order/transaction identifier
- `token` — A checkout token for verification

:::tip
All three attributes must be present for purchase tracking to fire. If any is missing, the component still renders the sharing prompt but doesn't track the purchase.
:::

## CSS

Target the component using the `frak-post-purchase` selector:

```css
frak-post-purchase .override {
  background-color: #f0fdf4;
  border-radius: 12px;
  padding: 24px;
}
```

Component-specific CSS can also be configured via [placements](/developers/concepts/placements) in the business dashboard.