Skip to content

Documentation / @frak-labs/components / PostPurchase

Function: PostPurchase()

PostPurchase(__namedParameters): Element | null

Defined in: sdk/components/src/components/PostPurchase/PostPurchase.tsx:109

Post-purchase card component.

Renders an inline card on the merchant's thank-you / order-status page that either congratulates a referee or invites a referrer to share.

Fetches referral status and merchant information via two independent RPC calls, then computes the display variant locally.

Parameters

__namedParameters

badgeText?

string

Label for the pill badge displayed above the message. When omitted (and no placement config provides one), the badge is hidden.

classname?

string = ""

CSS class names passed through to the root element (Light DOM).

ctaText?

string

Override the CTA button text. Use {REWARD} as placeholder for the reward amount.

customerId?

string

Merchant customer ID for purchase tracking fallback. All three tracking props (customerId, orderId, token) must be present for tracking to fire.

merchantId?

string

Override the merchant ID resolved from the SDK config.

orderId?

string

Merchant order ID for purchase tracking fallback.

placement?

string

Placement ID for backend-driven CSS customization.

refereeText?

string

Override the message shown to referees. Use {REWARD} as placeholder for the reward amount.

referrerText?

string

Override the message shown to referrers. Use {REWARD} as placeholder for the reward amount.

sharingUrl?

string

Base URL to share. Falls back to the merchant domain returned by the backend when omitted.

token?

string

Checkout token for purchase tracking fallback.

variant?

"referrer" | "referee"

Force a display variant instead of relying on the backend evaluation.

Returns

Element | null

Examples

Minimal — just show the card:

<frak-post-purchase></frak-post-purchase>

With purchase tracking fallback and custom sharing URL:

<frak-post-purchase
  customer-id="cust_123"
  order-id="ord_456"
  token="checkout_abc"
  sharing-url="https://merchant.com/product/shoes"
></frak-post-purchase>