@akinon/pz-flow-payment 1.92.0-rc.7

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @akinon/pz-flow-payment
+
+## 1.92.0-rc.7
+
+### Minor Changes
+
+- 6e6b0a9: ZERO-3422: Add pz-flow-payment package

package/README.md

@@ -0,0 +1,59 @@
+# pz-flow-payment
+
+Checkout.com Flow Payment integration for Project Zero Next.
+
+## Installation
+
+You can use the following command to install the `pz-flow-payment` plugin in your Project Zero Next application:
+
+```bash
+npx @akinon/projectzero@latest --plugins
+```
+
+## PaymentOptionViews Integration
+
+The Flow Payment plugin is designed to work seamlessly with the `PaymentOptionViews` array in your checkout step implementation. By default, you do not need to call the `FlowPayment` component directly. Flow Payment will be rendered automatically when the user selects the corresponding payment option in the checkout flow.
+
+To enable Flow Payment as a selectable payment option, add an entry to the `PaymentOptionViews` array, typically in your `src/views/checkout/steps/payment/index.tsx` file:
+
+```tsx
+import FlowPayment from '@akinon/pz-flow-payment/src/views';
+
+export const PaymentOptionViews = [
+  // ...other payment options
+  {
+    slug: 'flow',
+    view: FlowPayment
+  }
+];
+```
+
+This allows the checkout step to dynamically render the Flow Payment component when the user selects the corresponding payment option. Make sure the `slug` matches the payment option's identifier used in your backend or payment configuration.
+
+## Customizations
+
+If you want to customize the Flow Payment integration (for example, to change the environment, locale, translations, appearance, or component options), you will need to call the `FlowPayment` component yourself and provide the desired options as props.
+
+Example usage:
+
+```tsx
+import FlowPayment from '@akinon/pz-flow-payment/src/views';
+
+<FlowPayment
+  options={{
+    environment: 'sandbox', // or 'production'
+    locale: 'en',
+    translations: {
+      // Custom translations here
+    },
+    appearance: {
+      // Design tokens for appearance customization
+    },
+    componentOptions: {
+      // Component-specific options
+    }
+  }}
+/>;
+```
+
+See the source code and [Checkout.com documentation](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/customize-your-flow-integration) for all available configuration options.

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@akinon/pz-flow-payment",
+  "license": "MIT",
+  "version": "1.92.0-rc.7",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "@checkout.com/checkout-web-components": "0.7.0-beta"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+import FlowPaymentView from './views';
+
+export default FlowPaymentView;

package/src/views/index.tsx

@@ -0,0 +1,125 @@
+import { checkoutApi } from '@akinon/next/data/client/checkout';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  ComponentOptions,
+  CustomTranslations,
+  loadCheckoutWebComponents,
+  PartialDesignTokens,
+  PaymentSessionResponse
+} from '@checkout.com/checkout-web-components';
+import { RootState } from '@theme/redux/store';
+import { useEffect } from 'react';
+
+export default function FlowPayment({
+  options
+}: {
+  options?: {
+    /**
+     * Environment to use for the payment components.
+     * Defaults to 'production'.
+     * If you want to test the payment components, you can set this to 'sandbox'.
+     */
+    environment?: 'sandbox' | 'production';
+
+    /**
+     * The locale to use for the payment components.
+     * Defaults to 'en'.
+     *
+     * See the list of supported locales here:
+     * https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/add-localization-to-your-flow-integration#Supported_languages
+     */
+    locale?: string;
+
+    /**
+     * The translations to use for the payment components.
+     * See the documentation for more details:
+     * https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/add-localization-to-your-flow-integration#Translations
+     */
+    translations?: CustomTranslations;
+
+    /**
+     * The appearance options for the payment components.
+     * See the documentation for more details:
+     * https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/customize-your-flow-integration
+     */
+    appearance?: PartialDesignTokens;
+
+    /**
+     * The component options for the payment components.
+     * See the documentation for more details:
+     * https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/customize-your-flow-integration#Component_options
+     */
+    componentOptions?: ComponentOptions;
+  };
+}) {
+  const { preOrder, walletPaymentData } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+  const dispatch = useAppDispatch();
+
+  const initWalletSelection = async () => {
+    const walletSelectionPageResponse = await dispatch(
+      checkoutApi.endpoints.setWalletSelectionPage.initiate({
+        payment_option: preOrder.payment_option?.pk
+      })
+    ).unwrap();
+
+    const walletPaymentPageContext =
+      walletSelectionPageResponse.context_list.find(
+        (c) => c.page_name === 'WalletPaymentPage'
+      );
+
+    if (!walletPaymentPageContext) {
+      return;
+    }
+
+    dispatch(checkoutApi.endpoints.setWalletPaymentPage.initiate({}));
+  };
+
+  const initFlowPaymentWebComponents = async ({
+    publicKey
+  }: {
+    publicKey: string;
+  }) => {
+    const checkout = await loadCheckoutWebComponents({
+      publicKey,
+      environment: options?.environment || 'production',
+      locale: options?.locale || 'en',
+      translations: options?.translations,
+      paymentSession: preOrder.context_extras as PaymentSessionResponse,
+      appearance: options?.appearance,
+      componentOptions: options?.componentOptions
+        ? { flow: options.componentOptions }
+        : undefined
+    });
+
+    const flowComponent = checkout.create('flow');
+
+    flowComponent.mount(document.getElementById('flow-container')!);
+  };
+
+  useEffect(() => {
+    initWalletSelection();
+  }, []);
+
+  useEffect(() => {
+    if (
+      !preOrder.wallet_method ||
+      !preOrder.token ||
+      !walletPaymentData?.data?.public_key ||
+      preOrder.wallet_method !== 'checkout_flow'
+    ) {
+      return;
+    }
+
+    initFlowPaymentWebComponents({
+      publicKey: walletPaymentData.data.public_key
+    });
+  }, [
+    preOrder.wallet_method,
+    preOrder.token,
+    walletPaymentData?.data?.public_key
+  ]);
+
+  return <div id="flow-container" className="flow-payment-container"></div>;
+}