@akinon/pz-credit-payment

Installation method

You can use the following command to install the extension with the latest plugins:

npx @akinon/projectzero@latest --plugins

CreditPayment

A customizable React component that enables customers to select a credit payment option during checkout and confirm their agreement to terms before placing the order.

Props

CreditPaymentProps

| Prop | Type | Required | Description | | --- | --- | --- | --- | | translations | Record<string, CreditPaymentTranslationsProps> | Optional | Localization texts for title, button and validation message | | agreementCheckbox | React.ReactElement | Required | A controlled checkbox React element (e.g., terms agreement checkbox) | | titleClassName | string | Optional | Optional custom CSS class for the title area | | buttonClassName | string | Optional | Optional custom CSS class for the submit button | | renderer | { Content?: (props: RendererProps) => JSX.Element } | Optional | Optional override to fully control the rendering of the component |

CreditPaymentTranslationsProps

| Key | Type | Description | | --- | --- | --- | | title | string | Title text shown at the top of the section | | buttonName | string | Submit button label | | requiredFieldMessage | string | Error message when checkbox is not checked |

RendererProps (for renderer.Content)

| Prop | Type | Description | | --- | --- | --- | | control | any | React Hook Form control instance | | errors | any | React Hook Form errors object | | onSubmit | () => void | Submit handler | | creditPaymentOptions | any[] | Available credit payment options | | selectedCreditPaymentPk | number \| null | Currently selected option's primary key | | setCreditPaymentOption | (pk: number) => void | Setter for selecting a payment option | | preOrder | RootState['checkout']['preOrder'] | Pre-order object from Redux | | agreementCheckbox | React.ReactElement | Provided agreement checkbox component | | formError | string \| null | Any error returned from the confirmation API |

Usage

src/views/checkout/steps/payment/options/credit-payment/

Default Usage

<PluginModule
  component={Component.CreditPayment}
  props={{
    agreementCheckbox: (
      <CheckoutAgreements control={null} error={null} fieldId="agreement" />
    )
  }}
/>

Customized Usage with renderer

<PluginModule
  component={Component.CreditPayment}
  props={{
    agreementCheckbox: (
      <CheckoutAgreements control={null} error={null} fieldId="agreement" />
    ),
    renderer: {
      Content: ({
        control,
        errors,
        onSubmit,
        creditPaymentOptions,
        selectedCreditPaymentPk,
        setCreditPaymentOption,
        preOrder,
        agreementCheckbox,
        formError
      }) => (
        <form onSubmit={onSubmit} className="p-6 bg-white rounded-lg space-y-6">
          <h2 className="text-xl font-semibold">SHOPPING CREDIT</h2>
          <div className="space-y-4">
            {creditPaymentOptions.map((bank) => (
              <label
                key={bank.pk}
                className="p-4 flex items-center cursor-pointer rounded-lg border-gray-480 border space-x-5 pl-5 mb-6"
              >
                <Radio
                  type="radio"
                  value={bank.pk}
                  checked={
                    bank.pk === selectedCreditPaymentPk ||
                    preOrder.credit_payment_option?.pk === bank.pk
                  }
                  onChange={() => setCreditPaymentOption(bank.pk)}
                />
                <span>{bank.name}</span>
              </label>
            ))}
          </div>
          {React.cloneElement(agreementCheckbox, {
            control,
            error: errors.agreement,
            fieldId: 'agreement'
          })}
          {formError && <p className="text-xs text-error mt-2">{formError}</p>}
          <Button type="submit" className="w-full bg-black text-white">
            Place Order
          </Button>
        </form>
      )
    }
  }}
/>