|
1
|
# Checkout funding-method picker |
|
2
|
|
|
3
|
Static demo UI for ProcureNet v7 `POST /api/v7/sessions/{id}/funding-method`. |
|
4
|
|
|
5
|
Supports: |
|
6
|
|
|
7
|
- **USDC** — with network select (`base`, `arbitrum`, `polygon`, `ethereum`) |
|
8
|
- **Card** — binds `method: "card"` |
|
9
|
- **ACH** (`bank_transfer`) — `routing_number`, `account_number`, `account_type`, `account_holder_name` |
|
10
|
- **ETH wallet** (`eth_wallet`) — `wallet_address` (`0x` + 40 hex), optional `ens_name`, `network` (default `ethereum`) |
|
11
|
|
|
12
|
On submit, the page validates client-side (ABA check digit for ACH; basic hex address for ETH), shows the request JSON, and by default performs a **live** `fetch` POST. Enable **Preview only** to skip the network call. |
|
13
|
|
|
14
|
Every request body includes a **platform fee** by default: `fee_bps: 100` (1%) and `fee_recipient` (hardcoded platform default `0xD0Fb43F2e9b4Dcd4C9FB70DA89385f77086cb778`, overridable in config). The UI shows a fee line and an optional amount field for estimated fee display. |
|
15
|
|
|
16
|
## Config (localStorage) |
|
17
|
|
|
18
|
| Field | localStorage key | Default | |
|
19
|
|---|---|---| |
|
20
|
| API base URL | `pn.checkoutFunding.apiBase` | `https://api.procurenet.io` | |
|
21
|
| Bearer JWT | `pn.checkoutFunding.jwt` | _(empty)_ | |
|
22
|
| Session ID | `pn.checkoutFunding.sessionId` | `sess_demo_001` | |
|
23
|
| Fee recipient | `pn.checkoutFunding.feeRecipient` | `0xD0Fb43F2e9b4Dcd4C9FB70DA89385f77086cb778` | |
|
24
|
| Preview only | `pn.checkoutFunding.previewOnly` | `0` (live POST) | |
|
25
|
|
|
26
|
Live submit requires a non-empty JWT (`Authorization: Bearer …` + `Content-Type: application/json`). An empty token shows a clear error and does not call the API. No secrets are hardcoded (JWT empty by default; fee recipient is the public platform wallet). |
|
27
|
|
|
28
|
The response panel shows HTTP status and body (JSON pretty-printed when possible; raw text otherwise). Network failures are surfaced in the UI. |
|
29
|
|
|
30
|
## Open / serve |
|
31
|
|
|
32
|
From this directory: |
|
33
|
|
|
34
|
```bash |
|
35
|
# Option A — open the file directly |
|
36
|
open index.html # macOS |
|
37
|
xdg-open index.html # Linux |
|
38
|
|
|
39
|
# Option B — local static server (recommended; avoids some browser CORS quirks for file://) |
|
40
|
python3 -m http.server 8765 |
|
41
|
# then visit http://localhost:8765/ |
|
42
|
``` |
|
43
|
|
|
44
|
From the Omnipay repo root: |
|
45
|
|
|
46
|
```bash |
|
47
|
python3 -m http.server 8765 --directory examples/checkout-funding-picker |
|
48
|
``` |
|
49
|
|
|
50
|
> **CORS:** the browser will only accept the live response if the API allows your origin. Use Preview only, a local proxy, or an allowed origin when testing against production. |
|
51
|
|
|
52
|
## Files |
|
53
|
|
|
54
|
| File | Role | |
|
55
|
|---|---| |
|
56
|
| `index.html` | Markup, config fields, form structure | |
|
57
|
| `styles.css` | Institutional paper / navy styling | |
|
58
|
| `app.js` | Config persistence, ACH/ETH validation, live POST, response panel | |
|
59
|
|
|
60
|
## Related docs |
|
61
|
|
|
62
|
- API: [`api/sessions-funding-method.mdx`](../../api/sessions-funding-method.mdx) |
|
63
|
- Guide: [`guides/integrate-checkout.mdx`](../../guides/integrate-checkout.mdx) |
|
64
|
- Docs page: [`guides/checkout-funding-picker.mdx`](../../guides/checkout-funding-picker.mdx) |