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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/next.js/plugins/credit-payment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.