# 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.

## <mark style="color:red;">**Installation Method**</mark>

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

```bash
npx @akinon/projectzero@latest --plugins
```

### <mark style="color:red;">**Props**</mark>

<table><thead><tr><th width="158.1328125">Props</th><th width="168.5703125">Type</th><th width="101.34375">Required</th><th>Description</th></tr></thead><tbody><tr><td>translations</td><td>type of defaultTranslations</td><td>Optional</td><td>Used to customize the default texts.</td></tr><tr><td>agreementCheckbox</td><td>React.ReactElement</td><td>Required</td><td>A controlled checkbox React element (e.g., terms agreement checkbox)</td></tr><tr><td>titleClassName</td><td>string</td><td>Optional</td><td>Optional custom CSS class for the title area</td></tr><tr><td>buttonClassName</td><td>string</td><td>Optional</td><td>Optional custom CSS class for the submit button</td></tr><tr><td>renderer</td><td>{ Content?: (props: RendererProps) => JSX.Element }</td><td>Optional</td><td>Optional override to fully control the rendering of the component</td></tr></tbody></table>

### <mark style="color:red;">**CreditPaymentTranslationsProps**</mark>

<table><thead><tr><th width="201.2734375">Key</th><th width="126.40234375">Type</th><th>Description</th></tr></thead><tbody><tr><td>title</td><td>string</td><td>Title text shown at the top of the section</td></tr><tr><td>buttonName</td><td>string</td><td>Submit button label</td></tr><tr><td>requiredFieldMessage</td><td>string</td><td>Error message when checkbox is not checked</td></tr></tbody></table>

### <mark style="color:red;">**RendererProps**</mark>

<table><thead><tr><th width="217.47265625">Props</th><th width="193.59765625">Type</th><th>Description</th></tr></thead><tbody><tr><td>control</td><td>any</td><td>React Hook Form control instance</td></tr><tr><td>errors</td><td>any</td><td>React Hook Form errors object</td></tr><tr><td>onSubmit</td><td>() => void</td><td>Submit handler</td></tr><tr><td>creditPaymentOptions</td><td>any[]</td><td>Available credit payment options</td></tr><tr><td>selectedCreditPaymentPk</td><td>number</td><td>null</td></tr><tr><td>setCreditPaymentOption</td><td>(pk: number) => void</td><td>Setter for selecting a payment option</td></tr><tr><td>preOrder</td><td>RootState['checkout']['preOrder']</td><td>Pre-order object from Redux</td></tr><tr><td>agreementCheckbox</td><td>React.ReactElement</td><td>Provided agreement checkbox component</td></tr><tr><td>formError</td><td>string</td><td>null</td></tr></tbody></table>

## <mark style="color:red;">**Usage Examples**</mark>

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

### <mark style="color:red;">**Default Usage**</mark>

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

### <mark style="color:red;">**Customized Usage with Renderer**</mark>

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