# Custom HTML \[Add payment links to your method] Payment methods can serve a payment page when users visit a protected endpoint in a browser. This guide covers how to add HTML support to a [custom payment method](/payment-methods/custom). For the `Html.init` API reference, see [`Html.init`](/sdk/typescript/Html.init). Adding HTML support requires two pieces: 1. **Server-side handler** — provide `html` options to `Method.toServer` with a bundled script, amount formatter, and other options. 2. **Client-side script** — a script embedded in the server-rendered page that uses [`Html.init`](/sdk/typescript/Html.init) to render a payment form and submit credentials via Service Worker. ## Server-side handler Pass the `html` option to `Method.toServer`. The server embeds your script into a full HTML page and serves it when the request has `Accept: text/html`. ```ts [methods.server.ts] import { Method, Receipt, z } from 'mppx' import type * as Html from 'mppx/html' import htmlContent from './html/main.js?raw' // bundled client script const lightning = Method.from({ intent: 'charge', name: 'lightning', schema: { credential: { payload: z.object({ preimage: z.string() }) }, request: z.object({ amount: z.string(), currency: z.string(), invoice: z.string(), paymentHash: z.string(), recipient: z.string(), }), }, }) export function charge(parameters: { html?: Html.Config | undefined }) { const { html } = parameters return Method.toServer(lightning, { // [!code hl:start] html: html ? { config: {}, content: htmlContent, formatAmount: (request) => `${request.currency} ${request.amount}`, text: html.text, theme: html.theme, } : undefined, // [!code hl:end] async verify({ credential }) { return Receipt.from({ method: 'lightning', reference: credential.payload.preimage, status: 'success', timestamp: new Date().toISOString(), }) }, }) } ``` ### Html options #### config * **Type:** `Record` Method-specific data passed to the client script as `context.config`. For example, Stripe passes `{ publishableKey, createTokenUrl }`. Use `{}` if your method doesn't need extra configuration. #### content * **Type:** `string` The JavaScript bundle for your payment form. Embedded as an inline `