Seamless SDK (Payment Web)

This page outlines the step-by-step process to enable the Seamless Web SDK payment functionalities in your system.

Step 1: Include the library in your project

To use the Seamless Web SDK, ensure the Yuno SDK file is included in your webpage before closing the <body> tag. Refer to the example below:

<script src="https://sdk-web.y.uno/v1/static/js/main.min.js"></script>

Typescript library

If you're using TypeScript, Yuno offers a library that provides access to all available methods in the Yuno Web SDK.

Step 2: Initialize SDK with the public key

Initialize the Yuno SDK in your JavaScript application by providing a valid PUBLIC_API_KEY. You can find your API credentials in the Get your API credentials guide.

const yuno = Yuno.initialize(PUBLIC_API_KEY)

The yuno instance will be used in subsequent steps to configure and manage the payment process.

Step 3: Start the checkout process

Use the yuno.startCheckout() method to configure and begin the checkout process. The following example demonstrates how to set up a configuration object and start the checkout process:

yuno.startCheckout({
  checkoutSession: '438413b7-4921-41e4-b8f3-28a5a0141638', // Current payment session
  elementSelector: '#root', // HTML element for rendering
  countryCode: 'US', // Country code for the payment process
  language: 'en', // Language for the payment forms
  showLoading: true, // Show loading spinner
  issuersFormEnable: true, // Enable issuer's form
  showPaymentStatus: true, // Show payment status page
  onLoading: (args) => console.log(args), // Callback for loading events
  renderMode: {
    type: 'modal', // Render as a modal
    elementSelector: {
      apmForm: '#form-element',
      actionForm: '#action-form-element',
    },
  },
  card: {
    type: 'extends', // Card render mode
    styles: '', // Custom card styles
    cardSaveEnable: false, // Enable save card checkbox
    texts: {}, // Custom texts for card forms
  },
  texts: {}, // Custom texts for payment forms
  async yunoCreatePayment(oneTimeToken, tokenWithInformation) {
    await createPayment({ oneTimeToken, checkoutSession });
    yuno.continuePayment({ showPaymentStatus: true });
  },
  yunoPaymentMethodSelected(data) {
    console.log('Payment method selected:', data);
  },
  yunoPaymentResult(data) {
    console.log('Payment result:', data);
    yuno.hideLoader();
  },
  yunoError(error, data) {
    console.error('An error occurred:', error);
    yuno.hideLoader();
  },
});

Notice that when using the startCheckoutyou already have to specify the callbacks to handle the payments. In addition, you can customize the checkout interface using the texts objects. The following table lists all required parameters and their descriptions.

Parameter	Description
`checkoutSession`	Refers to the current payment's checkout session. Example: `438413b7-4921-41e4-b8f3-28a5a0141638`.
`elementSelector`	The HTML element where the checkout will be rendered.
`countryCode`	Determines the country for which the payment process is being configured. The full list of supported countries and their country codes is available on the Country Coverage page.
`language`	Defines the language to be used in the payment forms. Supported options include: -`es` (Spanish) - `en` (English) - `pt` (Portuguese) - `fil` (Filipino) - `id` (Indonesian) - `ms` (Malay) - `th` (Thai). By default, the SDK will use the browser language.
`showLoading`	Controls the visibility of the Yuno loading/spinner page during the payment process. Default: `true`.
`onLoading`	Required to receive notifications about server calls or loading events during the payment process.
`issuersFormEnable`	Enables the issuer's form (e.g., a list of banks). Default: `true`.
`showPaymentStatus`	It shows the Yuno Payment Status page, which is useful when continuing a payment. Default: `true`.
`showPayButton`	Controls the visibility of the pay button in the customer or card form. Defaults to `true`.
`renderMode`	Specify how and where the forms will be rendered. The options available are: - `type: modal'` (default) -`type: element`. If you select `element`you must inform the `elementSelector`, to specify where the form should be rendered.
`card`	Defines the configuration for the card form. It contains settings like render mode, custom styles, and save card option.
`texts`	Allows you to set custom button texts for card and non-card payment forms.
`yunoCreatePayment`	Placeholder function for creating a payment. This function will not be called but should be implemented.
`yunoPaymentMethodSelected`	Callback invoked when a payment method is selected, along with the method's type and name.
`yunoPaymentResult`	Callback called after the payment is completed, with the payment status (e.g., `SUCCEEDED`, `ERROR`).
`yunoError`	Callback invoked when there is an error in the payment process. Receives error type and optional additional data.

Customer and merchant-initiated transactions

Payments can be initiated by the customer (CIT) or by the merchant (MIT). You find more information about their characteristics in Stored credentials.

The step-by-step presented on this page refers to a customer-initiated transaction without the recurrence option. Typically, it's used in one-time online purchases, in-store purchases, ATM withdrawals, etc.

To learn how to use the Lite SDK to perform MIT operations, access the Merchant-initiated transactions page.

Rendering mode

By default, Yuno SDK renders as a modal. However, you can specify the element where the SDK will render. For additional information, access the Render mode under the complementary complementary features page.

Step 4: Mount the SDK

To present the checkout process based on the selected payment method, use the yuno.mountSeamlessCheckoutLite() function. This step ensures the SDK is properly mounted on your chosen HTML element.

yuno.mountSeamlessCheckoutLite({
  paymentMethodType: PAYMENT_METHOD_TYPE,
  /**
   * Vaulted token related to payment method type.
   * @optional 
   */
  vaultedToken: VAULTED_TOKEN,
})

Access the Payment type page to see the complete list of payment method types you can use when mounting the SDK.

The vaultedToken is optional. It represents information of a previously enrolled payment method. If you inform the vaultedToken, the user will not be required to provide the payment information again since it was provided in a previous transaction.

After mounting, the checkout flow for the selected payment method will automatically begin.

Demo App

In addition to the code examples provided, you can access the Demo App for a complete implementation of Yuno SDKs or go directly to the HTML and JavaScript checkout demos available on GitHub.