# Create a Hosted Fields session, tokenize card details client-side, then run the sale.

Create a Hosted Fields session, tokenize card details client-side, then run the sale.

1. Create a Hosted Fields session for the terminal by POSTing to /processing-terminals/{processingTerminalId}/hosted-fields-sessions with scenario `payment`. The returned session token (expires after 10 minutes) is placed in the Hosted Fields JavaScript config in the browser. Requires an Idempotency-Key header and the libVersion.
 [createSession](/api/create-session)
2. OFF-API, client-side: the Hosted Fields JavaScript library renders the embedded fields using the session token from the previous step, the customer submits their card or bank details, and the client receives a single-use token in a `submissionSuccess` event. The token is single-use and expires ~30 minutes after issue; it is the `singleUseToken` input consumed by the next step.

3. Run the sale server-side by POSTing to /payments with paymentMethod.type = singleUseToken and the single-use token the client received from the `submissionSuccess` event. The default `autoCapture: true` / `processAsSale: false` produce a normal, adjustable sale. To save the card at the same time, add a `credentialOnFile` object with `tokenize: true`. Requires an Idempotency-Key header. Terminal outcome: a created payment with a paymentId and transactionResult.
 [payment](/api/payment)

## Workflow diagram

```mermaid
flowchart TD
  step0["1. session request · API"]
  step1["2. hosted fields submit · Manual"]
  step0 --> step1
  step2["3. sale request · API"]
  step1 --> step2
```