Single Page Checkout

​

Why Use Single Page Checkout

• No second page. The two-page checkout collects details on page one, then loads a separate payment page after Continue to Payment. Single page checkout shows the payment form when the page opens, so the customer pays with no extra click and no second page load.
• Fewer fields before payment. The contact block asks only for the email, and for the phone number only when you require it. Because minimal_address is on by default, billing information asks for the full name, the country, and the ZIP code only where tax needs it.
• Apple Pay and Google Pay first. The wallet buttons sit at the top of the page. A customer with a card saved in their wallet pays without typing card details, and the checkout takes the email from the wallet when the field is empty.
• The final price before paying. Tax, discounts, and currency changes update the total on the same page, so the customer sees the amount they pay before they press Pay Now, not on a later page.
• No charge for a total the customer did not see. The customer pays the total that the page or the wallet sheet showed. If the total changes before the charge, the payment stops and the page shows the new total.

​

How It Works

1. Apple Pay and Google Pay: the wallet buttons the customer’s device supports, with an OR line under them. See Apple Pay and Google Pay for when they move into the payment method list.
2. Email: the customer’s email address. When you set require_phone_number, this block is titled Contact Information and also asks for the phone number. Custom fields appear below this block.
3. Payment Method: the payment methods, as an accordion list by default. The selected method shows its own fields, then Billing Information (the customer’s full name, country, and ZIP code), the Purchasing as a business checkbox, and the Pay Now button.
4. Footer: the security notice, the Merchant of Record notice, and the Privacy and Terms links.

​

Enabling Single Page Checkout

const session = await client.checkoutSessions.create({
  product_cart: [{ product_id: 'pdt_123', quantity: 1 }],
  feature_flags: {
    single_page: true
  },
  return_url: 'https://yoursite.com/checkout/success'
});

session = client.checkout_sessions.create(
    product_cart=[{"product_id": "pdt_123", "quantity": 1}],
    feature_flags={"single_page": True},
    return_url="https://yoursite.com/checkout/success",
)

curl -X POST https://test.dodopayments.com/checkouts \
  -H "Authorization: Bearer $DODO_PAYMENTS_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "product_cart": [{ "product_id": "pdt_123", "quantity": 1 }],
    "feature_flags": { "single_page": true },
    "return_url": "https://yoursite.com/checkout/success"
  }'

​

Payment Links

https://checkout.dodopayments.com/buy/pdt_123?singlePage=true

​

Overlay and Inline Checkout

​

Payment Method Layout

• Accordion (default): one row for each payment method. The selected row opens to show its fields and the Pay Now button.
• Tabs: one tab for each payment method. The fields of the selected tab show below the tabs.

const session = await client.checkoutSessions.create({
  product_cart: [{ product_id: 'pdt_123', quantity: 1 }],
  feature_flags: { single_page: true },
  customization: { payment_method_layout: 'tabs' },
  return_url: 'https://yoursite.com/checkout/success'
});

​

Apple Pay and Google Pay

• You set require_phone_number.
• You set require_tax_id.
• The session has a required custom field.

​

Wallet Totals

• Apple Pay at the top of the page prices the sheet for the country of the card’s billing address before the customer approves. The sheet keeps the currency it opened with. For example, a $100 product on a US page, paid with a card billed in India, shows $118 USD with India’s GST.
• When Apple shares no billing address, or the postal code is too short to set the tax rate, the Apple Pay sheet shows the tax as pending. The customer then pays the exact tax for their full billing address.
• If the card’s country needs another currency, for example for a country-specific price, the Apple Pay sheet shows “Please use a card billed in” followed by the page’s country. The customer picks another card.
• Apple Pay and Google Pay in the payment method list charge the total on the page, for the address the customer entered. The card’s billing address does not change the total.
• Google Pay at the top of the page shares the card’s billing address only after the customer approves. If that address changes the total, the payment stops before any charge, and the page shows the new total. The customer pays again with the new total.

​

Address Collection

const session = await client.checkoutSessions.create({
  product_cart: [{ product_id: 'pdt_123', quantity: 1 }],
  feature_flags: { single_page: true },
  minimal_address: false,
  return_url: 'https://yoursite.com/checkout/success'
});

​

Business Purchases and Tax ID

​

Subscriptions

​

Mobile and Dark Mode

​

Embedded Checkout Events

​

After Payment

​

FAQ