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


---

# 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/pay-on-delivery.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.