@akinon/pz-flow-payment v1.92.0-rc.12

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:

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:

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:

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 for all available configuration options.