Lite SDK (Payment Web)

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

Step 1: Include the library in your project

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 are using Typescript, Yuno provides a library that you can use to see all available methods available in the Yuno Web SDK.

Step 2: Initialize SDK with the public key

In your JavaScript application, create an instance of the Yuno class by providing a valid PUBLIC_API_KEY. Check the Get your API credentials guide.

Like the example below, use the initialized class that is attributed to the yunoconstant.

const yuno = Yuno.initialize(PUBLIC_API_KEY)

Step 3: Start the checkout process

You will start the checkout process. To do it, use the yuno.startCheckout function and provide the necessary parameters.

The following table lists all required parameters and their descriptions. For optional parameters, go to Complementary Features.

Parameter	Description
`checkoutSession`	Refers to the current payment's checkout session. `Example: '438413b7-4921-41e4-b8f3-28a5a0141638'`
`countryCode`	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 Country coverage page.
`language`	Defines the language to be used in the payment forms. You can set it to one of the available language options: es (Spanish), en (English), pt (Portuguese), fil (Filipino), id (Indonesian), ms (Malay), or th (Thai).
`onLoading`	Required to receive notifications about server calls or loading events during the payment process.
`showLoading`	Control the visibility of the Yuno loading/spinner page during the payment process. By default, it's `true`.
`issuersFormEnable`	Enables the issuer's form. By default, it's `true`.
`showPaymentStatus`	Shows the Yuno Payment Status page. You can use this option when continuing a payment as well. By default, it's `true`.
`card.isCreditCardProcessingOnly`	Enables you to ensure that all card transactions are processed as credit only. This option is helpful in markets where cards can act as both credit and debit. To enable, set the `isCreditCardProcessingOnly` to `true` to ensure that all card transactions are processed as credit. This parameter is not required.

yuno.startCheckout({
  checkoutSession: '438413b7-4921-41e4-b8f3-28a5a0141638',
  /**
   * The complete list of country codes is available on https://docs.y.uno/docs/country-coverage-yuno-sdk
  */
  country_code: "FR",
  language: 'fr',
  showLoading: true,
  issuersFormEnable: true,
  showPaymentStatus: true,
  onLoading: (args) => {
    console.log(args);
  }
  async yunoCreatePayment(oneTimeToken) {
    await createPayment({ oneTimeToken, checkoutSession })
    yuno.continuePayment({ showPaymentStatus: true })
  },
})

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

Next, you have to mount the SDK, presenting the checkout based on the payment method selected by your customer. Remember, when using the Lite SDK, you're responsible for displaying the payment methods and capturing the customer's selection. Access Lite SDK (Payment) for additional information.

Use the yuno.mountCheckoutLite() function by selecting an HTML element and using a valid CSS selector (#, ., [data-*]) to display the checkout for the selected payment method.

yuno.mountCheckoutLite({
  /**
   * can be one of 'PAYPAL' | 'PIX' | 'APPLE_PAY' | 'GOOGLE_PAY' | CARD
   */
  paymentMethodType: PAYMENT_METHOD_TYPE,
  /**
   * Vaulted token related to payment method type.
   * Only if you already have it
   * @optional 
   */
  vaultedToken: VAULTED_TOKEN,
})

After mounting the SDK, the selected payment method flow will start automatically.

Step 5: Initiate the payment process

After the user has selected a payment method, remember to call yuno.startPayment() to initiate the payment flow. Below, you will find an example where yuno.startPayment() is called when the user clicks on button-pay:

const PayButton = document.querySelector('#button-pay')

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

Step 6: Get the OTT (One Time Token)

Once the customer fills out the requested data in Yuno's payment forms, the SDK provides the OTT. The configuration function yunoCreatePayment(oneTimeToken) is then triggered with the OTT (One Time Token).

yunoCreatePayment(oneTimeToken)

You can also use tokenWithInformation to receive any additional info the customer gives at checkout, such as installments or document type/number.

yunoCreatePayment(oneTimeToken, tokenWithInformation)

Important

The merchant is responsible for handling the loader. Yuno offers an option to use our loader; however, the merchant can use their own loader and must make the corresponding configurations.

Step 7: Create the Payment

Once you have completed the steps described before, you will be able to create a payment. The back-to-back payment creation must be carried out using the Create Payment endpoint. The merchant should call their backend to create the payment within Yuno, using the OTT (One Time Token) and the checkout session.

Continue method

Yuno recommends you integrate the continuePayment method of the SDK after the payment is created because certain asynchronous payment methods require additional action from the customer to complete it. The API will inform you of this scenario via the sdk_action_required field of the response, which will be returned as true. The yuno.continuePayment() function will display the additional screens to the customers, where they can carry out the necessary actions to complete the payment. Otherwise, this step is not necessary.

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.

What's next?

Learn how to execute MIT using the Lite SDK, or for additional configurations from the Lite SDK, access Complementary Features. You can also access other functions available on the Yuno Web SDK:

SDK Customizations: Change the SDK appearance to match your brand.
Payment Status: Update the user about the payment process.
3DS Setup SDK: Integrate 3DS into your payment flow.