Purchase Order Payment Plugin

Storefront plugin config and hook for adding purchase-order payment information to an active order.

Disclaimer: This module depends on compatible plugin behavior being active in the consumer's Vendure backend instance. Configure the backend first, then register this plugin config in the storefront.

Purpose

Use this module when checkout needs a purchase-order payment flow backed by a Vendure mutation.

Features

• Exposes VendurePurchaseOrderPaymentPlugin mutation request contract
• Exposes useAddPurchaseOrderPayment convenience hook
• Exposes AddPurchaseOrderPaymentToOrderInput and related request types

Installation

npm

npm install @haus-storefront-react/vendure-plugin-configs

Yarn

yarn add @haus-storefront-react/vendure-plugin-configs

Note: This is not a public package. Contact the Haus Tech Team for access.

API Reference

Hooks

useAddPurchaseOrderPayment

Executes purchase-order payment mutation and exposes loading/error/success state.

Exports

• VendurePurchaseOrderPaymentPlugin
• useAddPurchaseOrderPayment
• AddPurchaseOrderPaymentToOrderInput, PurchaseOrderPaymentPluginRequests types

Basic Usage

Example 1: Register Plugin in Data Provider

Use this to register the purchase-order-payment plugin in your provider pluginConfigs.

React

import { VendurePurchaseOrderPaymentPlugin } from '@haus-storefront-react/vendure-plugin-configs/purchase-order-payment'

// This plugin has no configurable feature/settings payload in init.
const poPlugin = VendurePurchaseOrderPaymentPlugin

React Native

import { VendurePurchaseOrderPaymentPlugin } from '@haus-storefront-react/vendure-plugin-configs/purchase-order-payment'

// This plugin has no configurable feature/settings payload in init.
const poPlugin = VendurePurchaseOrderPaymentPlugin

Example 2: Consume Plugin Functionality

Use this in checkout/payment UI after the plugin has been registered.

React

import { useAddPurchaseOrderPayment } from '@haus-storefront-react/vendure-plugin-configs/purchase-order-payment'

function AddPoPaymentButton() {
  const { addPurchaseOrderPayment, isLoading } = useAddPurchaseOrderPayment()
  return (
    <button
      disabled={isLoading}
      onClick={() => addPurchaseOrderPayment({ poNumber: 'PO-1001' })}
    >
      Add purchase order payment
    </button>
  )
}

React Native

import { Button } from 'react-native'
import { useAddPurchaseOrderPayment } from '@haus-storefront-react/vendure-plugin-configs/purchase-order-payment'

function AddPoPaymentButton() {
  const { addPurchaseOrderPayment, isLoading } = useAddPurchaseOrderPayment()
  return (
    <Button
      disabled={isLoading}
      title='Add purchase order payment'
      onPress={() => addPurchaseOrderPayment({ poNumber: 'PO-1001' })}
    />
  )
}

---

Made with ❤️ by Haus Tech Team