owen-payment-demo

Reusable EthosPay payment middle page. The package owns only the payment UI and request flow; merchant signing must stay outside the package.

React usage

import { EthosPayPayment } from 'owen-payment-demo';
import 'owen-payment-demo/style.css';

export function Checkout() {
  return (
    <EthosPayPayment
      amount="20.00"
      merchantName="EthosPay Demo"
      reownProjectId={import.meta.env.VITE_REOWN_PROJECT_ID}
      requestUrl={import.meta.env.VITE_ETHOSPAY_REQUEST_URL}
      signRequest={async ({ requestBody }) => {
        // Recommended: call your backend to sign this request body.
        const response = await fetch('/api/ethospay/sign', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(requestBody),
        });
        const { signature } = await response.json();

        return {
          headers: {
            'Content-Type': 'application/json',
            'X-Signature': signature,
          },
        };
      }}
    />
  );
}

Legacy React usage with signedRequest

If the host app needs full request control, pass chainOptions and signedRequest. In this mode the host app is responsible for loading chain options.

import { EthosPayPayment } from 'owen-payment-demo';
import 'owen-payment-demo/style.css';

export function Checkout({ chainOptions }) {
  return (
    <EthosPayPayment
      amount="20.00"
      merchantName="EthosPay Demo"
      reownProjectId={import.meta.env.VITE_REOWN_PROJECT_ID}
      chainOptions={chainOptions}
      signedRequest={async ({ requestBody }) => {
        // Recommended: call your backend signing endpoint here.
        // Do not pass private keys into this component.
        const response = await fetch('/api/ethospay/signed-request', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(requestBody),
        });
        const data = await response.json();
        return { response, data };
      }}
    />
  );
}

Hosted invoice link usage

For a public payment link, pass the invoice/order id and a lookup callback. The payment page queries the pay-in order first: missing orders render the invalid invoice state, paid orders render the success state, and unpaid orders continue to the normal chain/token selection.

<EthosPayPayment
  invoiceId="FHQNW3ZTCJYQU"
  merchantName="EthosPay Demo"
  queryInvoice={async ({ invoiceId }) => {
    const response = await fetch(`/api/pay-invoices/${invoiceId}`);
    const data = await response.json();
    return { response, data };
  }}
  signedRequest={async ({ requestBody }) => {
    const response = await fetch(`/api/pay-invoices/FHQNW3ZTCJYQU/ethospay-request`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(requestBody),
    });
    const data = await response.json();
    return { response, data };
  }}
/>

Hosted paid result usage

If the host app has already queried an order and knows it is paid, render the shared result UI directly instead of rebuilding the success page in the host app.

import { EthosPayPaymentResult } from 'owen-payment-demo';
import 'owen-payment-demo/style.css';

<EthosPayPaymentResult
  merchantName="EthosPay Demo"
  amount="20.00"
  token="USDT"
  orderReference="FHQNW3ZTCJYQU"
  chain="bsc_testnet"
  from="0xffd5442b29c23b6bdd0418497e498a22ecdadfb8"
  to="0x4b66e402..."
  txHash="0x643f785f..."
  paymentLink={window.location.href}
/>;

Vue or plain frontend usage

The non-React mount API works from Vue or plain JavaScript, but this package still uses React internally, so consumers must install the declared react and react-dom peer dependencies.

import { mountEthosPayPayment } from 'owen-payment-demo';
import 'owen-payment-demo/style.css';

const payment = mountEthosPayPayment('#ethospay-payment', {
  amount: '20.00',
  merchantName: 'EthosPay Demo',
  reownProjectId: import.meta.env.VITE_REOWN_PROJECT_ID,
  requestUrl: import.meta.env.VITE_ETHOSPAY_REQUEST_URL,
  signRequest: async ({ requestBody }) => {
    const response = await fetch('/api/ethospay/sign', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(requestBody),
    });
    const { signature } = await response.json();
    return {
      headers: {
        'Content-Type': 'application/json',
        'X-Signature': signature,
      },
    };
  },
});

// payment.update({ amount: '88.00' });
// payment.unmount();

Signing boundary

privateKey must not be passed to EthosPayPayment. Use the signedRequest callback to call a merchant-controlled signing service, then return { response, data } to the payment UI.

Alternatively, pass requestUrl and signRequest. In that mode the component fetches get_chain_configs, new_user, and query_payin_transaction internally, while your callback only provides the signed headers/body. requestUrl alone is not enough for EthosPay calls; package consumers must provide either signedRequest or requestUrl + signRequest.

Defaults

currency defaults to USD. initialChain is optional; when it is not provided, the payment page selects the first chain returned by chainOptions or by get_chain_configs. initialLanguage is also optional; the payment page defaults to English and persists the user's selected language in localStorage.

EVM wallet connection

TRON payments use the browser TronLink provider. EVM chains keep the browser injected wallet fallback and also show a Reown AppKit button. Pass reownProjectId or define VITE_REOWN_PROJECT_ID in the host app to enable the AppKit connection flow.