Web Styling

This page documents a legacy SDK. The new Yuno SDK (Web v2.x, iOS v3.x, Android v3.x) replaces the Full, Lite, Seamless, Render, Headless, and Secure Fields SDKs with one API across every platform. See the Yuno SDK documentation. Legacy SDKs remain supported side by side during the transition and are scheduled for deprecation in 2027. Contact your Account Manager for migration planning.

The Yuno Web SDK offers several configuration options to modify its visual presentation and functional flow. You can control everything from display modes (Modal vs. Element) to fine-grained CSS injection for card forms.

For a complete list of all initialization parameters and their possible values, visit the Web SDK Reference.

Display Modes

The renderMode parameter determines how the payment forms are presented to your customers. You can choose between a popup modal or embedding the SDK directly into an HTML element on your page.

Mode	Description
`modal`	Displays the payment flow in an overlay centered on the screen. Default mode.
`element`	Renders the SDK inside a specific container in your app. Requires `elementSelector`.

Example: Embedding as an Element

If you choose element, you must provide a selector for the container. This is where the APM form and the Action form (for example, PIX QR code) will be mounted.

yuno.startCheckout({
  renderMode: {
    type: 'element',
    elementSelector: {
      apmForm: "#form-element",
      actionForm: "#action-form-element"
    } 
  },
})

Card Form Customization

The card configuration object allows you to modify the look and feel of the sensitive card data fields (Card Number, Expiry, CVV). These fields are rendered inside a secure iframe for PCI compliance.

CSS Injection

Use the styles property to inject custom CSS directly into the card form iframe. This lets you match the SDK to your site’s aesthetic.

yuno.startCheckout({
  card: {
    // Inject a raw CSS string to style inputs and buttons inside the iframe
    styles: `
      .Yuno-input {
        border-radius: 8px;
        border: 1px solid #E0E0E0;
        padding: 12px;
      }
      .Yuno-label {
        font-family: 'Inter', sans-serif;
        color: #333333;
      }
    `,
    cardSaveEnable: true, // Shows the "Save card for future payments" checkbox
  },
})

Custom Labels and Texts

You can override the default placeholder and button labels to better fit your app’s tone or language requirements.

yuno.startCheckout({
  card: {
    texts: {
      cardPlaceholder: "0000 0000 0000 0000",
      cvvPlaceholder: "CVC",
      expirationDatePlaceholder: "MM/YY",
      submitButton: "Authorize Payment"
    }
  },
})

General UI Controls

Modify general SDK behaviors such as loaders, issuer forms, and button visibility.

SDK Loader Control

By default, Yuno shows a loading spinner during transitions. You can hide it if you prefer to use your own app’s loading state.

yuno.startCheckout({
  showLoading: true, // Set to false to hide the Yuno loading spinner
})

Pay Button Visibility

In scenarios where you want to trigger the payment precisely from your own UI logic, you can hide the SDK’s built-in “Pay” button.

If you hide the Pay button, you must call yuno.submitOneTimeTokenForm() programmatically to proceed with the payment.

yuno.startCheckout({
  showPayButton: false, // Hides the main payment submission button
})

// Triggering the submission from your own code
document.getElementById('my-custom-submit').addEventListener('click', () => {
  yuno.submitOneTimeTokenForm();
});

Advanced Flow Management

Performance and Retries

If a transaction fails, you can update the session without unmounting the form, ensuring a smoother user experience for retries.

Parameter	Purpose
`automaticallyUnmount`	Set to `false` to keep the card form mounted after a token is created, allowing for easy retries.
`updateCheckoutSession`	Method to inject a new checkout session without unmounting the SDK. Use it to switch payment methods after a failure. See updateCheckoutSession for details.

yuno.startCheckout({
  automaticallyUnmount: false, // Prevents the form from closing after token creation
});

// On rejection, notify the SDK and update the session
yuno.notifyError();
yuno.updateCheckoutSession(newCheckoutSession);

WebView Considerations (Mercado Pago)

If you are integrating in a WebView environment and using Mercado Pago Checkout Pro, you must handle the redirect results returned by continuePayment().

const result = await yuno.continuePayment();

if (result && result.action === 'REDIRECT_URL') {
   // Redirect the customer manually using result.redirect.init_url
   window.location.assign(result.redirect.init_url);
}

Overview

Seamless SDK

Lite SDK

Headless SDK

Card Enrollment

Additional Features

Resources

Additional Platforms

Web Frameworks

External Native Modules

Display Modes

Example: Embedding as an Element

Card Form Customization

CSS Injection

Custom Labels and Texts

General UI Controls

SDK Loader Control

Pay Button Visibility

Advanced Flow Management

Performance and Retries

WebView Considerations (Mercado Pago)

​Display Modes

​Example: Embedding as an Element

​Card Form Customization

​CSS Injection

​Custom Labels and Texts

​General UI Controls

​SDK Loader Control

​Pay Button Visibility

​Advanced Flow Management

​Performance and Retries

​WebView Considerations (Mercado Pago)

Display Modes

Example: Embedding as an Element

Card Form Customization

CSS Injection

Custom Labels and Texts

General UI Controls

SDK Loader Control

Pay Button Visibility

Advanced Flow Management

Performance and Retries

WebView Considerations (Mercado Pago)