@paypal/checkout-components 5.0.257 → 5.0.258

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.257",
+  "version": "5.0.258",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/constants/button.js

@@ -55,6 +55,7 @@ export const BUTTON_FLOW = {
   PURCHASE: ("purchase": "purchase"),
   BILLING_SETUP: ("billing_setup": "billing_setup"),
   SUBSCRIPTION_SETUP: ("subscription_setup": "subscription_setup"),
+  VAULT_WITHOUT_PURCHASE: ("vault_without_purchase": "vault_without_purchase"),
 };
 
 export const MENU_PLACEMENT = {

package/src/funding/paypal/config.jsx

@@ -17,6 +17,7 @@ export function getPayPalConfig(): FundingSourceConfig {
       BUTTON_FLOW.PURCHASE,
       BUTTON_FLOW.BILLING_SETUP,
       BUTTON_FLOW.SUBSCRIPTION_SETUP,
+      BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
     ],
 
     layouts: [BUTTON_LAYOUT.VERTICAL, BUTTON_LAYOUT.HORIZONTAL],

package/src/ui/buttons/props.js

@@ -67,6 +67,8 @@ export type OnCompleteData = {||};
 
 export type CreateBillingAgreement = () => ZalgoPromise<string> | string;
 
+export type CreateVaultSetupToken = () => ZalgoPromise<string>;
+
 export type CreateSubscriptionRequest = {||};
 export type SubscriptionResponse = {||} | {||};
 export type CreateSubscriptionData = {||} | {||};
@@ -515,6 +517,7 @@ export type ButtonProps = {|
   meta: {||},
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
   experience: string,
+  createVaultSetupToken: CreateVaultSetupToken,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type

package/src/zoid/buttons/component.jsx

@@ -181,11 +181,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         experiment = getButtonExperiments(),
         createBillingAgreement,
         createSubscription,
+        createVaultSetupToken,
       } = props;
 
       const flow = determineFlow({
         createBillingAgreement,
         createSubscription,
+        createVaultSetupToken,
       });
       const applePaySupport = fundingEligibility?.applepay?.eligible
         ? isApplePaySupported()
@@ -264,11 +266,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             supportedNativeBrowser,
             createBillingAgreement,
             createSubscription,
+            createVaultSetupToken,
           } = props;
 
           const flow = determineFlow({
             createBillingAgreement,
             createSubscription,
+            createVaultSetupToken,
           });
           const { layout } = style;
 
@@ -602,8 +606,16 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         type: "string",
         queryParam: true,
         value: ({ props }) => {
-          const { createBillingAgreement, createSubscription } = props;
-          return determineFlow({ createBillingAgreement, createSubscription });
+          const {
+            createBillingAgreement,
+            createSubscription,
+            createVaultSetupToken,
+          } = props;
+          return determineFlow({
+            createBillingAgreement,
+            createSubscription,
+            createVaultSetupToken,
+          });
         },
       },
 
@@ -841,6 +853,10 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
         default: () => true,
       },
+      createVaultSetupToken: {
+        type: "function",
+        required: false,
+      },
     },
   });
 });

package/src/zoid/buttons/util.js

@@ -35,6 +35,7 @@ import type {
   CreateBillingAgreement,
   CreateSubscription,
   ButtonProps,
+  CreateVaultSetupToken,
 } from "../../ui/buttons/props";
 import { determineEligibleFunding } from "../../funding";
 import { BUTTON_SIZE_STYLE } from "../../ui/buttons/config";
@@ -42,6 +43,7 @@ import { BUTTON_SIZE_STYLE } from "../../ui/buttons/config";
 type DetermineFlowOptions = {|
   createBillingAgreement: CreateBillingAgreement,
   createSubscription: CreateSubscription,
+  createVaultSetupToken: CreateVaultSetupToken,
 |};
 
 /**
@@ -77,7 +79,9 @@ const logNativeScreenInformation = once((key = "screenInformation") => {
 export function determineFlow(
   props: DetermineFlowOptions
 ): $Values<typeof BUTTON_FLOW> {
-  if (props.createBillingAgreement) {
+  if (props.createVaultSetupToken) {
+    return BUTTON_FLOW.VAULT_WITHOUT_PURCHASE;
+  } else if (props.createBillingAgreement) {
     return BUTTON_FLOW.BILLING_SETUP;
   } else if (props.createSubscription) {
     return BUTTON_FLOW.SUBSCRIPTION_SETUP;
@@ -203,9 +207,14 @@ export function getRenderedButtons(
     supportedNativeBrowser = isSupportedNativeBrowser(),
     createBillingAgreement,
     createSubscription,
+    createVaultSetupToken,
   } = props;
 
-  const flow = determineFlow({ createBillingAgreement, createSubscription });
+  const flow = determineFlow({
+    createBillingAgreement,
+    createSubscription,
+    createVaultSetupToken,
+  });
   const { layout } = style;
   const remembered = [];
   const platform = getPlatform();

package/src/actions/save/index.js

@@ -1,45 +0,0 @@
-/* @flow */
-
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-
-import { ValidationError } from "../../lib";
-
-type SaveActionConfig = {|
-  createVaultSetupToken: () => ZalgoPromise<string>,
-  onApprove: ({| vaultSetupToken: string |}) => void,
-|};
-
-export type CreateSaveAction = (config: SaveActionConfig) => {|
-  type: "SAVE",
-  ...SaveActionConfig,
-|};
-
-/**
- * These are the input configurations required from the merchant.
- */
-const REQUIRED_INPUTS = {
-  onApprove: "function",
-  createVaultSetupToken: "function",
-};
-
-const validateSaveConfig = (config: SaveActionConfig): void => {
-  for (const [inputProp, inputType] of Object.entries(REQUIRED_INPUTS)) {
-    if (!config[inputProp] || typeof config[inputProp] !== inputType) {
-      throw new ValidationError(
-        `Save action is missing the required '${inputProp}' callback`
-      );
-    }
-  }
-};
-
-/**
- * Creating a Save action allows us to validate initial inputs from the merchant, and then return the resulting object.
- */
-export const createSaveAction: CreateSaveAction = (config) => {
-  validateSaveConfig(config);
-
-  return {
-    type: "SAVE",
-    ...config,
-  };
-};

package/src/interface/actions.js

@@ -1,14 +0,0 @@
-/* @flow */
-
-import type { LazyProtectedExport } from "../types";
-import { createSaveAction, type CreateSaveAction } from "../actions/save";
-import { protectedExport } from "../lib";
-
-export const actions: LazyProtectedExport<{|
-  Save: CreateSaveAction,
-|}> = {
-  __get__: () =>
-    protectedExport({
-      Save: createSaveAction,
-    }),
-};