Credit Payment

pz-credit-payment is a customizable React component that allows customers to select a credit payment option during checkout. It supports controlled agreement checkboxes, style overrides, and full layout customization.

Installation Method

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

npx @akinon/projectzero@latest --plugins

Props

Props	Type	Required	Description
translations	type of defaultTranslations	Optional	Used to customize the default texts.
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

Props	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
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

Usage Examples

/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>
     )
   }
 }}
/>