Skip to main content

​
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.
Full Checkout is the fastest integration path. Yuno manages the UI, PCI compliance, and payment method rendering automatically.
Using React or Vue? Check out the React Components or Vue Components for framework-specific wrappers.

​
Prerequisites

​
Integration Flow

1

Create a checkout session (server-side)

Create a session with workflow: "SDK_CHECKOUT":
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();
2

Initialize the SDK (client-side)

Pass your public API key as a string argument:
const yuno = Yuno.initialize('your-public-api-key');
The first argument must be a string (your public API key), not a configuration object. Passing an object will cause an error.
3

Configure and mount the checkout

Call startCheckout() to configure the checkout, then mountCheckout() to render the UI:
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();

<div id="yuno-checkout"></div>
4

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.
CallbackTrigger
yunoCreatePayment(Required) Customer submits payment. Provides oneTimeToken for server-side payment creation
yunoErrorSDK encounters an error
yunoPaymentMethodSelectedCustomer selects a payment method

​
Customization

Full Checkout appearance can be customized via the Checkout Builder in the Dashboard or through SDK theming options. See Customization for details.

​
When to Use Full Checkout

Best for

  • Rapid integration
  • Displaying all payment methods
  • Minimal frontend effort

Consider alternatives if