FloPay SDK Changelog

v1.11.6 - Vue 3 SDK #

The new @flopay/vue package lets a Vue 3 application embed Flopay checkout, card setup, saved payment methods, wallets and PayPal the way a React application does.

@flopay/vue is a new package for Vue 3.3 and later. A Vue application can now embed the same checkout surfaces as a React application: the provider, the all-in-one checkout, card setup, payment method setup, the one-click automatic payment button, the split card form, vault card fields, the PayPal button, wallets and local payment methods. The methods it offers are the ones the checkout session advertises. It ships on the same version line as the other Flopay packages.

What changed

• New package. @flopay/vue has a root entry plus @flopay/vue/card-setup and @flopay/vue/payment-method-setup entries, and a peer dependency on vue >=3.3.0.
• Same names as React. Every component keeps the name of its @flopay/react counterpart, and each React hook has a Vue composable with the same name, including useCheckout. The package README has a side-by-side React and Vue table.
• Vue conventions. Callback props that only notify, such as onComplete, onDecline and onError, are Vue events (@complete, @decline, @error). Custom layouts are slots. Composables return refs or reactive objects.
• Server rendering. Importing the package and rendering its components on the server does not touch window.
• Card security check. Like React since 1.11.5, every Vue card surface mounts the card form when the billing API asks for a security check before card details can be entered: the split card form, the checkout, card setup and payment method setup. VaultCardFields takes verificationRequired. The split card form also recovers its card form from /vault/capture when the session has no embedded form, as React does, including for Worldpay sessions.
• Shared helpers. @flopay/shared now exports the helpers both UI packages use: invokeMerchantCallback, projectFloInstrument, detectPayPalEnvironment, classifyExternalMethodFailure, buildExternalMethodRecoveryMessage, readSetupAdvertisement, hasServerSideCardGateway and canRecoverHostedCardForm. @flopay/js adds completeSavedCardNextAction for the saved-card verification step. React behaviour is unchanged.
• React bundle size. A React checkout bundle is about 2 KB larger before compression and less than 0.5 KB larger after Brotli compression. The checkout logic React now shares with Vue takes parameters, and that costs bytes. The bundle contains no Vue code. A reference React checkout measures 350,109 bytes raw and 83,428 bytes after Brotli compression. Its size limits move to 350,200 and 83,500 bytes. The gzip limit is unchanged.

Known differences from React

This first release of @flopay/vue takes every prop of its React counterpart, but some behaviour still differs from React. The remaining work is tracked in #451 and #452 and will ship in later releases.

• Stripe PayPal option (#451). Not yet in Vue: the buyer-identity fallback panel, the switch React makes when the PayPal pop-up is blocked, "Try PayPal again", the processing overlay and its telemetry, the PayPal sub-account group, and the fallback when Stripe's list leaves out PayPal.
• Split card form and checkout (#452). Apple Pay, Google Pay and local payment methods confirm without the form's own payment request. A "PayPal redirect required" answer shows "PayPal is not available." The inline session is not refreshed after onBeforeButtonClick changes it. The PayPal button gets no technical-failure recovery. A failed payment status is not re-read before it is reported. There are also smaller differences in the PayPal button, saved payments, debug panels, the wallet row and telemetry.
• onBeforeButtonClick after a Stripe PayPal redirect. When the buyer comes back from an approved PayPal redirect, Vue calls onBeforeButtonClick once more to recover the account details. React reuses the details from the original click instead.

Developer notes

Install @flopay/vue alongside vue 3.3 or later. No change is required for React, JavaScript or Node integrations.