Book a Demo

Full SDK

Suggest Edits

Below, we outline the step-by-step process to enable the full SDK 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 tag. Refer to the example below:

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

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

To start the checkout, you'll use the function yuno.startCheckout, providing the necessary parameters.

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

ParameterDescription
checkoutSessionRefers to the current payment's checkout session.
Example: '438413b7-4921-41e4-b8f3-28a5a0141638'
elementSelectorSpecifies the HTML element where you want to mount the Yuno SDK. The SDK will be rendered within this element.
countryCodeThis 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.
languageDefines the language to be used in the payment forms. You can set it to one of the available language options: es (Spanish), en (English), or pt (Portuguese).
onLoadingRequired to receive notifications about server calls or loading events during the payment process.
showLoadingControl the visibility of the Yuno loading/spinner page during the payment process. By default, it's true.
issuersFormEnableEnables the issuer's form. By default, it's true.
showPaymentStatusShows the Yuno Payment Status page. You can use this option when continuing a payment as well. By default, it's true.
yuno.startCheckout({
  checkoutSession: '438413b7-4921-41e4-b8f3-28a5a0141638',
  elementSelector: '#root', 
  /**
   * The complete list of country codes is available on https://docs.y.uno/docs/country-coverage-yuno-sdk
  */
  country_code: "CO",
  language: 'es',
  showLoading: true,
  issuersFormEnable: true,
  showPaymentStatus: true,
  onLoading: (args) => {
    console.log(args);
  }
  async yunoCreatePayment(oneTimeToken) {
  	/**
    * The createPayment function calls the backend to create a payment in Yuno. 
    * It uses the following endpoint https://docs.y.uno/reference/create-payment
  	*/
    await createPayment({ oneTimeToken, checkoutSession })
    yuno.continuePayment({ showPaymentStatus: true })
  },
})

Step 4: Mount the SDK

Display the payment methods by using the function yuno.mountCheckout() by selecting an HTML element and using a valid CSS selector (#, ., [data-*])

/**
 * Mount checkout in browser DOM
 */
yuno.mountCheckout()

If you want to set a default payment method, use the following code to mount it:

/**
 * Mount checkout in browser DOM with a payment method selected by default
 * @optional
 */
yuno.mountCheckout({
  /**
   * Optional, only needed if you would like this method type selected by default
   * Can be one of 'BANCOLOMBIA_TRANSFER' | 'PIX' | 'ADDI' | 'NU_PAY' | 'MERCADO_PAGO_CHECKOUT_PRO
   */
  paymentMethodType: PAYMENT_METHOD_TYPE,
  /**
   * Optional
   * Vaulted token related to payment method type
   */
  vaultedToken: VAULTED_TOKEN,
})

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 yuno.CreatePayment(oneTimeToken) is then triggered with the OTT (One Time Token).

 yunoCreatePayment(oneTimeToken)

You can also use tokenWithInformation to receive any additional info given by the customer in the 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 can 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.

Complete the integration

After Step 7, you can complete the end-to-end integration by accessing Step by Step integration of the Full SDK.


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 about the additional configurations from the Full SDK accessing Complementary Features. You can also access other functions available on the Yuno Web SDK:

Updated 15 days ago