@mparticle/web-sdk 3.23.0 → 3.25.0

package/src/buttonTracking/buttonTracker.ts

@@ -1,14 +1,22 @@
 import { IMParticleWebSDKInstance } from '../mp-instance';
 import { isFunction } from '../utils';
-import { buildButtonClickEvent } from './buttonClickEvent';
-import { describeButtonClick, IButtonClick } from './buttonDescription';
+import { buildButtonClickEvent, buildLinkClickEvent } from './buttonClickEvent';
+import {
+    describeButtonClick,
+    describePaymentChoice,
+    IButtonClick,
+    IPaymentChoice,
+    isLinkClick,
+    isPicked,
+} from './buttonDescription';
 import {
     CheckoutIntentKind,
     CheckoutIntentSource,
     classifyIntent,
-    classifyIntentFrame,
+    classifyPaymentFrame,
+    PaymentFrameFamily,
 } from './checkoutIntent';
-import { findControl } from './controls';
+import { findControl, isExcludedPath } from './controls';
 
 // State lives on `window`, like APV, so a re-executed bundle never doubles the
 // listeners. Inspect `window.__mpBtn__` in a console to see if one is live.
@@ -16,6 +24,8 @@ export const WIN_BTN_KEY = '__mpBtn__';
 
 const THROTTLE_MS = 2000;
 const SUBMIT_AFTER_COMMIT_CLICK_MS = 1000;
+// Apple Pay must begin inside the tap's own handler, so the tap is this recent.
+const APPLE_PAY_AFTER_CLICK_MS = 1000;
 const PATH_LIMIT = 12;
 // A ceiling, not a dedupe: a held Enter key or browser automation fires a
 // trusted click per repeat, and each one is forwarded to every kit.
@@ -35,6 +45,9 @@ type WindowWithBtn = Window & {
 export interface IButtonTrackerOptions {
     // The Rokt kit signal only runs when this init configures a Rokt kit.
     hasRoktKit: boolean;
+    // Button clicks and clicks on links that leave the page are logged apart.
+    logButtons: boolean;
+    logLinks: boolean;
 }
 
 const btnWindow = (): WindowWithBtn | null =>
@@ -74,21 +87,87 @@ const afterNextPaint = (fn: () => void): void => {
     }
 };
 
+// Apple Pay's session opens only from a shopper's tap, whatever button the page
+// draws for it, so its opening is a wallet tap no label or name rule can miss.
+// The wrapper keeps the page's own begin under this key, to put it back.
+const APPLE_PAY_HOOK = '__mpApplePayHook__';
+
+const applePayPrototype = (win: Window) => {
+    const session = win['ApplePaySession'];
+    return session && session.prototype;
+};
+
+// Wraps ApplePaySession.prototype.begin once per window, so the active tracker
+// hears that a session began. The wrapper reads no arguments and no payment
+// data, and returns or throws exactly what the original does. Nothing here can
+// throw into SDK init: a throwing getter or a frozen prototype leaves Apple Pay
+// as it was.
+const hookApplePay = (win: Window): void => {
+    try {
+        const prototype = applePayPrototype(win);
+        const begin = prototype && prototype.begin;
+        if (!isFunction(begin) || begin[APPLE_PAY_HOOK]) {
+            return;
+        }
+        const opened = function(this: unknown, ...args: unknown[]) {
+            const result = begin.apply(this, args);
+            try {
+                const tracker = getActiveButtonTracker();
+                if (tracker) {
+                    tracker.onApplePayBegin();
+                }
+            } catch (e) {
+                // A session the page began is never disturbed by tracking.
+            }
+            return result;
+        };
+        // Not enumerable, so the marker doesn't show among the method's own keys.
+        Object.defineProperty(opened, APPLE_PAY_HOOK, { value: begin });
+        prototype.begin = opened;
+    } catch (e) {
+        // Apple Pay stays as the page set it up.
+    }
+};
+
+// Puts the page's own begin back, unless another script has wrapped it since.
+const unhookApplePay = (win: Window): void => {
+    try {
+        const prototype = applePayPrototype(win);
+        const begin = prototype && prototype.begin;
+        if (isFunction(begin) && isFunction(begin[APPLE_PAY_HOOK])) {
+            prototype.begin = begin[APPLE_PAY_HOOK];
+        }
+    } catch (e) {
+        // Apple Pay stays as it is.
+    }
+};
+
 const CAPTURE_PASSIVE: AddEventListenerOptions = {
     capture: true,
     passive: true,
 };
 const PASSIVE: AddEventListenerOptions = { passive: true };
 
-// Logs every button click as an mParticle event, and hands checkout intent to the
-// Rokt kit as a frozen {kind, t, source, pathname}. Submits and wallet frame focus feed the kit only.
+// Logs button clicks and clicks on links that leave the page as mParticle events, and hands checkout
+// intent to the Rokt kit as a frozen {kind, t, source, pathname}. Submits and wallet frame focus feed the kit only,
+// and so do payment picks: a payment radio's option names, or the payment family of a focused frame.
 export class ButtonTracker {
     private readonly mpInstance: IMParticleWebSDKInstance;
     private active = false;
     private hasRoktKit = false;
+    private logButtons = false;
+    private logLinks = false;
     // Bumped on reset so classification queued before it is dropped.
     private generation = 0;
     private lastCommitClick = -Infinity;
+    // The latest trusted click: whether the page excluded it, and the intent it
+    // already carries to the kit, with its source, if any.
+    private lastClick: {
+        t: number;
+        excluded: boolean;
+        kind: CheckoutIntentKind | undefined;
+        source: CheckoutIntentSource | undefined;
+    } | null = null;
     private lastSent: { [kind: string]: { t: number; pathname: string } } = {};
     private pagePath: string | null = null;
     private pageEvents = 0;
@@ -121,8 +200,13 @@ export class ButtonTracker {
             this.teardown();
         }
         this.hasRoktKit = options.hasRoktKit;
+        this.logButtons = options.logButtons;
+        this.logLinks = options.logLinks;
 
-        if (!this.eventsEnabled() && this.isKitSuppressed()) {
+        if (
+            (!(this.logButtons || this.logLinks) || !this.eventsEnabled()) &&
+            this.isKitSuppressed()
+        ) {
             this.log('opted out, not starting');
             return;
         }
@@ -144,9 +228,54 @@ export class ButtonTracker {
             win[WIN_BTN_KEY] = {};
         }
         win[WIN_BTN_KEY].tracker = this;
+        // Only where checkout intent can reach the kit; a shopper who opts back in mid-page gets no session
+        // signal until the next page load.
+        if (!this.isKitSuppressed()) {
+            hookApplePay(win);
+        }
         this.log('listening');
     }
 
+    // An Apple Pay session begun right after a tracked tap counts as a wallet
+    // tap for the kit; one begun with no such tap, or from a tap the page
+    // excluded, does not. A tap that reads as a confirm tap reaches the kit as
+    // one. It is delivered on a timer, not after the next paint, since the
+    // payment sheet may hold painting back: a tap that already reads as a
+    // wallet goes now under its own rule, and the throttle drops the copy
+    // queued for the paint.
+    public onApplePayBegin(): void {
+        const t = Date.now();
+        const click = this.lastClick;
+        if (
+            !this.active ||
+            !click ||
+            click.excluded ||
+            click.kind === 'commit' ||
+            t - click.t > APPLE_PAY_AFTER_CLICK_MS ||
+            this.isKitSuppressed()
+        ) {
+            return;
+        }
+        const pathname = window.location.pathname;
+        const generation = this.generation;
+        setTimeout(() => {
+            if (generation !== this.generation) {
+                return;
+            }
+            try {
+                this.emit(
+                    'wallet',
+                    click.kind === 'wallet' ? click.source : 'api',
+                    'apple_pay',
+                    t,
+                    pathname
+                );
+            } catch (e) {
+                this.log('[error] Apple Pay delivery threw: ' + e);
+            }
+        }, 0);
+    }
+
     public teardown(): void {
         const win = btnWindow();
         if (win) {
@@ -165,6 +294,7 @@ export class ButtonTracker {
             const state = win[WIN_BTN_KEY];
             if (state && state.tracker === this) {
                 state.tracker = undefined;
+                unhookApplePay(win);
             }
         }
         this.active = false;
@@ -186,6 +316,7 @@ export class ButtonTracker {
         this.generation++;
         this.pending = [];
         this.lastCommitClick = -Infinity;
+        this.lastClick = null;
         this.lastSent = {};
         this.pagePath = null;
         this.pageEvents = 0;
@@ -246,7 +377,11 @@ export class ButtonTracker {
             return;
         }
         const layer = event.type;
-        const logsEvents = layer === 'click' && this.eventsEnabled();
+        const logsEvents =
+            layer === 'click' &&
+            (this.logButtons || this.logLinks) &&
+            this.eventsEnabled() &&
+            !this.hasTargetingOptOut();
         const signalsKit = !this.isKitSuppressed();
         if (!logsEvents && !signalsKit) {
             return;
@@ -260,19 +395,43 @@ export class ButtonTracker {
         // button that disables or relabels itself is seen as it was clicked.
         // Logging and the kit hand-off wait for the next paint.
         let click: IButtonClick | undefined;
+        let asLink = false;
         let box: HTMLInputElement | undefined;
         let kind: CheckoutIntentKind | undefined;
         let source: CheckoutIntentSource | undefined;
+        let choice: IPaymentChoice | undefined;
+        let family: PaymentFrameFamily | undefined;
         let unconfirmedCommit = false;
         if (layer === 'click') {
             // The composed path is only populated during dispatch.
-            const control = findControl(
-                isFunction(event.composedPath)
-                    ? event.composedPath().slice(0, PATH_LIMIT)
-                    : []
-            );
+            const path = isFunction(event.composedPath)
+                ? event.composedPath().slice(0, PATH_LIMIT)
+                : [];
+            const excluded = isExcludedPath(path);
+            const control = excluded ? undefined : findControl(path, true);
             if (control) {
-                click = logsEvents ? describeButtonClick(control) : undefined;
+                // With links alone, only an anchor can be logged.
+                click =
+                    logsEvents &&
+                    (this.logButtons || control.matches('a[href]'))
+                        ? describeButtonClick(control, path)
+                        : undefined;
+                if (click) {
+                    asLink = this.logLinks && isLinkClick(click);
+                    // Without link tracking, a link that leaves the page stays a
+                    // button click, except a plain link to another page of the
+                    // site, which button tracking never logged.
+                    const asButton =
+                        this.logButtons &&
+                        !asLink &&
+                        !(
+                            click.linkType === 'internal' &&
+                            control.matches('a[href]:not([role="button"])')
+                        );
+                    if (!asLink && !asButton) {
+                        click = undefined;
+                    }
+                }
                 if (click && click.checked !== undefined) {
                     box = control as HTMLInputElement;
                 }
@@ -282,7 +441,11 @@ export class ButtonTracker {
                     : undefined;
                 kind = intent ? intent.kind : undefined;
                 source = intent ? intent.source : undefined;
+                choice = signalsKit
+                    ? describePaymentChoice(control, path)
+                    : undefined;
             }
+            this.lastClick = { t, excluded, kind, source };
         } else if (layer === 'submit') {
             const submitter = (event as Event & { submitter?: Element | null })
                 .submitter;
@@ -309,7 +472,12 @@ export class ButtonTracker {
                 if (layer === 'blur') {
                     // Read after the blur settles: some browsers have not moved
                     // focus into the frame yet when the window blurs.
-                    kind = classifyIntentFrame(document.activeElement, window);
+                    const frame = classifyPaymentFrame(
+                        document.activeElement,
+                        window
+                    );
+                    kind = frame ? frame.kind : undefined;
+                    family = frame ? frame.family : undefined;
                     source = 'frame';
                 } else if (
                     unconfirmedCommit &&
@@ -329,7 +497,14 @@ export class ButtonTracker {
                                 ? !click.checked
                                 : box.checked;
                     }
-                    this.logClick(click, pathname);
+                    this.logClick(click, pathname, asLink);
+                }
+                // Ahead of the intent, so a pre-selection it fires goes out
+                // with this pick.
+                if (choice && isPicked(choice.radio)) {
+                    this.pickPayment(t, pathname, choice.names);
+                } else if (family) {
+                    this.pickPayment(t, pathname, undefined, family);
                 }
                 if (kind) {
                     this.emit(kind, source, layer, t, pathname);
@@ -341,8 +516,12 @@ export class ButtonTracker {
     }
 
     // Every real click is one event, repeats included, up to a ceiling per page.
-    private logClick(click: IButtonClick, pathname: string): void {
-        if (!this.eventsEnabled()) {
+    private logClick(
+        click: IButtonClick,
+        pathname: string,
+        asLink: boolean
+    ): void {
+        if (!this.eventsEnabled() || this.hasTargetingOptOut()) {
             return;
         }
         if (pathname !== this.pagePath) {
@@ -357,7 +536,9 @@ export class ButtonTracker {
         this.mpInstance._SessionManager.resetSessionTimer();
         const queued = this.queuedForUpload();
         this.mpInstance._Events.logEvent(
-            buildButtonClickEvent(click, pathname)
+            asLink
+                ? buildLinkClickEvent(click, pathname)
+                : buildButtonClickEvent(click, pathname)
         );
         // Only a click waiting for the batch interval is sent early: a held
         // one goes out when released, and with batching off it already has.
@@ -431,12 +612,43 @@ export class ButtonTracker {
         );
     }
 
+    private pickPayment(
+        t: number,
+        pathname: string,
+        names?: string[],
+        family?: PaymentFrameFamily
+    ): void {
+        if (this.isKitSuppressed()) {
+            return;
+        }
+        this.mpInstance._RoktManager.notifyPaymentPick(
+            Object.freeze({
+                t,
+                pathname,
+                names: names ? Object.freeze(names.slice()) : undefined,
+                family,
+            })
+        );
+    }
+
     // Events follow the SDK's opt-out like any other event.
     private eventsEnabled(): boolean {
         const store = this.mpInstance._Store;
         return !!store && store.isEnabled;
     }
 
+    // Read per click, since the launcher options can arrive after the tracker
+    // starts. Only where this init configures a Rokt kit, so Global Privacy
+    // Control alone doesn't stop click logging elsewhere.
+    private hasTargetingOptOut(): boolean {
+        const roktManager = this.mpInstance._RoktManager;
+        return (
+            this.hasRoktKit &&
+            !!roktManager &&
+            roktManager.hasTargetingOptOut()
+        );
+    }
+
     // The Rokt manager owns the kit's privacy gates: flag, opt-out, launcher
     // options and Global Privacy Control.
     private isKitSuppressed(): boolean {

package/src/buttonTracking/checkoutIntent.ts

@@ -4,6 +4,7 @@ import {
     isQuietIntentControl,
     isRoktElement,
     isUnsafeTextSource,
+    isWalletNamedControl,
     vendorButtonKind,
 } from './controls';
 
@@ -13,7 +14,8 @@ export type CheckoutIntentKind =
     | 'commit'
     | 'wallet'
     | 'checkout_step'
-    | 'frame';
+    | 'frame'
+    | 'cart';
 
 const checkoutPath = /(?:^|\/)(?:checkouts?|payment|order|kasse|paiement|commander?|pago)(?:\/|$)/i;
 // English look-alikes are whole words; the other languages stay substring
@@ -79,6 +81,15 @@ const steps = new RegExp(
         ].join('|') +
         ')$'
 );
+const CART_NOUN = '(?:(?:my|your|the) )?(?:shopping )?(?:cart|bag|basket)';
+// "Add to bag" and "Add 2 to cart": a click that puts something in the cart.
+const addToCartLabels = new RegExp('^add(?: [^ ]+){0,5} to ' + CART_NOUN + '$');
+// "View cart", "Shopping bag", "Bag", and a count badge such as "1 item in bag",
+// which reads "item in bag" once digits are stripped: a click that opens the cart.
+const openCartLabels = new RegExp(
+    '^(?:(?:(?:view|open|go to) )?' + CART_NOUN + '(?: items?)?' +
+        '|items? in ' + CART_NOUN + ')$'
+);
 const WALLET_NAMES =
     'apple pay|google pay|paypal|venmo|amazon pay|shop pay|klarna|afterpay|clearpay|cash app(?: pay)?|affirm|sezzle|samsung pay';
 const WALLET_VERBS =
@@ -94,20 +105,35 @@ const walletBrands = new RegExp(
     '^(?:' + WALLET_NAMES + ')(?: (?:checkout|check out|express(?: checkout)?|express pay|buy now|pay now|pay|now)' +
         '| (?:logo|icon|mark|button)(?: (?:logo|icon|mark|button))*)?$'
 );
+// The payment method a frame's focus picks, in the Rokt kit's family names.
+export type PaymentFrameFamily =
+    | 'apple_pay'
+    | 'google_pay'
+    | 'amazon_pay'
+    | 'shop_pay'
+    | 'card';
 // Exact HTTPS hosts of hosted wallet button frames.
-const walletFrameHosts = new Set([
-    'pay.google.com',
-    'applepay.cdn-apple.com',
-    'payments.amazon.com',
-    'pay.shopify.com',
-]);
+const walletFrameFamilies: { [host: string]: PaymentFrameFamily } = {
+    'pay.google.com': 'google_pay',
+    'applepay.cdn-apple.com': 'apple_pay',
+    'payments.amazon.com': 'amazon_pay',
+    'pay.shopify.com': 'shop_pay',
+};
 // PayPal serves its buttons and its card fields and pay-later messages from
 // the same hosts; only the button frames are wallet taps.
 const paypalFrameHosts = new Set(['www.paypal.com', 'www.sandbox.paypal.com']);
 const PAYPAL_BUTTON_FRAME = /^\/smart\/(?:buttons|menu)(?:\/|$)/;
+const PAYPAL_CARD_FRAME = /^\/smart\/card-fields?(?:\/|$)/;
+// PayPal's JS SDK, used directly or wrapped by a processor, leaves its frames
+// without a src and names them __zoid__paypal_<component>__ instead.
+const PAYPAL_SDK_FRAME = /^__zoid__paypal_/;
+const PAYPAL_SDK_BUTTON_FRAME = /^__zoid__paypal_(?:buttons|menu)__/;
 // Stripe's quick-pay button frames; its other frames are card and form fields.
 const STRIPE_WALLET_FRAME = /\/elements-inner-(?:payment-request|express-checkout)-/;
+const STRIPE_CARD_FRAME = /\/elements-inner-card\b/;
 // Hosted card-entry and fingerprint frames: focus there is typing card details.
+// Some of these hosts also serve gift card and bank account fields, so none
+// names a family.
 const CARD_FRAME_DOMAINS = [
     'adyen.com',
     'braintreegateway.com',
@@ -200,10 +226,34 @@ function labels(element: Element): string[] {
         .filter((label): label is string => !!label);
 }
 
+// A cart button is often a bare icon, so its title names it when nothing else
+// does. Only the cart rule reads the title. Opening the cart counts only for a
+// control that opens it on the page, such as a flyout: one that leads to the cart
+// page unloads before a call made on the click can return.
+function isCartControl(control: Element, cores: string[]): boolean {
+    const title = cores.length ? undefined : normalize(control.getAttribute('title'));
+    const texts = title ? [coreLabel(title)] : cores;
+    if (texts.some(text => addToCartLabels.test(text))) {
+        return true;
+    }
+    return (
+        (control.hasAttribute('aria-expanded') || control.hasAttribute('aria-haspopup')) &&
+        texts.some(text => openCartLabels.test(text))
+    );
+}
+
 // Which rule recognised the intent: a vendor's own markup, a phrase in the
-// label, a wallet's bare name, a hosted frame, or a form submitted after a
-// confirm click.
-export type CheckoutIntentSource = 'vendor' | 'label' | 'brand' | 'frame' | 'submit';
+// label, a wallet's bare name, a hosted frame, a form submitted after a confirm
+// click, a merchant button named after its wallet, or a payment sheet the page
+// opened.
+export type CheckoutIntentSource =
+    | 'vendor'
+    | 'label'
+    | 'brand'
+    | 'frame'
+    | 'submit'
+    | 'name'
+    | 'api';
 
 export interface ICheckoutIntent {
     kind: Exclude<CheckoutIntentKind, 'frame'>;
@@ -226,20 +276,34 @@ function isCommitLabel(text: string, isLink: boolean, pathname: string): boolean
 // Classifies a clicked or submitting control found by findControl, in order:
 // pickers, toggles and pay-later messages never count; a vendor's own wallet
 // button counts before any label rule; a confirm label on any source counts
-// before the look-alike exclusions veto; then wallet phrases and steps.
+// before the look-alike exclusions veto; then a wallet-named control, wallet
+// phrases and steps. An add-to-cart label, links included, or a control that
+// opens the cart on the page counts only where none of those do.
 export function classifyIntent(
     control: Element,
     pathname: string
 ): ICheckoutIntent | undefined {
     const vendor = vendorButtonKind(control);
-    if (isQuietIntentControl(control, vendor === 'wallet') || vendor === 'none') {
+    if (vendor === 'none') {
         return undefined;
     }
     if (vendor) {
-        return { kind: vendor, source: 'vendor' };
+        return isQuietIntentControl(control, vendor === 'wallet')
+            ? undefined
+            : { kind: vendor, source: 'vendor' };
     }
     const texts = labels(control);
     const cores = texts.map(coreLabel);
+    const cart: ICheckoutIntent | undefined = isCartControl(control, cores)
+        ? { kind: 'cart', source: 'label' }
+        : undefined;
+    if (isQuietIntentControl(control, false, !!cart)) {
+        return undefined;
+    }
+    // A bag button that opens a flyout counts only as a cart click.
+    if (cart && control.hasAttribute('aria-expanded')) {
+        return cart;
+    }
     const isLink = control.matches('a[href]:not([role="button"])');
     if (cores.some(text => isCommitLabel(text, isLink, pathname))) {
         return { kind: 'commit', source: 'label' };
@@ -249,7 +313,10 @@ export function classifyIntent(
             .concat(cores)
             .some(text => englishExclusions.test(text) || otherExclusions.test(text))
     ) {
-        return undefined;
+        return cart;
+    }
+    if (isWalletNamedControl(control)) {
+        return { kind: 'wallet', source: 'name' };
     }
     const isButton = !isLink && control.matches(CONTROL_SELECTOR);
     for (const text of cores) {
@@ -263,7 +330,7 @@ export function classifyIntent(
             return { kind: 'checkout_step', source: 'label' };
         }
     }
-    return undefined;
+    return cart;
 }
 
 export function classifyIntentControl(
@@ -283,12 +350,20 @@ function isOnDomain(host: string, domain: string): boolean {
     );
 }
 
+export interface IPaymentFrame {
+    kind: 'wallet' | 'frame';
+    family?: PaymentFrameFamily;
+}
+
 // Focus moving into a visible hosted wallet button counts as a wallet click;
-// focus into hosted card fields or messages is only a frame.
-export function classifyIntentFrame(
+// focus into hosted card fields or messages is only a frame. A family comes
+// only from a frame that can draw no other method: PayPal's button frame also
+// draws Pay Later, Venmo and its card form, Stripe's quick-pay frame draws
+// Apple Pay or Google Pay by browser, and its payment form holds several.
+export function classifyPaymentFrame(
     target: EventTarget | null,
     win: Window
-): 'wallet' | 'frame' | undefined {
+): IPaymentFrame | undefined {
     if (
         win.document.visibilityState !== 'visible' ||
         !(target instanceof HTMLIFrameElement)
@@ -301,20 +376,39 @@ export function classifyIntentFrame(
     ) {
         return undefined;
     }
+    // A frame that has its own src is judged by that address, never by its name.
+    if (
+        (!target.src || target.src === 'about:blank') &&
+        PAYPAL_SDK_FRAME.test(target.name)
+    ) {
+        return PAYPAL_SDK_BUTTON_FRAME.test(target.name)
+            ? { kind: 'wallet' }
+            : { kind: 'frame' };
+    }
     try {
         const url = new URL(target.src);
         const host = url.protocol === 'https:' ? url.hostname : '';
         if (paypalFrameHosts.has(host)) {
-            return PAYPAL_BUTTON_FRAME.test(url.pathname) ? 'wallet' : 'frame';
+            if (PAYPAL_BUTTON_FRAME.test(url.pathname)) {
+                return { kind: 'wallet' };
+            }
+            return PAYPAL_CARD_FRAME.test(url.pathname)
+                ? { kind: 'frame', family: 'card' }
+                : { kind: 'frame' };
         }
-        if (walletFrameHosts.has(host)) {
-            return 'wallet';
+        if (Object.prototype.hasOwnProperty.call(walletFrameFamilies, host)) {
+            return { kind: 'wallet', family: walletFrameFamilies[host] };
         }
         if (host === 'js.stripe.com') {
-            return STRIPE_WALLET_FRAME.test(url.pathname) ? 'wallet' : 'frame';
+            if (STRIPE_WALLET_FRAME.test(url.pathname)) {
+                return { kind: 'wallet' };
+            }
+            return STRIPE_CARD_FRAME.test(url.pathname)
+                ? { kind: 'frame', family: 'card' }
+                : { kind: 'frame' };
         }
         if (CARD_FRAME_DOMAINS.some(domain => isOnDomain(host, domain))) {
-            return 'frame';
+            return { kind: 'frame' };
         }
     } catch (e) {
         // An unparseable frame src is not a wallet frame.