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

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

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:

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

Component-specific CSS can also be configured via placements in the business dashboard.