Payment Processing

Handle Stripe and Authorize.net payment flows.

Updated March 29, 2026

On this page

Overview

DashForDevs supports multiple payment processors. The SDK handles loading the processor's client library and tokenizing card data so sensitive card numbers never touch your server.

Load the Payment Processor

typescript

import dash from "@/lib/dash"

// Load the active processor's client library
const processor = await dash.payment.load()
// processor = { slug: "authorize-net", name: "Authorize.net", environment: "production" }

// Or just check which processor is active
const info = await dash.payment.getProcessor()

Tokenize Card Data

Convert card details into a secure token (client-side only):

typescript

const { token, descriptor } = await dash.payment.tokenize({
  cardNumber: "4111111111111111",
  expDate: "12/26",    // MM/YY format
  cvv: "123",
})

Security: Never send raw card numbers to your backend. Always tokenize on the client side first. The token is safe to transmit and can only be used once.

Complete Checkout with Payment

Pass the token to the checkout complete step:

typescript

const { order } = await dash.checkout.complete({
  cartId: dash.cart.cartId,
  shipping: { ... },
  payment_token: {
    token: token,
    descriptor: descriptor,
  },
})

Direct Charge (Advanced)

For custom payment flows, you can charge a token directly:

typescript

const { success, transaction } = await dash.payment.charge({
  token: "tok_abc123",
  descriptor: "Authorize.net",
  amount: "77.73",
  currency: "USD",
  invoiceNumber: "INV-1042",
  description: "Order #1042",
  billing: {
    firstName: "Jane",
    lastName: "Doe",
    address: "123 Main St",
    city: "Austin",
    state: "TX",
    zip: "78701",
    country: "US",
  },
})

Payment Flow Diagram

Customer enters card details
  ↓
dash.payment.tokenize() → token (client-side, secure)
  ↓
dash.checkout.complete({ payment_token: { token, descriptor } })
  ↓
Server charges the token via payment processor
  ↓
Order created → confirmation page

Supported Processors

Processor	Slug	Setup
Stripe	`stripe`	See Stripe Integration
Authorize.net	`authorize-net`	See Authorize.net

Configure your payment processor in the dashboard under Settings → Payments.

REST API

shell

# Get processor info
GET /storefront/payment/processor
X-API-Key: pk_live_your_key

# Get client config (public key, etc.)
GET /storefront/payment/client-config
X-API-Key: pk_live_your_key

# Process charge
POST /storefront/payment/charge
X-API-Key: pk_live_your_key
Content-Type: application/json

{
  "amount": "77.73",
  "token": "tok_abc123",
  "descriptor": "Authorize.net"
}

Next Steps

Order Confirmation — Building the success page
Stripe Integration — Setting up Stripe
Authorize.net — Setting up Authorize.net
API Key Security — Keeping payment flows secure

Payment Processing

Handle Stripe and Authorize.net payment flows.

Updated March 29, 2026

On this page

Overview

DashForDevs supports multiple payment processors. The SDK handles loading the processor's client library and tokenizing card data so sensitive card numbers never touch your server.

Load the Payment Processor

typescript

import dash from "@/lib/dash"

// Load the active processor's client library
const processor = await dash.payment.load()
// processor = { slug: "authorize-net", name: "Authorize.net", environment: "production" }

// Or just check which processor is active
const info = await dash.payment.getProcessor()

Tokenize Card Data

Convert card details into a secure token (client-side only):

typescript

const { token, descriptor } = await dash.payment.tokenize({
  cardNumber: "4111111111111111",
  expDate: "12/26",    // MM/YY format
  cvv: "123",
})

Security: Never send raw card numbers to your backend. Always tokenize on the client side first. The token is safe to transmit and can only be used once.

Complete Checkout with Payment

Pass the token to the checkout complete step:

typescript

const { order } = await dash.checkout.complete({
  cartId: dash.cart.cartId,
  shipping: { ... },
  payment_token: {
    token: token,
    descriptor: descriptor,
  },
})

Direct Charge (Advanced)

For custom payment flows, you can charge a token directly:

typescript

const { success, transaction } = await dash.payment.charge({
  token: "tok_abc123",
  descriptor: "Authorize.net",
  amount: "77.73",
  currency: "USD",
  invoiceNumber: "INV-1042",
  description: "Order #1042",
  billing: {
    firstName: "Jane",
    lastName: "Doe",
    address: "123 Main St",
    city: "Austin",
    state: "TX",
    zip: "78701",
    country: "US",
  },
})

Payment Flow Diagram

Customer enters card details
  ↓
dash.payment.tokenize() → token (client-side, secure)
  ↓
dash.checkout.complete({ payment_token: { token, descriptor } })
  ↓
Server charges the token via payment processor
  ↓
Order created → confirmation page

Supported Processors

Processor	Slug	Setup
Stripe	`stripe`	See Stripe Integration
Authorize.net	`authorize-net`	See Authorize.net

Configure your payment processor in the dashboard under Settings → Payments.

REST API

shell

# Get processor info
GET /storefront/payment/processor
X-API-Key: pk_live_your_key

# Get client config (public key, etc.)
GET /storefront/payment/client-config
X-API-Key: pk_live_your_key

# Process charge
POST /storefront/payment/charge
X-API-Key: pk_live_your_key
Content-Type: application/json

{
  "amount": "77.73",
  "token": "tok_abc123",
  "descriptor": "Authorize.net"
}

Next Steps

Order Confirmation — Building the success page
Stripe Integration — Setting up Stripe
Authorize.net — Setting up Authorize.net
API Key Security — Keeping payment flows secure