- Browser Requirements
- Use Full Checkout
- Use Checkout Lite
- Use Status
- Use Enrollment Lite
- Start Demo App
- We don't support IE
To use full checkout you should include our SDK file in your page before close your <body> tag
<script src="https://sdk-web.y.uno/v1/static/js/main.min.js"></script>Get a Yuno instance class in your JS app with a valid PUBLIC_API_KEY
const yuno = Yuno.initialize(PUBLIC_API_KEY)Then start checkout with configuration
yuno.startCheckout({
checkoutSession,
// element where the SDK will be mount on
elementSelector: '#root',
/**
* country can be one of CO, BR, CL, PE, EC, UR, MX
*/
countryCode: country,
/**
* language can be one of es, en, pt
*/
language: 'es',
/**
* calback is called when one time token is created,
* merchant should create payment back to back
* @param { oneTimeToken: string } data
*/
async yunoCreatePayment(oneTimeToken) {
await createPayment({ oneTimeToken, checkoutSession })
/**
* call only if the SDK needs to continue the payment flow
*/
yuno.continuePayment()
},
/**
* callback is called when user selects a payment method
* @param { {type: 'BANCOLOMBIA_TRANSFER' | 'PIX' | 'ADDI' | 'NU_PAY', name: string} } data
*/
yunoPaymentMethodSelected(data) {
console.log('onPaymentMethodSelected', data)
},
/**
*
* @param {'READY_TO_PAY' | 'CREATED' | 'PAYED' | 'REJECTED' | 'CANCELLED' | 'ERROR' | 'DECLINED' | 'PENDING' | 'EXPIRED' | 'VERIFIED' | 'REFUNDED'} data
*/
yunoPaymentResult(data) {
console.log('yunoPaymentResult', data)
},
/**
* @param { error: 'CANCELED_BY_USER' | any }
*/
yunoError: (error) => {
console.log('There was an error', error)
},
})Finally mount the SDK in a html element, you can use any valid css selector (#, ., [data-*]).
/**
* mount checkout in browser DOM
*/
yuno.mountCheckout()Remember you need to call
yuno.startPayment()to start the payment flow after the user has selected a payment method.
// start payment when user clicks on merchant payment button
const PayButton = document.querySelector('#button-pay')
PayButton.addEventListener('click', () => {
yuno.startPayment()
})Checkout demo html
Checkout demo js
To use checkout lite you should include our SDK file in your page before close your <body> tag
<script src="https://sdk-web.y.uno/v1/static/js/main.min.js"></script>Get a Yuno instance class in your JS app with a valid PUBLIC_API_KEY
const yuno = Yuno.initialize(PUBLIC_API_KEY)Then create a configuration object
yuno.startCheckout({
checkoutSession,
// element where the SDK will be mount on
elementSelector: '#root',
/**
* country can be one of CO, BR, CL, PE, EC, UR, MX
*/
countryCode,
/**
* language can be one of es, en, pt
*/
language: 'es',
/**
* calback is called when one time token is created,
* merchant should create payment back to back
* @param { oneTimeToken: string } data
*/
async yunoCreatePayment(oneTimeToken) {
await createPayment({ oneTimeToken, checkoutSession })
/**
* call only if the SDK needs to continue the payment flow
*/
yuno.continuePayment()
},
/**
*
* @param {'READY_TO_PAY' | 'CREATED' | 'PAYED' | 'REJECTED' | 'CANCELLED' | 'ERROR' | 'DECLINED' | 'PENDING' | 'EXPIRED' | 'VERIFIED' | 'REFUNDED'} data
*/
yunoPaymentResult(data) {
console.log('yunoPaymentResult', data)
},
/**
* @param { error: 'CANCELED_BY_USER' | any }
*/
yunoError: (error) => {
console.log('There was an error', error)
},
})Finally mount the SDK in a html element, you can use any valid css selector (#, ., [data-*]).
yuno.mountCheckoutLite({
/**
* can be one of 'BANCOLOMBIA_TRANSFER' | 'PIX' | 'ADDI' | 'NU_PAY' | 'MERCADO_PAGO_CHECKOUT_PRO | CARD
*/
paymentMethodType: PAYMENT_METHOD_TYPE,
/**
* Vaulted token related to payment method type
*/
valutedToken: VAULTED_TOKEN,
})After it is mounted, it will start the desired flow
Checkout lite demo html
Checkout lite demo js
To use status you should include our SDK file in your page before close your <body> tag
<script src="https://sdk-web.y.uno/v1/static/js/main.min.js"></script>Get a Yuno instance class in your JS app with a valid PUBLIC_API_KEY
const yuno = Yuno.initialize(PUBLIC_API_KEY)Finally mount the SDK in a html element, you can use any valid css selector (#, ., [data-*]).
yuno.mountStatusPayment({
checkoutSession: '438413b7-4921-41e4-b8f3-28a5a0141638',
/**
* country can be one of CO, BR, CL, PE, EC, UR, MX
*/
countryCode: 'CO',
/**
* language can be one of es, en, pt
*/
language: 'es',
/**
*
* @param {'READY_TO_PAY' | 'CREATED' | 'PAYED' | 'REJECTED' | 'CANCELLED' | 'ERROR' | 'DECLINED' | 'PENDING' | 'EXPIRED' | 'VERIFIED' | 'REFUNDED'} data
*/
yunoPaymentResult(data) {
console.log('yunoPaymentResult', data)
}
})Status demo html
Status demo js
To use status lite you should include our SDK file in your page before close your <body> tag
<script src="https://sdk-web.y.uno/v1/static/js/main.min.js"></script>Get a Yuno instance class in your JS app with a valid PUBLIC_API_KEY
const yuno = Yuno.initialize(PUBLIC_API_KEY)Finally call the SDK yunoPaymentResult method.
/**
* Call method that returns status
*
* @return {'READY_TO_PAY' | 'CREATED' | 'PAYED' | 'REJECTED' | 'CANCELLED' | 'ERROR' | 'DECLINED' | 'PENDING' | 'EXPIRED' | 'VERIFIED' | 'REFUNDED'}
*/
const status = await yuno.yunoPaymentResult(checkoutSession)Status Lite demo html
Status Lite demo js
To use enrollment lite you should include our SDK file in your page before close your <body> tag
<script src="https://sdk-web.y.uno/v1/static/js/main.min.js"></script>Get a Yuno instance class in your JS app with a valid PUBLIC_API_KEY
const yuno = Yuno.initialize(PUBLIC_API_KEY)Finally call the SDK mountEnrollmentLite method.
yuno.mountEnrollmentLite({
customerSession,
/**
* language can be one of es, en, pt
*/
language: "en",
/**
* @param { error: 'CANCELED_BY_USER' | any }
*/
yunoError: () => {
console.log('There was an error', error)
},
});Enrollment Lite demo html
Enrollment Lite demo js
> git clone https://github.com/yuno-payments/yuno-sdk-web.git
> cd yuno-sdk-web
> npm install
> npm startYou need to create a .env file in the root folder with your test keys and server port
PORT=8080
YUNO_X_ACCOUNT_CODE=abc
YUNO_PUBLIC_API_KEY=abc
YUNO_PRIVATE_SECRET_KEY=abc
YUNO_API_URL=yuno-environment-url
YUNO_CUSTOMER_ID=abcYUNO_X_ACCOUNT_CODE
YUNO_PUBLIC_API_KEY
YUNO_PRIVATE_SECRET_KEY
YUNO_API_URL
YUNO_CUSTOMER_ID
Then go to http://localhost:YOUR-PORT
To change the country you can add a query parameter named country with one of CO, BR, CL, PE, EC, UR, MX
http://localhost:YOUR-PORT?country=CO