Yuno SDK Web

https://github.com/yuno-payments/yuno-sdk-web
Admin
Yuno SDK Web is a demo application showcasing Yuno's Web SDK integration across multiple frontend...
Tokens:64,917
Snippets:512
Trust Score:5.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start Demo App

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Commands to clone the repository, install dependencies, and start the local development server.

```sh
> git clone https://github.com/yuno-payments/yuno-sdk-web.git
> cd yuno-sdk-web
> npm install
> npm start
```

--------------------------------

### Run the proxy server

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/white-label-proxy-server/CLAUDE.md

Commands to initialize the environment, install dependencies, and start the proxy server.

```bash
cp .env.example .env
npm install
npm start    # → http://localhost:9090
```

--------------------------------

### Initialize with white-label proxy configuration

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments.md

Example of initializing the SDK with custom API and asset URLs for white-label proxy setups.

```javascript
const WHITELABEL_BASE = 'http://localhost:9090/hosted-payment-methods/hosted-payment-form/orchestrator'
const options = { apiUrl: WHITELABEL_BASE, assetUrl: WHITELABEL_BASE + '/v1.0' }
const yuno = await SdkPayments.initialize(publicApiKey, undefined, options)
```

--------------------------------

### Run Yuno SDK Web demo and sub-projects

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/overview.md

Commands to install dependencies and start the development servers for the root project and various sub-projects.

```bash
# Root demo server (port 8080)
npm install
cp .env.example .env   # ACCOUNT_CODE, PUBLIC_API_KEY, PRIVATE_SECRET_KEY
npm run start:dev

# Sub-projects
cd yuno-react && npm run dev
cd yuno-vue && npm run dev
cd yuno-angular && npm start
cd yuno-vtex-webview/HeadlessVTEXWeb && npm run dev
cd white-label-proxy-server && cp .env.example .env && npm install && npm start  # :9090
```

--------------------------------

### Configure and start checkout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Start the checkout process by providing a configuration object, including session details, UI preferences, and event handlers.

```javascript
await yuno.startCheckout({
  /**
   * Refers to the current payment's checkout session.
   * @example `438413b7-4921-41e4-b8f3-28a5a0141638`
   * @type {String}
   */
  checkoutSession,
  /**
   * Element where the SDK will be mount on 
   */ 
  elementSelector: '#root', 
  /**
   * This parameter determines the country for which the payment process is being configured.
   * The complete list of supported countries and their country code is available on the
   * {@link https://docs.y.uno/docs/country-coverage-yuno-sdk | Country coverage} page.
   * @type {String}
   */
  countryCode: country,
  /**
  * Language can be one of es, en, pt
  * Default is browser language
  */
  language: 'es',
  /**
   * Hide or show the Yuno loading/spinner page
   * @default true
   * @optional
   */
  showLoading: true,
  /**
   * Enable the issuers form (bank list)
   * @default true
   * @optional
   */
  issuersFormEnable: true,
  /**
   * Hide or show the Yuno Payment Status page
   * @default true
   * @optional
   */
  showPaymentStatus: true,
  /**
   * Hide or show the customer or card form pay button
   * @default true
   * @optional
   */
  showPayButton: true,
  /**
   * Required if you'd like to be informed if there is a server call
   * @param { isLoading: boolean, type: 'DOCUMENT' | 'ONE_TIME_TOKEN'  } data
   * @optional
   */
  onLoading: (args) => {
    console.log(args);
  }
  /**
   * Where and how the forms will be shown
   * @default { type: 'modal' }
   * @optional
   */
  renderMode: {
    /**
     * Type can be one of `modal` or `element`
     * @default 'modal'
     * @optional
     */
    type: 'modal',
    /**
     * Element where the form will be rendered.
     * Can be a string (deprecated) or an object with the following structure:
     * 
     * {
     *   apmForm: "#form-element",
     *   actionForm: "#action-form-element"
     * }
     * 
     * Only needed if type is `element`.
     * 
     * @optional
     */
    elementSelector: {
      apmForm: "#form-element",
      actionForm: "#action-form-element"
    } // or use a string (deprecated): '#form-element',
  }
  /**
   * Card API
   * @optional
   */
  card: {
    /**
     * Card render mode can be either `step` or `extends`
     * @default 'extends' 
     * @optional
     */
    type: "extends",
    /**
     * You can edit card form styles
     * Only you should write css, then it will be injected into the iframe
     * Example 
     * `@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
     *  .Yuno-front-side-card__name-label { 
     *    color: red !important;
     *    font-family: 'Luckiest Guy' !important;
     *   }`
     * @optional
     */
    styles: '',
    /** 
     * Show checkbox for save/enroll card 
     * @default false
     * @optional
     */
    cardSaveEnable: false,
    /**
     * Custom texts in Card forms buttons
     * @example
     *  texts: {
     *    cardForm?: {
     *      enrollmentSubmitButton?: string;
     *       paymentSubmitButton?: string;
     *     }
     *     cardStepper?: {
     *       numberCardStep?: {
     *         nextButton?: string;
     *       },
     *       cardHolderNameStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       expirationDateStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       cvvStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       }
     *     }
     *  }
     * @optional
     */
    texts: {}
  },
  /**
   * Custom texts in payment forms buttons 
     * @exmaple
     *  texts: {
     *    customerForm?: {
     *       submitButton?: string;
     *     }
     *     paymentOtp?: {
     *       sendOtpButton?: string;
     *     }
     *   }
     * @optional
     */
  texts: {},
  /**
   * Empty function.  Won't be called, but should be implemented
   */
  async createPayment() {},
  /**
   * Callback is called when user selects a payment method
   * @param { {type: 'BANCOLOMBIA_TRANSFER' | 'PIX' | 'ADDI' | 'NU_PAY', name: string} } data 
   * @optional
   */
  paymentMethodSelected(data) {
    console.log('onPaymentMethodSelected', data)
  },
  /**
   * After the payment is done, this function will be called with the payment status 
   * @param {'READY_TO_PAY' | 'CREATED' | 'SUCCEEDED' | 'REJECTED' | 'CANCELLED' | 'ERROR' | 'DECLINED' | 'PENDING' | 'EXPIRED' | 'VERIFIED' | 'REFUNDED'} data
   * @optional
   */
  paymentResult(data) {
    console.log('paymentResult', data)
    /**
```

--------------------------------

### Initialize Proxy Server

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/white-label-proxy-server/README.md

Commands to prepare the environment and start the proxy server.

```bash
cp .env.example .env       # then edit upstream URLs if needed
npm install
npm start                  # listens on :9090
```

--------------------------------

### Start Root Backend Server

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/white-label-proxy-server/README.md

Command to start the root server required for handling /v1/* and /v2/* calls when using the default backend.

```bash
cd .. && npm run start:dev
```

--------------------------------

### yuno.startCheckout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments.md

Starts the checkout process within a specified DOM element.

```APIDOC
## yuno.startCheckout

### Description
Initiates the checkout flow using the provided session and configuration.

### Signature
`yuno.startCheckout(options: object)`

### Parameters
- **options** (object) - Required - Configuration object containing:
  - **checkoutSession** (string) - Required - The session identifier.
  - **elementSelector** (string) - Required - CSS selector for the mounting element.
  - **countryCode** (string) - Required - ISO country code.
  - **language** (string) - Required - Language code.
  - **error** (function) - Optional - Callback function for handling SDK errors.
```

--------------------------------

### Development Commands

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/CLAUDE.md

Provides commands to start the root server and individual sub-projects for development.

```bash
# Root server
npm run start:dev

```

```bash
# Sub-projects (run from their directory)
cd yuno-angular && npm start
cd yuno-react && npm run dev
cd yuno-vue && npm run dev
cd yuno-vtex-webview/HeadlessVTEXWeb && npm run dev

```

--------------------------------

### yunoInstance.startCheckout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Configures and starts the checkout process within the specified DOM element.

```APIDOC
## yunoInstance.startCheckout(config)

### Description
Configures the checkout session, including callbacks for payment creation and result handling.

### Parameters
- **config** (object) - Required - Configuration object containing checkoutSession, elementSelector, countryCode, language, and event callbacks (yunoCreatePayment, yunoPaymentResult, yunoError).
```

--------------------------------

### Example usage of Yuno.initialize

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Initialize the SDK using the public API key and the optional configuration object.

```javascript
const publicApiKey = 'your-public-api-key';
// Recommended: omit applicationSession or set to undefined
const yuno = await Yuno.initialize(publicApiKey, undefined, options);
```

--------------------------------

### startCheckout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Starts the full checkout session configuration. This method must be called before any mount call.

```APIDOC
## startCheckout(args: StartCheckoutArgs)

### Description
Starts the full checkout session configuration. Must be called before any mount* call.

### Parameters
- **args** (StartCheckoutArgs) - Required - Configuration object including elementSelector, checkoutSession, language, countryCode, renderMode, and various callbacks.

### Returns
- **Promise<void>**
```

--------------------------------

### Initialize SDK with TypeScript

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Example of importing and using the SdkPaymentsInstance type when initializing the SDK.

```javascript
import { SdkPaymentsInstance } from '@yuno-payments/sdk-web-types'

const yunoInstance: SdkPaymentsInstance = await SdkPayments.initialize('publicApiKey')
```

--------------------------------

### yuno.startCheckout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Starts the checkout process with the provided configuration, including session details, UI preferences, and event handlers.

```APIDOC
## yuno.startCheckout

### Description
Configures and mounts the checkout interface into the specified DOM element.

### Parameters
- **checkoutSession** (String) - Required - The unique identifier for the current payment session.
- **elementSelector** (String) - Required - The CSS selector for the element where the SDK will be mounted.
- **countryCode** (String) - Required - The country code for the payment configuration.
- **language** (String) - Optional - Language for the UI (es, en, pt). Defaults to browser language.
- **showLoading** (Boolean) - Optional - Whether to show the loading spinner. Defaults to true.
- **issuersFormEnable** (Boolean) - Optional - Whether to enable the bank list form. Defaults to true.
- **showPaymentStatus** (Boolean) - Optional - Whether to show the payment status page. Defaults to true.
- **showPayButton** (Boolean) - Optional - Whether to show the pay button. Defaults to true.
- **onLoading** (Function) - Optional - Callback triggered during server calls.
- **renderMode** (Object) - Optional - Configuration for how forms are displayed (modal or element).
- **card** (Object) - Optional - Configuration for card payment forms and styles.
- **texts** (Object) - Optional - Custom labels for payment form buttons.
- **createPayment** (Function) - Required - Implementation for payment creation.
- **paymentMethodSelected** (Function) - Optional - Callback triggered when a payment method is selected.
- **paymentResult** (Function) - Optional - Callback triggered after payment completion with the status.
```

--------------------------------

### Install Type Definitions

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Command to install the TypeScript type definitions package via npm.

```sh
npm install @yuno-payments/sdk-web-types
```

--------------------------------

### POST /customers/sessions/:customerSession/payment-methods

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/endpoints.md

Starts an enrollment for a specific customer session.

```APIDOC
## POST /customers/sessions/:customerSession/payment-methods?paymentMethodType=NEQUI&country=CO

### Description
Starts an enrollment for a customer session. Proxies to POST {API_URL}/v1/customers/sessions/{customerSession}/payment-methods.

### Method
POST

### Endpoint
/customers/sessions/:customerSession/payment-methods
```

--------------------------------

### Initialize SecureFields

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/secure-fields.md

Example of initializing the SecureFields instance using the yuno.secureFields method.

```javascript
const secureFields = await yuno.secureFields({
  countryCode,
  checkoutSession,
  installmentEnable: false,
})
```

--------------------------------

### startPayment()

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Starts the payment flow after the user has selected a payment method.

```APIDOC
## startPayment()

### Description
Starts the payment flow. Use this method when you want to control the exact moment of payment execution.
```

--------------------------------

### Updated Full Checkout Implementation

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Example showing the full checkout flow updated to use await for initialization, startCheckout, and startPayment.

```javascript
async function initCheckout() {
  // Get API key
  const publicApiKey = await getPublicApiKey()

  // Initialize SDK - now with await
  const yuno = await Yuno.initialize(publicApiKey)
  
  // Start checkout - now with await
  await await yuno.startCheckout({
    checkoutSession,
    elementSelector: '#root',
    countryCode: 'CO',
    language: 'es',
    // Other configuration options...
    
    async yunoCreatePayment(oneTimeToken, tokenWithInformation) {
      await createPayment({ oneTimeToken, checkoutSession })
      const action = await yuno.continuePayment({ showPaymentStatus: true })
      
      if (action?.action === 'REDIRECT_URL') {
        // Handle redirect
      }
    },
    
    yunoPaymentResult(data) {
      console.log('yunoPaymentResult', data)
      yuno.hideLoader()
    },
    
    yunoError: (error, data) => {
      console.log('There was an error', error)
      yuno.hideLoader()
    },
  })
  
  // Mount checkout - now with await
  await yuno.mountCheckout()
}

// Start payment when user clicks on merchant payment button
const PayButton = document.querySelector('#button-pay')

PayButton.addEventListener('click', async () => {
  // Now with await
  await yuno.startPayment()
})
```

--------------------------------

### yuno.startSeamlessCheckout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Starts the seamless checkout process by rendering the payment interface within the specified element.

```APIDOC
## yuno.startSeamlessCheckout

### Description
Configures and renders the seamless checkout interface.

### Parameters
- **checkoutSession** (String) - Required - The current payment's checkout session ID.
- **elementSelector** (String) - Required - The DOM element selector where the SDK will be mounted.
- **countryCode** (String) - Required - The country code for the payment process.
- **language** (String) - Optional - Language for the UI (es, en, pt). Defaults to browser language.
- **showLoading** (Boolean) - Optional - Show or hide the loading spinner. Default: true.
- **issuersFormEnable** (Boolean) - Optional - Enable the bank list form. Default: true.
- **showPaymentStatus** (Boolean) - Optional - Show or hide the payment status page. Default: true.
- **showPayButton** (Boolean) - Optional - Show or hide the pay button. Default: true.
- **onLoading** (Function) - Optional - Callback triggered on server calls.
- **renderMode** (Object) - Optional - Configuration for how forms are displayed (modal or element).
- **card** (Object) - Optional - Configuration for card payment forms.
```

--------------------------------

### Start Payment Flow

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Starts the payment flow after a user selects a payment method, typically triggered by a custom pay button.

```javascript
const PayButton = document.querySelector('#button-pay')
PayButton.addEventListener('click', () => yuno.startPayment())
```

--------------------------------

### Configure InitializationOptions cookies

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments.md

Example of defining custom cookie names for device identification within the initialization options.

```javascript
const options = {
  cookies: {
    deviceId: {
      name: "cookieName" // the name of the cookie used for device identification
    }
  }
}
```

--------------------------------

### Implementing the createPayment callback

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/errors.md

The createPayment callback is required in startCheckout configurations. This example demonstrates catching upstream payment errors and managing SDK actions or status mounting.

```javascript
createPayment: async (oneTimeToken) => {
  try {
    const response = await createPayment({ oneTimeToken, checkoutSession })
    if (response.checkout.sdk_action_required) {
      await yunoInstance.continuePayment()
    } else {
      yunoInstance.mountStatusPayment({ ... })
    }
  } catch (error) {
    console.log('There was an error', error)
  } finally {
    yunoInstance.hideLoader()
  }
},
```

--------------------------------

### Start Checkout Session

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Initializes the full checkout session configuration. This must be called before any mount method.

```javascript
const yuno = await SdkPayments.initialize(publicApiKey)
await yuno.startCheckout({
  checkoutSession,
  elementSelector: '#root',
  countryCode,
  language: 'es',
  showLoading: true,
  renderMode: { type: 'modal', elementSelector: { apmForm: '#form-element', actionForm: '#action-form-element' } },
  card: { type: 'extends', styles: '' },
  async createPayment(oneTimeToken, tokenWithInformation) {
    await createPayment({ oneTimeToken, checkoutSession })
    const action = await yuno.continuePayment({ showPaymentStatus: true })
    if (action?.action === 'REDIRECT_URL') { /* handle provider redirect */ }
  },
  paymentResult(data) { yuno.hideLoader() },
  error: (error, data) => { yuno.hideLoader() },
})
```

--------------------------------

### Basic initialization of SdkPayments

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments.md

Initializes the SDK using a public API key and starts the checkout process within a specified DOM element.

```javascript
async function initCheckout() {
  const publicApiKey = await getPublicApiKey()          // e.g. from POST /public-api-key
  const yuno = await SdkPayments.initialize(publicApiKey)
  await yuno.startCheckout({
    checkoutSession,
    elementSelector: '#root',
    countryCode: 'CO',
    language: 'es',
    // ...
  })
  await yuno.mountCheckout()
}
```

--------------------------------

### Start Seamless Checkout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Configures the seamless checkout flow, which is used before mounting seamless components.

```javascript
await yuno.startSeamlessCheckout({
  checkoutSession, elementSelector: '#root', countryCode, language: 'es',
  renderMode: { type: 'element', elementSelector: { apmForm: '#form-element', actionForm: '#action-form-element' } },
  async createPayment() {},
  paymentResult(data) { yuno.hideLoader() },
  onLoading: (args) => console.log(args),
})
```

--------------------------------

### Updated Secure Fields Implementation

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Example showing secure fields initialization and token generation using the updated asynchronous API.

```javascript
async function initSecureFields() {
  // Get API key
  const publicApiKey = await getPublicApiKey()
  
  // Initialize SDK - now with await
  const yuno = await Yuno.initialize(publicApiKey)
  
  // Create secure fields - now with await
  const secureFields = await yuno.secureFields({
    countryCode,
    checkoutSession,
    installmentEnable: false
  })
  
  // Create and render secure fields
  const secureNumber = secureFields.create({
    name: 'pan',
    options: {
      // Configuration options...
    }
  })
  
  secureNumber.render('#pan')
  
  // Generate token - already returned a Promise in v1
  const oneTimeToken = await secureFields.generateToken({
    cardHolderName: 'John Deer',
    saveCard: true,
    // Other options...
  })
  
  // Create payment
  await createPayment({ oneTimeToken, checkoutSession })
}
```

--------------------------------

### Render SecureField Instance

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/secure-field.md

Example of creating a PAN field and rendering it into a DOM element.

```javascript
const secureNumber = secureFields.create({ name: 'pan', options: { placeholder: '0000 0000 0000 0000', label: 'Card Number', showError: true } })
secureNumber.render('#pan')
```

--------------------------------

### Handle Token Generation Errors

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/secure-field.md

Example of using try/catch to handle errors during token generation.

```javascript
try {
  const oneTimeToken = await secureFields.generateToken({ cardHolderName: 'John Deer' })
  console.log(oneTimeToken)
} catch (error) {
  console.error('Token generation failed', error)
  // restore the button, show the field error, etc.
}
```

--------------------------------

### TypeScript SDK Type Usage

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/npm-loader.md

Example of importing and using the SdkPaymentsInstance type for type safety.

```typescript
import { SdkPaymentsInstance } from '@yuno-payments/sdk-web-types'
const yunoInstance: SdkPaymentsInstance = await SdkPayments.initialize('publicApiKey')
```

--------------------------------

### Trigger Payment on Button Click

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Example of binding the payment initiation to a merchant-defined button click event.

```javascript
// Start payment when user clicks on merchant payment button
const PayButton = document.querySelector('#button-pay')

PayButton.addEventListener('click', () => {
  yuno.startPayment()
})
```

--------------------------------

### Configure Checkout Session

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Start the checkout process by providing a configuration object with session details, country code, and callbacks.

```javascript
await yuno.startCheckout({
  /**
   * Refers to the current payment's checkout session.
   * @example `438413b7-4921-41e4-b8f3-28a5a0141638`
   * @type {String}
   */
  checkoutSession,
  /**
   * Element where the SDK will be mount on 
   */ 
  elementSelector: '#root', 
  /**
   * This parameter determines the country for which the payment process is being configured.
   * The complete list of supported countries and their country code is available on the
   * {@link https://docs.y.uno/docs/country-coverage-yuno-sdk | Country coverage} page.
   * @type {String}
   */
  countryCode: country,
  /**
  * Language can be one of es, en, pt
  * Default is browser language
  */
  language: 'es',
  /**
   * Hide or show the Yuno loading/spinner page
   * @default true
   * @optional
   */
  showLoading: true,
  /**
   * Enable the issuers form (bank list)
   * @default true
   * @optional
   */
  issuersFormEnable: true,
  /**
   * Hide or show the Yuno Payment Status page
   * @default true
   * @optional
   */
  showPaymentStatus: true,
  /**
   * Hide or show the customer or card form pay button
   * @default true
   * @optional
   */
  showPayButton: true,
  /**
   * Required if you'd like to be informed if there is a server call
   * @param { isLoading: boolean, type: 'DOCUMENT' | 'ONE_TIME_TOKEN'  } data
   * @optional
   */
  onLoading: (args) => {
    console.log(args);
  }
  /**
   * Where and how the forms will be shown
   * @default { type: 'modal' }
   * @optional
   */
  renderMode: {
    /**
     * Type can be one of `modal` or `element`
     * @default 'modal'
     * @optional
     */
    type: 'modal',
    /**
     * Element where the form will be rendered.
     * Can be a string (deprecated) or an object with the following structure:
     * 
     * {
     *   apmForm: "#form-element",
     *   actionForm: "#action-form-element"
     * }
     * 
     * Only needed if type is `element`.
     * 
     * @optional
     */
    elementSelector: {
      apmForm: "#form-element",
      actionForm: "#action-form-element"
    } // or use a string (deprecated): '#form-element',
  }
  /**
   * Card API
   * @optional
   */
  card: {
    /**
     * Card render mode can be either `step` or `extends`
     * @default 'extends' 
     * @optional
     */
    type: "extends",
    /**
     * You can edit card form styles
     * Only you should write css, then it will be injected into the iframe
     * Example 
     * `@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
     *  .Yuno-front-side-card__name-label { 
     *    color: red !important;
     *    font-family: 'Luckiest Guy' !important;
     *   }`
     * @optional
     */
    styles: '',
    /** 
     * Show checkbox for save/enroll card 
     * @default false
     * @optional
     */
    cardSaveEnable: false,
    /**
     * Custom texts in Card forms buttons
     * @example
     *  texts: {
     *    cardForm?: {
     *      enrollmentSubmitButton?: string;
     *       paymentSubmitButton?: string;
     *     }
     *     cardStepper?: {
     *       numberCardStep?: {
     *         nextButton?: string;
     *       },
     *       cardHolderNameStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       expirationDateStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       cvvStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       }
     *     }
     *  }
     * @optional
     */
    texts: {}
  },
  /**
   * Custom texts in payment forms buttons 
   * @exmaple
   *  texts: {
   *    customerForm?: {
   *       submitButton?: string;
   *     }
   *     paymentOtp?: {
   *       sendOtpButton?: string;
   *     }
   *   }
   * @optional
   */
  texts: {},
  /**
   * Callback, is called when the One Time Token is created,
   * Merchant should create payment back to back
   * @param { oneTimeToken: string, tokenWithInformation: object } data 
   */
  async createPayment(oneTimeToken, tokenWithInformation) {
    /**
     * Merchant's function to call its backend to create 
     * the payment into Yuno.
     * {@link https://docs.y.uno/reference/create-payment}
     */
    await createPayment({ oneTimeToken, checkoutSession })
    /**
     * Call only if the SDK needs to continue the payment flow
     * @param {{ showPaymentStatus: boolean }}
     */
    yuno.continuePayment({ showPaymentStatus: true })
  },
  /**
   * Callback is called when user selects a payment method
```

--------------------------------

### Angular SDK Initialization in ngOnInit

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/npm-loader.md

Initializes the SDK and starts the checkout process within an Angular component lifecycle hook.

```typescript
import { loadScript } from '@yuno-payments/sdk-web';
import { SdkPaymentsInstance } from '@yuno-payments/sdk-web-types';

async ngOnInit() {
  const yuno = await loadScript();
  this.yunoInstance = (await yuno.initialize(PUBLIC_API_KEY)) as YunoInstanceWithCanary;
  if (this.canaryMode) {
    this.yunoInstance.setCanaryMode(true);
  }
  await this.yunoInstance.startCheckout({
    checkoutSession: CHECKOUT_SESSION,
    countryCode: 'CO',
    language: 'es',
    elementSelector: '#sdk-root',
    createPayment: (oneTimeToken, tokenWithInformation) => {
      console.log('tokenWithInformation', tokenWithInformation);
      console.log('oneTimeToken', oneTimeToken);
    },
  });
  this.yunoInstance.mountCheckout();
}
```

--------------------------------

### Mount Full Checkout UI

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Mounts the full checkout UI into the specified element selector after starting the checkout session.

```javascript
await yuno.startCheckout({ checkoutSession, elementSelector: '#root', countryCode, language: 'es' })
await yuno.mountCheckout()
```

--------------------------------

### Create Secure Fields Configuration

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Create a configuration object for secure fields, specifying the country code, checkout session, and installment settings.

```javascript
  const secureFields = await yuno.secureFields({
    /**
     * This parameter determines the country for which the payment process is being configured.
     * The complete list of supported countries and their country code is available on the
     * {@link https://docs.y.uno/docs/country-coverage-yuno-sdk | Country coverage} page.
     * @type {String}
     */
    countryCode,
    /**
     * Should be added here or in the token generation
     * @optional
     */
    checkoutSession,
    /**
     * disabled or enable the functionality of the installment
     * @default false
     */
    installmentEnable: false
  })
```

--------------------------------

### Define Installment Type

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/types.md

Defines the structure for installment plan data, including the ID, number, and currency-specific amount details.

```typescript
type Installment = {
  installmentId: string;
  installment: number;
  amount: { currency: string; value: string; total_value: string };
};
```

--------------------------------

### Initialize Yuno SDK with options

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

The Yuno.initialize function signature now supports an optional third parameter for advanced configuration.

```javascript
const yuno = await Yuno.initialize(publicApiKey, applicationSession, options)
```

--------------------------------

### GET /sdk-web/healthy

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/endpoints.md

Performs a health check on the SDK web service.

```APIDOC
## GET /sdk-web/healthy

### Description
Performs a health check on the SDK web service.

### Method
GET

### Endpoint
/sdk-web/healthy

### Response
#### Success Response (200)
- **status** (200) - Service is healthy.
```

--------------------------------

### clearApiCache

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Clears the SDK's cached GET responses from Yuno services.

```APIDOC
## clearApiCache()

### Description
Clears the SDK's cached GET responses from Yuno services. Use after updating a checkout session so updated installment options are fetched again.
```

--------------------------------

### Initialize SDK with Await

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Yuno.initialize now returns a Promise and must be awaited.

```javascript
// Old v1 initialization
const yuno = await Yuno.initialize(publicApiKey)

// New v1.1 initialization with await
const yuno = await Yuno.initialize(publicApiKey)
```

--------------------------------

### GET /public-api-key

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/endpoints.md

Retrieves the public API key used for SDK authentication.

```APIDOC
## GET /public-api-key

### Description
Retrieves the public API key used for SDK authentication.

### Method
GET

### Endpoint
/public-api-key

### Response
#### Success Response (200)
- **publicApiKey** (string) - The public API key.
```

--------------------------------

### Initialize Yuno Checkout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Use the startCheckout method to initiate the payment process. This includes configuring the checkout session, UI elements, and the createPayment callback for backend integration.

```javascript
await yuno.startCheckout({
  /**
   * Refers to the current payment's checkout session.
   * @example `438413b7-4921-41e4-b8f3-28a5a0141638`
   * @type {String}
   */
  checkoutSession,
  /**
   * Element where the SDK will be mount on 
   */ 
  elementSelector: '#root', 
  /**
   * This parameter determines the country for which the payment process is being configured.
   * The complete list of supported countries and their country code is available on the
   * {@link https://docs.y.uno/docs/country-coverage-yuno-sdk | Country coverage} page.
   * @type {String}
   */
  countryCode: country,
  /**
  * Language can be one of es, en, pt
  * Default is browser language
  */
  language: 'es',
  /**
   * Hide or show the Yuno loading/spinner page
   * @default true
   * @optional
   */
  showLoading: true,
  /**
   * Enable the issuers form (bank list)
   * @default true
   * @optional
   */
  issuersFormEnable: true,
  /**
   * Hide or show the Yuno Payment Status page
   * @default true
   * @optional
   */
  showPaymentStatus: true,
  /**
   * Hide or show the customer or card form pay button
   * @default true
   * @optional
   */
  showPayButton: true,
  /**
   * Required if you'd like to be informed if there is a server call
   * @param { isLoading: boolean, type: 'DOCUMENT' | 'ONE_TIME_TOKEN'  } data
   * @optional
   */
  onLoading: (args) => {
    console.log(args);
  }
  /**
   * Where and how the forms will be shown
   * @default { type: 'modal' }
   * @optional
   */
  renderMode: {
    /**
     * Type can be one of `modal` or `element`
     * @default 'modal'
     * @optional
     */
    type: 'modal',
    /**
     * Element where the form will be rendered.
     * Can be a string (deprecated) or an object with the following structure:
     * 
     * {
     *   apmForm: "#form-element",
     *   actionForm: "#action-form-element"
     * }
     * 
     * Only needed if type is `element`.
     * 
     * @optional
     */
    elementSelector: {
      apmForm: "#form-element",
      actionForm: "#action-form-element"
    } // or use a string (deprecated): '#form-element',
  },
  /**
   *  Card API
   *  @optional
   */
  card: {
    /**
     * Mode render card can be step or extends
     * @default 'extends'
     * @optional
     */
    type: "extends",
    /**
     * You can edit card form styles
     * Only you should write css, then it will be injected into the iframe
     * Example 
     * `@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
     *  .Yuno-front-side-card__name-label { 
     *    color: red !important;
     *    font-family: 'Luckiest Guy' !important;
     *   }`
     * @optional
     */
    styles: '',
    /** 
     * Show checkbox for save/enroll card 
     * @default false
     * @optional
     */
    cardSaveEnable: false,
    /**
     * Custom texts in Card forms buttons
     * @example
     *  texts: {
     *    cardForm?: {
     *      enrollmentSubmitButton?: string;
     *       paymentSubmitButton?: string;
     *     }
     *     cardStepper?: {
     *       numberCardStep?: {
     *         nextButton?: string;
     *       },
     *       cardHolderNameStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       expirationDateStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       cvvStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       }
     *     }
     *  }
     * @optional
     */
    texts: {}
  },
  /**
   * Custom texts in payment forms buttons 
   * @example
   *  texts: {
   *    customerForm?: {
   *       submitButton?: string;
   *     }
   *     paymentOtp?: {
   *       sendOtpButton?: string;
   *     }
   *   }
   * @optional
   */
  texts: {},
  /**
   * Callback, is called when the One Time Token is created,
   * Merchant should create payment back to back
   * @param { oneTimeToken: string, tokenWithInformation: object } data 
   */
  async createPayment(oneTimeToken, tokenWithInformation) {
    /**
     * Merchant's function to call its backend to create 
     * the payment into Yuno.
     * {@link https://docs.y.uno/reference/create-payment}
     */
    await createPayment({ oneTimeToken, checkoutSession })
    /**
     * Call only if the SDK needs to continue the payment flow
     * @param {{ showPaymentStatus: boolean }}
     * * This is specifically for cases where the payment method requires merchant-side action
     * due to SDK limitations (e.g. when the payment provider requires a redirect URL in a webview)
     * @returns {Promise<{ action: 'REDIRECT_URL', type: 'MERCADO_PAGO_CHECKOUT_PRO', redirect: { init_url: string, success_url: string, error_url: string } } | null>}
     */
    const action = await yuno.continuePayment({ showPaymentStatus: true })
```

--------------------------------

### Initialize Yuno SDK

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/vanilla/pages/checkout-seamless-external-buttons.html

Listen for the sdk-payments-ready event to confirm the SDK is initialized and ready for use.

```javascript
window.addEventListener('sdk-payments-ready', () => { console.log('Yuno SDK is ready', window.SdkPayments) })
```

--------------------------------

### SdkPayments.initialize

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/types.md

Initializes the Yuno SDK with a public API key, returning an instance for further operations.

```APIDOC
## SdkPayments.initialize

### Description
Initializes the Yuno SDK using the provided public API key.

### Signature
`initialize(publicApiKey: string): SdkPaymentsInstance`

### Parameters
- **publicApiKey** (string) - Required - The public API key used to authenticate the SDK instance.
```

--------------------------------

### GET /payment-methods/:checkoutSession

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/endpoints.md

Lists available payment methods for a given checkout session.

```APIDOC
## GET /payment-methods/:checkoutSession

### Description
Lists available payment methods for a checkout. Proxies to GET {API_URL}/v1/checkout/sessions/{checkoutSession}/payment-methods.

### Method
GET

### Endpoint
/payment-methods/:checkoutSession
```

--------------------------------

### SdkPayments.initialize

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments.md

Initializes the Yuno SDK instance with a public API key and optional configuration.

```APIDOC
## SdkPayments.initialize

### Description
Initializes the Yuno SDK instance required to perform payment operations.

### Signature
`SdkPayments.initialize(publicApiKey: string, session?: any, config?: object)`

### Parameters
- **publicApiKey** (string) - Required - The public API key for authentication.
- **session** (any) - Optional - Custom session object.
- **config** (object) - Optional - Configuration object, e.g., `{ cookies: { deviceId: { name: string } } }`.
```

--------------------------------

### startSeamlessCheckout

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments-instance.md

Configures the seamless checkout flow.

```APIDOC
## startSeamlessCheckout(args)

### Description
Configures the seamless checkout flow. Used before seamless mounts.
```

--------------------------------

### SdkPayments.initialize

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Initializes the Yuno SDK instance using a public API key.

```APIDOC
## SdkPayments.initialize

### Description
Initializes the Yuno SDK instance. This must be called before any other SDK methods.

### Signature
`await SdkPayments.initialize(PUBLIC_API_KEY)`

### Parameters
- **PUBLIC_API_KEY** (String) - Required - Your Yuno public API key.
```

--------------------------------

### Yuno.initialize

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Initializes the Yuno SDK instance using a public API key. This method returns a Promise that resolves to a YunoInstance.

```APIDOC
## Yuno.initialize(publicApiKey)

### Description
Initializes the Yuno SDK. This must be called before any other SDK methods.

### Parameters
- **publicApiKey** (string) - Required - The public API key provided by Yuno.

### Response
- **yunoInstance** (YunoInstance) - An instance of the Yuno SDK.
```

--------------------------------

### Configure onRenderedSecureField Callback

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/secure-field.md

Example of using the onRenderedSecureField callback to track the rendering state of multiple fields.

```javascript
const renderState = watchedObject({ pan: false, expiration: false, cvv: false }, shouldHideLoader)
onRenderedSecureField: () => { renderState.pan = true }
```

--------------------------------

### SdkPayments.initialize(publicApiKey)

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments.md

Initializes the SDK instance using a provided public API key.

```APIDOC
## SdkPayments.initialize(publicApiKey)

### Description
Creates an instance of the SdkPayments class by providing a valid PUBLIC_API_KEY.

### Parameters
- **publicApiKey** (string) - Required - The public API key used to authenticate the SDK instance.
```

--------------------------------

### yuno.startPayment()

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Initiates the payment flow after a payment method has been selected by the user.

```APIDOC
### yuno.startPayment()

### Description
Starts the payment process. This should be called after the user has selected a payment method.

### Usage
```javascript
yuno.startPayment();
```
```

--------------------------------

### Initialize SDK with white-label base

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/white-label-proxy.md

Configure the SDK to use the white-label proxy base URL for API and asset requests. Requires @yuno/sdk-web-core version 7.5.0 or higher.

```javascript
const WHITELABEL_BASE = 'http://localhost:9090/hosted-payment-methods/hosted-payment-form/orchestrator'
const yuno = await SdkPayments.initialize(PUBLIC_API_KEY, undefined, {
  apiUrl: WHITELABEL_BASE,
  assetUrl: WHITELABEL_BASE + '/v1.0',
})
```

--------------------------------

### SdkPayments.initialize(publicApiKey, applicationSession?, options?)

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/_autodocs/api-reference/sdkpayments.md

Initializes the Yuno SDK instance. This method returns a Promise that resolves to an SdkPaymentsInstance.

```APIDOC
## SdkPayments.initialize(publicApiKey, applicationSession?, options?)

### Description
Initializes the Yuno SDK. The public API key prefix determines the environment (dev, staging, sandbox, or prod).

### Parameters
- **publicApiKey** (string) - Required - Public API key from the Yuno dashboard.
- **applicationSession** (string | undefined) - Optional - Application session identifier.
- **options** (object | undefined) - Optional - Advanced configuration object.

### Options Structure
- **cookies.deviceId.name** (string) - Optional - Custom cookie name for device identification (default: "yuno").
- **apiUrl** (string) - Optional - Base URL for SDK API calls.
- **assetUrl** (string) - Optional - Base URL for SDK assets/JS chunks.

### Example
```javascript
const yuno = await SdkPayments.initialize(PUBLIC_API_KEY)

// With options
const options = { 
  apiUrl: 'http://localhost:9090/api', 
  assetUrl: 'http://localhost:9090/assets' 
}
const yuno = await SdkPayments.initialize(publicApiKey, undefined, options)
```
```

--------------------------------

### yuno.mountSeamlessCheckout()

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/README.md

Mounts the seamless checkout SDK into a specified HTML element.

```APIDOC
### yuno.mountSeamlessCheckout()

### Description
Mounts the SDK into a valid HTML element using a CSS selector.

### Usage
```javascript
await yuno.mountSeamlessCheckout();
```
```

--------------------------------

### Repository Structure

Source: https://github.com/yuno-payments/yuno-sdk-web/blob/main/CLAUDE.md

Illustrates the directory layout of the yuno-sdk-web project, including the shared Express server and individual frontend framework demos.

```bash
yuno-sdk-web/
├── server.js              # Express server (Node.js) - shared backend
├── package.json           # Root package (Express server dependencies)
├── vanilla/               # Vanilla JS demo
├── yuno-angular/          # Angular 19 demo (standalone sub-project with own package.json)
├── yuno-react/            # React 19 + Vite demo (standalone sub-project)
├── yuno-vue/              # Vue 3 + Vite demo (standalone sub-project)
├── yuno-vtex-webview/     # VTEX headless webview demo
│   └── HeadlessVTEXWeb/   # Vite sub-project
└── typescript/            # TypeScript types

```
Tokens:
Raw