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.

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

• Yuno API keys (Authentication)
• @yuno-payments/sdk-web installed (SDK Overview)
• At least one payment method enabled in your Dashboard

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.

   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

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

• You need full UI control (use Secure Fields)
• You want to display specific methods only (use Lite Checkout)