@flopay/vue 1.13.5 → 1.14.0

package/README.md

@@ -73,10 +73,10 @@ Every `@flopay/react` component and hook has a same-name Vue export. React's not
 | Export | React (`@flopay/react`) | Vue (`@flopay/vue`) |
 |--------|-------------------------|---------------------|
 | `FloPayProvider` | `<FloPayProvider>` | `FloPayProvider`, provided to descendants; `@instrument` |
-| `FloPayCheckout` | `<FloPayCheckout>` | `FloPayCheckout`: `@complete`, `@decline`, `@error`, `@button-click` |
-| `SplitCardForm` | `<SplitCardForm>` | `SplitCardForm`: `@complete`, `@decline`, `@error` |
+| `FloPayCheckout` | `<FloPayCheckout>` | `FloPayCheckout`: `@complete`, `@decline`, `@cancel`, `@error`, `@button-click` |
+| `SplitCardForm` | `<SplitCardForm>` | `SplitCardForm`: `@complete`, `@decline`, `@cancel`, `@error` |
 | `VaultCardFields` | `<VaultCardFields>` | `VaultCardFields`: `@ready`, `@error`, `@validation` |
-| `DirectPayPalButton` | `<DirectPayPalButton>` | `DirectPayPalButton` |
+| `DirectPayPalButton` | `<DirectPayPalButton>` | `DirectPayPalButton`: `@complete`, `@decline`, `@cancel`, `@error` |
 | `FloPayAutomaticPaymentButton` | `<FloPayAutomaticPaymentButton>` | `FloPayAutomaticPaymentButton`: `@success`, `@error`, `@decline` |
 | `FloPayCardSetup` | `<FloPayCardSetup>` | `FloPayCardSetup`: `@ready`, `@complete`, `@decline`, `@cancel`, `@error` |
 | `FloPayPaymentMethodSetup` | `<FloPayPaymentMethodSetup>` | `FloPayPaymentMethodSetup` |
@@ -90,6 +90,47 @@ React `children` and custom layouts are slots. `FloPayCheckout`'s `layout` slot
 
 Entry points: `@flopay/vue`, `@flopay/vue/card-setup` and `@flopay/vue/payment-method-setup`.
 
+### PayPal buyer cancel
+
+`FloPayCheckout`, `SplitCardForm` and `DirectPayPalButton` emit `cancel` (`@cancel`, React's `onCancel`) once per click when the buyer closes the PayPal pop-up, or returns from PayPal's app switch, without approving. The payload is a `FloPayPaymentCancelEvent`: `{ status: 'cancelled', sessionId, provider: 'paypal', paymentMethodType }`. `sessionId` is the attempt's session (the click-time patch's, otherwise the checkout's), and `paymentMethodType` is `paypal_vaulted` when the session advertises an `order` or `setup_token`, otherwise `paypal`.
+
+It is never emitted for an approval, a decline (that stays `@decline`), a blocked pop-up, a load, render or eligibility failure, or a click your `runBeforeButtonClick` gate stopped, and a repeated cancel for the same click is ignored. It covers the direct PayPal button only (sessions with `gateways.paypal`). The button stays rendered for the next click, and nothing changes if you don't listen for it.
+
+A "Didn't work? Pay another way" prompt that moves the buyer to the card form:
+
+```ts
+import { FloPayCheckout, type FloPayPaymentCancelEvent } from '@flopay/vue';
+import { defineComponent, h, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const cancelled = ref<FloPayPaymentCancelEvent | null>(null);
+    const cardForm = ref<HTMLElement | null>(null);
+    return () => [
+      cancelled.value
+        ? h('div', { role: 'status' }, [
+            "Didn't work? Pay another way. ",
+            h(
+              'button',
+              { type: 'button', onClick: () => cardForm.value?.focus() },
+              'Pay by card or Google Pay',
+            ),
+          ])
+        : null,
+      h('div', { ref: cardForm, tabindex: -1 }, [
+        h(FloPayCheckout, {
+          sessionId: 'sess_123',
+          nonce: 'nonce_123',
+          onCancel: (event: FloPayPaymentCancelEvent) => {
+            cancelled.value = event;
+          },
+        }),
+      ]),
+    ];
+  },
+});
+```
+
 ## Errors
 
 Errors are `FloPayError` instances from `@flopay/shared`, emitted through `@error`.

package/dist/index.cjs

@@ -1375,6 +1375,8 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
   emits: {
     complete: (_result) => true,
     decline: (_decline) => true,
+    /** The buyer closed or left PayPal without approving (once per click attempt). */
+    cancel: (_event) => true,
     error: (_error) => true,
     errorChange: (_message) => true,
     buttonClick: (_method) => true,
@@ -1393,6 +1395,7 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
     let generation = 0;
     let retryTimer = null;
     let prepared = null;
+    let attemptLive = false;
     let intentIdempotencyKey;
     let intentAttemptActive = false;
     const beginIntentAttempt = () => {
@@ -1519,6 +1522,7 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
       (0, import_shared4.invokeMerchantCallback)(() => emit("errorChange", recoveryMessage));
     };
     const runtimeFailure = (error) => {
+      attemptLive = false;
       const message = errorMessage(error, "PayPal failed to render.");
       if ((0, import_shared4.isPayPalTeardownMessage)(message)) {
         prepared = null;
@@ -1614,6 +1618,7 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
     };
     const approve = async (gen, data, actions) => {
       if (!isCurrent(gen)) return;
+      attemptLive = false;
       const attempt = { ...prepared ?? {} };
       submitting.value = true;
       trace("onApprove");
@@ -1660,6 +1665,7 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
       }
       beginIntentAttempt();
       prepared = null;
+      attemptLive = false;
       let next = {};
       const runner = props.runBeforeButtonClick;
       if (runner) {
@@ -1689,9 +1695,18 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
       }
       (0, import_shared4.invokeMerchantCallback)(() => emit("buttonClick", "paypal"));
       prepared = next;
+      attemptLive = true;
       trace("onClick:resolve");
       await actions.resolve();
     };
+    const cancel = (gen) => {
+      if (!isCurrent(gen) || !attemptLive) return;
+      attemptLive = false;
+      const event = (0, import_shared4.buildPayPalCancelEvent)(effectiveSessionId(), configuredObjectType());
+      prepared = null;
+      trace("onCancel");
+      (0, import_shared4.invokeMerchantCallback)(() => emit("cancel", event));
+    };
     const renderButtons = async (gen) => {
       const normalized = (0, import_shared4.normalizeGatewayEnvironment)(props.environment);
       const environment = normalized === "live" ? "production" : normalized;
@@ -1743,6 +1758,7 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
         ...handlers,
         onClick: (_data, actions) => click(gen, actions),
         onApprove: (data, actions) => approve(gen, data, actions),
+        onCancel: () => cancel(gen),
         onError: (error) => {
           if (!isCurrent(gen)) return;
           trace(
@@ -1827,6 +1843,7 @@ var DirectPayPalButton = (0, import_vue3.defineComponent)({
       if (retryTimer) clearTimeout(retryTimer);
       retryTimer = null;
       prepared = null;
+      attemptLive = false;
       intentIdempotencyKey = void 0;
       intentAttemptActive = false;
       closeButtons();
@@ -2192,6 +2209,8 @@ var SplitCardForm = (0, import_vue6.defineComponent)({
     complete: (_result) => true,
     error: (_error) => true,
     decline: (_decline) => true,
+    // React's `onCancel`: the direct PayPal button's buyer cancel, re-emitted once.
+    cancel: (_event) => true,
     buttonClick: (_method) => true,
     countryChange: (_country) => true,
     // React's `onZipChange`.
@@ -3200,6 +3219,7 @@ var SplitCardForm = (0, import_vue6.defineComponent)({
         // React's `onTokenizedBody={dispatchTokenizedBody}`: the form
         // continues the approval (or hands it to the host's handler).
         onTokenizedBody: dispatchTokenizedBody,
+        onCancel: (event) => (0, import_shared8.invokeMerchantCallback)(() => emit("cancel", event)),
         onButtonClick: (method) => (0, import_shared8.invokeMerchantCallback)(() => emit("buttonClick", method)),
         onErrorChange: (message) => {
           failure.value = message;
@@ -3494,6 +3514,8 @@ var FloPayCheckout = (0, import_vue7.defineComponent)({
     error: (_error) => true,
     instrument: (_event) => true,
     decline: (_decline) => true,
+    // React's `onCancel`: a direct PayPal buyer cancel from the built-in form.
+    cancel: (_event) => true,
     buttonClick: (_method) => true,
     countryChange: (_country) => true,
     // React's `onZipChange`.
@@ -3886,6 +3908,9 @@ var FloPayCheckout = (0, import_vue7.defineComponent)({
           enabledPaymentMethodCountries: stripeCountryGate.value,
           debug: props.debug,
           ...relay,
+          // React's `onCancel={onCancel}`: the built-in form's direct PayPal
+          // cancel reaches the merchant once.
+          onCancel: (event) => (0, import_shared9.invokeMerchantCallback)(() => emit("cancel", event)),
           onCountryChange: (country) => (0, import_shared9.invokeMerchantCallback)(() => emit("countryChange", country)),
           onZipChange: (zip) => (0, import_shared9.invokeMerchantCallback)(() => emit("zipChange", zip))
         },

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as _flopay_shared from '@flopay/shared';
-import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, PayPalBuyerIdentity, GatewayEnvironment, PayPalProviderObjectType, PayPalApprovalPresentation, InlineSessionPatch, TokenizedBody, TelemetryTerminalReason, BeforeButtonClickEvent, WalletPresentation, AVSFieldConfig, VaultCardFieldKey, CheckoutMode, FloInstrumentEvent, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
-export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, FloInstrumentEvent, InlineSessionDraft, InlineSessionPatch, SentryEventLike, SentryStackFrameLike, WalletPresentation, dropThirdPartyOnlyError } from '@flopay/shared';
+import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, PayPalBuyerIdentity, GatewayEnvironment, PayPalProviderObjectType, PayPalApprovalPresentation, InlineSessionPatch, TokenizedBody, TelemetryTerminalReason, FloPayPaymentCancelEvent, BeforeButtonClickEvent, WalletPresentation, AVSFieldConfig, VaultCardFieldKey, CheckoutMode, FloInstrumentEvent, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
+export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, FloInstrumentEvent, FloPayPaymentCancelEvent, InlineSessionDraft, InlineSessionPatch, SentryEventLike, SentryStackFrameLike, WalletPresentation, dropThirdPartyOnlyError } from '@flopay/shared';
 import * as vue from 'vue';
 import { PropType, VNode, ShallowRef, CSSProperties } from 'vue';
 export { FloPayCardSetup, FloPayCardSetupProps } from './card-setup-entry.cjs';
@@ -480,6 +480,8 @@ declare const DirectPayPalButton: vue.DefineComponent<vue.ExtractPropTypes<{
 }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     complete: (_result: PaymentResult) => true;
     decline: (_decline: DeclineEvent) => true;
+    /** The buyer closed or left PayPal without approving (once per click attempt). */
+    cancel: (_event: FloPayPaymentCancelEvent) => true;
     error: (_error: FloPayError) => true;
     errorChange: (_message: string | null) => true;
     buttonClick: (_method: CheckoutButtonMethod) => true;
@@ -572,6 +574,7 @@ declare const DirectPayPalButton: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{
     onComplete?: ((_result: PaymentResult) => any) | undefined;
+    onCancel?: ((_event: FloPayPaymentCancelEvent) => any) | undefined;
     onError?: ((_error: FloPayError) => any) | undefined;
     onDecline?: ((_decline: DeclineEvent) => any) | undefined;
     onErrorChange?: ((_message: string | null) => any) | undefined;
@@ -1015,6 +1018,7 @@ declare const SplitCardForm: vue.DefineComponent<vue.ExtractPropTypes<{
     complete: (_result: PaymentResult) => true;
     error: (_error: FloPayError) => true;
     decline: (_decline: DeclineEvent) => true;
+    cancel: (_event: FloPayPaymentCancelEvent) => true;
     buttonClick: (_method: CheckoutButtonMethod) => true;
     countryChange: (_country: string) => true;
     zipChange: (_zip: string) => true;
@@ -1229,6 +1233,7 @@ declare const SplitCardForm: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{
     onComplete?: ((_result: PaymentResult) => any) | undefined;
+    onCancel?: ((_event: FloPayPaymentCancelEvent) => any) | undefined;
     onError?: ((_error: FloPayError) => any) | undefined;
     onDecline?: ((_decline: DeclineEvent) => any) | undefined;
     onErrorChange?: ((_error: string | null) => any) | undefined;
@@ -1537,6 +1542,7 @@ declare const FloPayCheckout: vue.DefineComponent<vue.ExtractPropTypes<{
     error: (_error: FloPayError) => true;
     instrument: (_event: FloInstrumentEvent) => true;
     decline: (_decline: DeclineEvent) => true;
+    cancel: (_event: FloPayPaymentCancelEvent) => true;
     buttonClick: (_method: CheckoutButtonMethod) => true;
     countryChange: (_country: string) => true;
     zipChange: (_zip: string) => true;
@@ -1679,6 +1685,7 @@ declare const FloPayCheckout: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onInstrument?: ((_event: FloInstrumentEvent) => any) | undefined;
     onComplete?: ((_result: PaymentResult) => any) | undefined;
+    onCancel?: ((_event: FloPayPaymentCancelEvent) => any) | undefined;
     onError?: ((_error: FloPayError) => any) | undefined;
     onDecline?: ((_decline: DeclineEvent) => any) | undefined;
     onButtonClick?: ((_method: CheckoutButtonMethod) => any) | undefined;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _flopay_shared from '@flopay/shared';
-import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, PayPalBuyerIdentity, GatewayEnvironment, PayPalProviderObjectType, PayPalApprovalPresentation, InlineSessionPatch, TokenizedBody, TelemetryTerminalReason, BeforeButtonClickEvent, WalletPresentation, AVSFieldConfig, VaultCardFieldKey, CheckoutMode, FloInstrumentEvent, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
-export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, FloInstrumentEvent, InlineSessionDraft, InlineSessionPatch, SentryEventLike, SentryStackFrameLike, WalletPresentation, dropThirdPartyOnlyError } from '@flopay/shared';
+import { InlineSessionDraft, CheckoutButtonMethod, CheckoutProduct, CheckoutItem, CheckoutSubscription, ThemeId, FloPayAppearance, ButtonsLayoutTheme, ButtonsLayoutStyles, PaymentResult, CheckoutSession, FloPayError, DeclineEvent, PayPalBuyerIdentity, GatewayEnvironment, PayPalProviderObjectType, PayPalApprovalPresentation, InlineSessionPatch, TokenizedBody, TelemetryTerminalReason, FloPayPaymentCancelEvent, BeforeButtonClickEvent, WalletPresentation, AVSFieldConfig, VaultCardFieldKey, CheckoutMode, FloInstrumentEvent, CardCaptureAdapter, VaultCardThemeColors } from '@flopay/shared';
+export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, FloInstrumentEvent, FloPayPaymentCancelEvent, InlineSessionDraft, InlineSessionPatch, SentryEventLike, SentryStackFrameLike, WalletPresentation, dropThirdPartyOnlyError } from '@flopay/shared';
 import * as vue from 'vue';
 import { PropType, VNode, ShallowRef, CSSProperties } from 'vue';
 export { FloPayCardSetup, FloPayCardSetupProps } from './card-setup-entry.js';
@@ -480,6 +480,8 @@ declare const DirectPayPalButton: vue.DefineComponent<vue.ExtractPropTypes<{
 }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     complete: (_result: PaymentResult) => true;
     decline: (_decline: DeclineEvent) => true;
+    /** The buyer closed or left PayPal without approving (once per click attempt). */
+    cancel: (_event: FloPayPaymentCancelEvent) => true;
     error: (_error: FloPayError) => true;
     errorChange: (_message: string | null) => true;
     buttonClick: (_method: CheckoutButtonMethod) => true;
@@ -572,6 +574,7 @@ declare const DirectPayPalButton: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{
     onComplete?: ((_result: PaymentResult) => any) | undefined;
+    onCancel?: ((_event: FloPayPaymentCancelEvent) => any) | undefined;
     onError?: ((_error: FloPayError) => any) | undefined;
     onDecline?: ((_decline: DeclineEvent) => any) | undefined;
     onErrorChange?: ((_message: string | null) => any) | undefined;
@@ -1015,6 +1018,7 @@ declare const SplitCardForm: vue.DefineComponent<vue.ExtractPropTypes<{
     complete: (_result: PaymentResult) => true;
     error: (_error: FloPayError) => true;
     decline: (_decline: DeclineEvent) => true;
+    cancel: (_event: FloPayPaymentCancelEvent) => true;
     buttonClick: (_method: CheckoutButtonMethod) => true;
     countryChange: (_country: string) => true;
     zipChange: (_zip: string) => true;
@@ -1229,6 +1233,7 @@ declare const SplitCardForm: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{
     onComplete?: ((_result: PaymentResult) => any) | undefined;
+    onCancel?: ((_event: FloPayPaymentCancelEvent) => any) | undefined;
     onError?: ((_error: FloPayError) => any) | undefined;
     onDecline?: ((_decline: DeclineEvent) => any) | undefined;
     onErrorChange?: ((_error: string | null) => any) | undefined;
@@ -1537,6 +1542,7 @@ declare const FloPayCheckout: vue.DefineComponent<vue.ExtractPropTypes<{
     error: (_error: FloPayError) => true;
     instrument: (_event: FloInstrumentEvent) => true;
     decline: (_decline: DeclineEvent) => true;
+    cancel: (_event: FloPayPaymentCancelEvent) => true;
     buttonClick: (_method: CheckoutButtonMethod) => true;
     countryChange: (_country: string) => true;
     zipChange: (_zip: string) => true;
@@ -1679,6 +1685,7 @@ declare const FloPayCheckout: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onInstrument?: ((_event: FloInstrumentEvent) => any) | undefined;
     onComplete?: ((_result: PaymentResult) => any) | undefined;
+    onCancel?: ((_event: FloPayPaymentCancelEvent) => any) | undefined;
     onError?: ((_error: FloPayError) => any) | undefined;
     onDecline?: ((_decline: DeclineEvent) => any) | undefined;
     onButtonClick?: ((_method: CheckoutButtonMethod) => any) | undefined;

package/dist/index.mjs

@@ -256,6 +256,7 @@ import { PaymentAPI } from "@flopay/js/card-setup";
 import {
   applyFriendlyMessageOverride,
   buildExternalMethodRecoveryMessage,
+  buildPayPalCancelEvent,
   buildPayPalProcessPaymentRequest,
   buildPayPalSessionIntentRequest,
   buildPayPalTokenizedBody,
@@ -475,6 +476,8 @@ var DirectPayPalButton = defineComponent2({
   emits: {
     complete: (_result) => true,
     decline: (_decline) => true,
+    /** The buyer closed or left PayPal without approving (once per click attempt). */
+    cancel: (_event) => true,
     error: (_error) => true,
     errorChange: (_message) => true,
     buttonClick: (_method) => true,
@@ -493,6 +496,7 @@ var DirectPayPalButton = defineComponent2({
     let generation = 0;
     let retryTimer = null;
     let prepared = null;
+    let attemptLive = false;
     let intentIdempotencyKey;
     let intentAttemptActive = false;
     const beginIntentAttempt = () => {
@@ -619,6 +623,7 @@ var DirectPayPalButton = defineComponent2({
       invokeMerchantCallback(() => emit("errorChange", recoveryMessage));
     };
     const runtimeFailure = (error) => {
+      attemptLive = false;
       const message = errorMessage(error, "PayPal failed to render.");
       if (isPayPalTeardownMessage(message)) {
         prepared = null;
@@ -714,6 +719,7 @@ var DirectPayPalButton = defineComponent2({
     };
     const approve = async (gen, data, actions) => {
       if (!isCurrent(gen)) return;
+      attemptLive = false;
       const attempt = { ...prepared ?? {} };
       submitting.value = true;
       trace("onApprove");
@@ -760,6 +766,7 @@ var DirectPayPalButton = defineComponent2({
       }
       beginIntentAttempt();
       prepared = null;
+      attemptLive = false;
       let next = {};
       const runner = props.runBeforeButtonClick;
       if (runner) {
@@ -789,9 +796,18 @@ var DirectPayPalButton = defineComponent2({
       }
       invokeMerchantCallback(() => emit("buttonClick", "paypal"));
       prepared = next;
+      attemptLive = true;
       trace("onClick:resolve");
       await actions.resolve();
     };
+    const cancel = (gen) => {
+      if (!isCurrent(gen) || !attemptLive) return;
+      attemptLive = false;
+      const event = buildPayPalCancelEvent(effectiveSessionId(), configuredObjectType());
+      prepared = null;
+      trace("onCancel");
+      invokeMerchantCallback(() => emit("cancel", event));
+    };
     const renderButtons = async (gen) => {
       const normalized = normalizeGatewayEnvironment(props.environment);
       const environment = normalized === "live" ? "production" : normalized;
@@ -843,6 +859,7 @@ var DirectPayPalButton = defineComponent2({
         ...handlers,
         onClick: (_data, actions) => click(gen, actions),
         onApprove: (data, actions) => approve(gen, data, actions),
+        onCancel: () => cancel(gen),
         onError: (error) => {
           if (!isCurrent(gen)) return;
           trace(
@@ -927,6 +944,7 @@ var DirectPayPalButton = defineComponent2({
       if (retryTimer) clearTimeout(retryTimer);
       retryTimer = null;
       prepared = null;
+      attemptLive = false;
       intentIdempotencyKey = void 0;
       intentAttemptActive = false;
       closeButtons();
@@ -1173,6 +1191,8 @@ var SplitCardForm = defineComponent3({
     complete: (_result) => true,
     error: (_error) => true,
     decline: (_decline) => true,
+    // React's `onCancel`: the direct PayPal button's buyer cancel, re-emitted once.
+    cancel: (_event) => true,
     buttonClick: (_method) => true,
     countryChange: (_country) => true,
     // React's `onZipChange`.
@@ -2181,6 +2201,7 @@ var SplitCardForm = defineComponent3({
         // React's `onTokenizedBody={dispatchTokenizedBody}`: the form
         // continues the approval (or hands it to the host's handler).
         onTokenizedBody: dispatchTokenizedBody,
+        onCancel: (event) => invokeMerchantCallback2(() => emit("cancel", event)),
         onButtonClick: (method) => invokeMerchantCallback2(() => emit("buttonClick", method)),
         onErrorChange: (message) => {
           failure.value = message;
@@ -2475,6 +2496,8 @@ var FloPayCheckout = defineComponent4({
     error: (_error) => true,
     instrument: (_event) => true,
     decline: (_decline) => true,
+    // React's `onCancel`: a direct PayPal buyer cancel from the built-in form.
+    cancel: (_event) => true,
     buttonClick: (_method) => true,
     countryChange: (_country) => true,
     // React's `onZipChange`.
@@ -2867,6 +2890,9 @@ var FloPayCheckout = defineComponent4({
           enabledPaymentMethodCountries: stripeCountryGate.value,
           debug: props.debug,
           ...relay,
+          // React's `onCancel={onCancel}`: the built-in form's direct PayPal
+          // cancel reaches the merchant once.
+          onCancel: (event) => invokeMerchantCallback3(() => emit("cancel", event)),
           onCountryChange: (country) => invokeMerchantCallback3(() => emit("countryChange", country)),
           onZipChange: (zip) => invokeMerchantCallback3(() => emit("zipChange", zip))
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flopay/vue",
-  "version": "1.13.5",
+  "version": "1.14.0",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {
@@ -36,8 +36,8 @@
     "dist"
   ],
   "dependencies": {
-    "@flopay/js": "1.13.5",
-    "@flopay/shared": "1.13.5",
+    "@flopay/js": "1.14.0",
+    "@flopay/shared": "1.14.0",
     "@paypal/paypal-js": "^10.1.0",
     "@stripe/stripe-js": "^9.17.0"
   },