|
1
|
--- |
|
2
|
title: "Funding Method Picker Example" |
|
3
|
sidebarTitle: "Funding Method Picker" |
|
4
|
description: "Checkout UI demo for binding USDC, card, ACH bank_transfer, or eth_wallet to a ProcureNet v7 session, with optional live POST." |
|
5
|
--- |
|
6
|
|
|
7
|
This repository includes a self-contained funding-method picker under `examples/checkout-funding-picker/`. Use it as a reference when building buyer-facing checkout that calls `POST /api/v7/sessions/{id}/funding-method`. |
|
8
|
|
|
9
|
## What it demonstrates |
|
10
|
|
|
11
|
| Method | UI | Request body | |
|
12
|
|---|---|---| |
|
13
|
| `usdc` | Network select (`base`, `arbitrum`, `polygon`, `ethereum`) | `{ method, network, fee_* }` | |
|
14
|
| `card` | Method selection only | `{ method: "card", fee_* }` | |
|
15
|
| `bank_transfer` | Routing number, account number, account type, account holder name | Full ACH fields + `fee_*` | |
|
16
|
| `eth_wallet` | Wallet address, optional ENS, network (default `ethereum`) | `{ method, wallet_address, network, ens_name?, fee_* }` | |
|
17
|
|
|
18
|
Every live POST / preview body includes a **platform fee** by default: `fee_bps: 100` (1%) and `fee_recipient` (default `0xD0Fb43F2e9b4Dcd4C9FB70DA89385f77086cb778`, overridable in config). The UI shows a fee line (`1% → 0xD0Fb…b778`) and an optional amount field for an estimated fee (1% of amount). |
|
19
|
|
|
20
|
The demo validates ACH and ETH fields client-side (ABA check digit; `0x` + 40 hex address), previews the JSON body, and can **POST live** to your API base URL with a Bearer JWT. |
|
21
|
|
|
22
|
## Config |
|
23
|
|
|
24
|
Enter API base URL (default `https://api.procurenet.io`), Bearer JWT, Session ID, and optional **fee recipient** override in the UI. Values persist in `localStorage` under `pn.checkoutFunding.*` (including `pn.checkoutFunding.feeRecipient`). Enable **Preview only** to skip the network call. An empty JWT blocks live submit with a clear error — no secrets are hardcoded. |
|
25
|
|
|
26
|
## Run the demo |
|
27
|
|
|
28
|
```bash |
|
29
|
cd examples/checkout-funding-picker |
|
30
|
python3 -m http.server 8765 |
|
31
|
``` |
|
32
|
|
|
33
|
Open [http://localhost:8765/](http://localhost:8765/). |
|
34
|
|
|
35
|
Or open `examples/checkout-funding-picker/index.html` directly in a browser. |
|
36
|
|
|
37
|
## Related |
|
38
|
|
|
39
|
- [POST /funding-method](/api/sessions-funding-method) — full request/response, ACH, and ETH wallet rules |
|
40
|
- [Integrate Checkout](/guides/integrate-checkout) — end-to-end session flow |