PostPurchase
Ce contenu n’est pas encore disponible dans votre langue.
PostPurchase(
__namedParameters):Element|null
Defined in: vendor/wallet/sdk/components/src/components/PostPurchase/PostPurchase.tsx:130
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
Section titled “Parameters”__namedParameters
Section titled “__namedParameters”badgeText?
Section titled “badgeText?”string
Label for the pill badge displayed above the message. When omitted (and no placement config provides one), the badge is hidden.
classname?
Section titled “classname?”string = ""
CSS class names passed through to the root element (Light DOM).
ctaText?
Section titled “ctaText?”string
Override the CTA button text.
Use {REWARD} as placeholder for the reward amount.
customerId?
Section titled “customerId?”string
Merchant customer ID for purchase tracking fallback.
All three tracking props (customerId, orderId, token) must be
present for tracking to fire.
imageUrl?
Section titled “imageUrl?”string
Override the image displayed on the left of the post-purchase card.
Accepts an image URL. Falls back to the built-in gift icon when omitted.
The image is constrained to the icon slot via object-fit: contain,
so any aspect ratio renders correctly.
merchantId?
Section titled “merchantId?”string
Override the merchant ID resolved from the SDK config.
orderId?
Section titled “orderId?”string
Merchant order ID for purchase tracking fallback.
placement?
Section titled “placement?”string
Placement ID for backend-driven CSS customization.
preview?
Section titled “preview?”string
When set, renders the card in preview mode (e.g. Shopify/WP editor). Bypasses the client-ready / RPC gates that normally hide the card until the backend resolves, and no-ops the click handler so merchants can see the final layout with their configured copy.
previewVariant?
Section titled “previewVariant?”"referrer" | "referee"
Which variant to show when preview is set.
Defaults to "referrer".
products?
Section titled “products?”string | SharingPageProduct[]
Optional product cards forwarded to the sharing page when the user
clicks the CTA. Accepts either a real SharingPageProduct
array (when set imperatively via the JS property,
el.products = [...]) or a JSON-stringified array (when set as an
HTML attribute, <frak-post-purchase products='[...]'>). The HTML
attribute path is required for server-rendered surfaces — e.g.
WooCommerce / Magento plugins — because preact-custom-element
delivers attribute values as raw strings.
Empty arrays / unparseable strings are treated as “no products” so the sharing page renders without the product card section.
refereeText?
Section titled “refereeText?”string
Override the message shown to referees.
Use {REWARD} as placeholder for the reward amount.
referrerText?
Section titled “referrerText?”string
Override the message shown to referrers.
Use {REWARD} as placeholder for the reward amount.
sharingUrl?
Section titled “sharingUrl?”string
Base URL to share. Falls back to the merchant domain returned by the backend when omitted.
token?
Section titled “token?”string
Checkout token for purchase tracking fallback.
variant?
Section titled “variant?”"referrer" | "referee"
Force a display variant instead of relying on the backend evaluation.
Returns
Section titled “Returns”Element | null
Examples
Section titled “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>