Skip to content

feat: add html payment pages for browser 402 responses#220

Draft
tmm wants to merge 2 commits intomainfrom
tmm/html-payment-pages
Draft

feat: add html payment pages for browser 402 responses#220
tmm wants to merge 2 commits intomainfrom
tmm/html-payment-pages

Conversation

@tmm
Copy link
Member

@tmm tmm commented Mar 23, 2026

Experimental: Renders 402 as html in browsers with way to complete payment.

Try it out

gh pr checkout 220
cp .env.example .env # set MPP_SECRET_KEY
pnpm i
pnpm dev:example charge # open `http://localhost:5173/api/photo` in your browser

For Stripe example, set VITE_STRIPE_PUBLIC_KEY and VITE_STRIPE_SECRET_KEY and run pnpm dev:example stripe, the open http://localhost:5173/api/fortune in your browser.

Examples

tempo.charge()

005788_Firefox_2026-03-23-19.13.47.mp4

stripe.charge()

005801_Firefox_2026-03-23-19.34.36.mp4

TODO

  • add browser tests to make sure script tags don't regress
  • different approach to html rendering?
  • customization (html styles, stripe elements options, etc.)

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 23, 2026

Open in StackBlitz

npm i https://pkg.pr.new/mppx@220

commit: 5c6eaf9

* Serve an HTML payment page to browsers (requests with `Accept: text/html`).
*
* - `true` — use the built-in payment page
* - `(challenge) => string` — custom HTML renderer
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

<button id="pay" type="button">Pay with card</button>
<output id="status"></output>
</div>
<script src="https://js.stripe.com/clover/stripe.js"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we may want to make this a constant somewhere -- these will change over time

https://docs.stripe.com/changelog/clover

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call

recipient,
} as unknown as Defaults,

html: html`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is there advantage to moving this to its own file?

js -> html -> script tag is a little gnarly (but also cool)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, pros and cons. need to keeping noodling on it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants