> ## Documentation Index
> Fetch the complete documentation index at: https://yn-c9bb3266.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Full Checkout

> Render a complete pre-built payment form with all available payment methods

## Overview

Full Checkout provides a complete, pre-built payment UI that displays all payment methods enabled for your merchant account. Yuno handles the entire checkout experience, including payment method selection, form rendering, and 3DS authentication.

<a href="/diagrams/sequence-flows/standard-checkout-flow.html" target="_blank" style={{ display: 'block', cursor: 'zoom-in', textDecoration: 'none' }}>
  <div style={{ position: 'relative', width: '100%', paddingBottom: '56.75%', overflow: 'hidden', borderRadius: '12px', boxShadow: '0 4px 24px rgba(0,0,0,0.08)' }}>
    <iframe src="/diagrams/sequence-flows/standard-checkout-flow.html" style={{ position: 'absolute', top: 0, left: 0, width: '1540px', height: '874px', border: 'none', transform: 'scale(0.455)', transformOrigin: 'top left' }} loading="lazy" />
  </div>
</a>

<Note>
  Full Checkout is the fastest integration path. Yuno manages the UI, PCI compliance, and payment method rendering automatically.
</Note>

<Tip>
  **Using React or Vue?** Check out the [React Components](/guides/sdk/react-components) or [Vue Components](/guides/sdk/vue-components) for framework-specific wrappers.
</Tip>

## Prerequisites

* Yuno API keys ([Authentication](/getting-started/authentication))
* `@yuno-payments/sdk-web` installed ([SDK Overview](/guides/sdk/overview))
* At least one payment method enabled in your [Dashboard](/platform/dashboard/connections)

## Integration Flow

<Steps>
  <Step title="Create a checkout session (server-side)">
    Create a session with `workflow: "SDK_CHECKOUT"`:

    ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}}
    const sessionResponse = await fetch('https://api-sandbox.y.uno/v1/checkout/sessions', {
      method: 'POST',
      headers: {
        'public-api-key': process.env.YUNO_PUBLIC_KEY,
        'private-secret-key': process.env.YUNO_PRIVATE_KEY,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        amount: { currency: 'USD', value: 50.00 },
        country: 'CO',
        merchant_order_id: 'order-123',
        workflow: 'SDK_CHECKOUT',
        account_id: process.env.YUNO_ACCOUNT_CODE,
        payment_description: 'Order 123 payment',
      }),
    });
    const session = await sessionResponse.json();
    ```
  </Step>

  <Step title="Initialize the SDK (client-side)">
    Pass your public API key as a string argument:

    ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}}
    const yuno = Yuno.initialize('your-public-api-key');
    ```

    <Warning>
      The first argument must be a string (your public API key), not a configuration object. Passing an object will cause an error.
    </Warning>
  </Step>

  <Step title="Configure and mount the checkout">
    Call `startCheckout()` to configure the checkout, then `mountCheckout()` to render the UI:

    ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}}
    yuno.startCheckout({
      checkoutSession: session.checkout_session,
      countryCode: 'CO',
      language: 'en',
      elementSelector: '#yuno-checkout',
      yunoCreatePayment: async (oneTimeToken, tokenWithInfo) => {
        // Create the payment on your server using the one-time token
        const response = await fetch('/api/create-payment', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            token: oneTimeToken,
            checkout_session: session.checkout_session,
          }),
        });
        const payment = await response.json();
        // Continue the flow (handles 3DS, async methods, etc.)
        yuno.continuePayment();
      },
      yunoError: (error) => {
        console.error('Payment error:', error);
      },
    });

    // Render the checkout UI
    yuno.mountCheckout();
    ```

    ```html theme={"theme":{"light":"github-dark","dark":"github-dark"}}
    <div id="yuno-checkout"></div>
    ```
  </Step>

  <Step title="Handle payment callbacks">
    The `yunoCreatePayment` callback is required. It fires when the customer submits payment and provides a one-time token for server-side payment creation.

    | Callback                    | Trigger                                                                                           |
    | --------------------------- | ------------------------------------------------------------------------------------------------- |
    | `yunoCreatePayment`         | **(Required)** Customer submits payment. Provides `oneTimeToken` for server-side payment creation |
    | `yunoError`                 | SDK encounters an error                                                                           |
    | `yunoPaymentMethodSelected` | Customer selects a payment method                                                                 |

    <Snippet file="verify-server-side.mdx" />
  </Step>
</Steps>

## Customization

Full Checkout appearance can be customized via the [Checkout Builder](/platform/dashboard/checkout-builder) in the Dashboard or through SDK theming options. See [Customization](/guides/sdk/customization) for details.

## When to Use Full Checkout

<div className="mdx-card-tiles">
  <CardGroup cols={2}>
    <Card title="Best for" icon="check">
      * Rapid integration
      * Displaying all payment methods
      * Minimal frontend effort
    </Card>

    <Card title="Consider alternatives if" icon="xmark">
      * You need full UI control (use [Secure Fields](/guides/sdk/secure-fields))
      * You want to display specific methods only (use [Lite Checkout](/guides/sdk/lite-checkout))
    </Card>
  </CardGroup>
</div>