# Pay on Delivery

**pz-pay-on-delivery** is a customizable React component that enables customers to select a "Pay on Delivery" payment method during checkout and confirm their agreement to terms before placing the order.

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

#### **PayOnDelivery Props**

<table><thead><tr><th width="182.0390625">Props</th><th width="183.265625">Type</th><th width="102.91796875">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>Optional</td><td>A controlled checkbox React element (e.g., terms agreement checkbox)</td></tr><tr><td>customUIRender</td><td>(props: RenderProps) => React.ReactNode</td><td>Optional</td><td>Override default UI rendering with your own layout and logic</td></tr></tbody></table>

#### **PayOnDeliveryTranslationsProps**

<table><thead><tr><th width="235.93359375">Key</th><th width="106.36328125">Type</th><th>Description</th></tr></thead><tbody><tr><td>paymentInformationTitle</td><td>string</td><td>Main section title</td></tr><tr><td>paymentInformationSubtitle</td><td>string</td><td>Subtitle for available options</td></tr><tr><td>totalAmountText</td><td>string</td><td>Label for total amount display</td></tr><tr><td>serviceFeeText</td><td>string</td><td>Label for service fee info</td></tr><tr><td>returnInfoText</td><td>string</td><td>Text about return process</td></tr><tr><td>refundInfoText</td><td>string</td><td>Text about refund process</td></tr><tr><td>faqInfoText</td><td>string</td><td>Link/label for FAQ section</td></tr><tr><td>placeOrderText</td><td>string</td><td>Button text</td></tr><tr><td>errorMessageText</td><td>string</td><td>API error display text</td></tr><tr><td>requiredFieldMessage</td><td>string</td><td>Field validation error message</td></tr></tbody></table>

#### **CustomUIRenderProps**

<table><thead><tr><th width="175.69140625">Prop</th><th width="272.36328125">Type</th><th>Description</th></tr></thead><tbody><tr><td>handleSubmit</td><td>UseFormHandleSubmit</td><td>Form submit handler</td></tr><tr><td>onSubmit</td><td>SubmitHandler&#x3C;PayOnDeliveryForm></td><td>Submit function</td></tr><tr><td>register</td><td>UseFormRegister&#x3C;PayOnDeliveryForm></td><td>Form field registrar</td></tr><tr><td>control</td><td>Control&#x3C;PayOnDeliveryForm></td><td>React Hook Form control instance</td></tr><tr><td>errors</td><td>FieldErrors&#x3C;PayOnDeliveryForm></td><td>Validation errors</td></tr><tr><td>paymentChoices</td><td>any[]</td><td>List of available payment choices</td></tr><tr><td>preOrder</td><td>RootState['checkout']['preOrder']</td><td>PreOrder data from Redux</td></tr><tr><td>formError</td><td>string</td><td>Any error returned from the confirmation API</td></tr><tr><td>isLoading</td><td>boolean</td><td>Loading state</td></tr><tr><td>setPayOnDeliveryChoice</td><td>(value: string) => void</td><td>Function to update payment selection</td></tr></tbody></table>

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

```bash
/src/views/checkout/steps/payment/options/pay-on-delivery/
```

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

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

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

```javascript
<PluginModule
 component={Component.PayOnDelivery}
 props={{
   customUIRender: ({
     handleSubmit,
     onSubmit,
     control,
     errors,
     setPayOnDeliveryChoice,
     paymentChoices,
     preOrder,
     formError
   }) => (
     <form
       onSubmit={handleSubmit(onSubmit)}
       className="p-6 bg-white rounded-lg space-y-6"
     >
       <h2 className="text-xl font-semibold">PAY ON DELIVERY</h2>
       <div className="space-y-4">
         {paymentChoices.map((choice) => (
           <label key={choice.value} className="flex items-center space-x-4">
             <Radio
               type="radio"
               value={choice.value}
               checked={choice.value === preOrder.payment_choice?.value}
               onChange={() => setPayOnDeliveryChoice(choice.value)}
             />
             <span>{choice.label}</span>
           </label>
         ))}
       </div>
       {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>
   )
 }}
/>
```