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.

Installation Method

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

npx @akinon/projectzero@latest --plugins

Props

PayOnDelivery Props

Props	Type	Required	Description
translations	type of defaultTranslations	Optional	Used to customize the default texts.
agreementCheckbox	React.ReactElement	Optional	A controlled checkbox React element (e.g., terms agreement checkbox)
customUIRender	(props: RenderProps) => React.ReactNode	Optional	Override default UI rendering with your own layout and logic

PayOnDeliveryTranslationsProps

Key	Type	Description
paymentInformationTitle	string	Main section title
paymentInformationSubtitle	string	Subtitle for available options
totalAmountText	string	Label for total amount display
serviceFeeText	string	Label for service fee info
returnInfoText	string	Text about return process
refundInfoText	string	Text about refund process
faqInfoText	string	Link/label for FAQ section
placeOrderText	string	Button text
errorMessageText	string	API error display text
requiredFieldMessage	string	Field validation error message

CustomUIRenderProps

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

Usage Examples

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

Default Usage

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

Customized Usage with CustomUIRenderer

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