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

Usage Examples

Basic Post-Purchase

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

With Custom Text

<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

<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 set in the Frak Ads Manager dashboard.

With Custom Sharing URL

<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

<!-- 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

CSS

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

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

Component-specific CSS can also be configured via placements in the Frak Ads Manager dashboard.