Web SDK Common Reference

Parameters, customizations, and advanced features for all Web SDK flows. See Quickstart guide and Choose the Right Integration for You for introductory information.

TypeScript support

TypeScript: Yuno provides a TypeScript library for all available methods.

Subresource Integrity (SRI)

This browser security feature lets you ensure a loaded script has not been tampered with. You provide a cryptographic hash alongside the script URL; the browser verifies the downloaded bytes match the declared hash before executing the code.

• Integrity: Guarantees the exact code built and published is what runs in the browser.
• Immutability: When paired with full semantic version URLs, it ensures stable, reproducible integrations.
• Defense-in-depth: Mitigates risks from supply-chain or transport-layer compromise.

URL formats

When implementing SRI, use the full semantic version URL format to ensure immutable, tamper-evident integrations.

• Full (immutable) URL with SRI: Full semantic version path used for locked, tamper-evident integrations with an SRI hash.
• Partial (mutable) URL: Version with major and minor (e.g., v1.5).  This version will receive patch improvements.  This is useful if you like to avoid updates in your code base.

How to integrate the SDK with SRI

Replace src and integrity with the environment/version you target. crossorigin="anonymous" lets the browser validate the SRI for cross-origin scripts.

The hash can be found in the manifest.json file at files.["main.js"].integrity.

<script
  src="https://sandbox.y.uno/sdk-static-bundles-ms/sdk-web/v1.5.0/main.js"
  integrity="sha384-<paste-hash-here>"
  crossorigin="anonymous"></script>

srcfor production is https://sdk-web.y.uno/versions-sri.json .

Using NPM package

import { loadScript } from '@yuno-payments/sdk-web'

const yuno = await loadScript({
  sri: true
})

Validation notes

• Open DevTools Network tab and confirm main.js returns 200 from the full-version path.
• Verify the response headers allow cross-origin fetches for static assets if served from a distinct origin (crossorigin="anonymous" is set).
• Ensure the integrity attribute exactly matches the generated hash, including the sha384- prefix.
• Any change to main.js changes the hash. When changing versions, always regenerate or retrieve the new sha384 value and update the integrity attribute.

SRI Troubleshooting

• Hash mismatchs cause the script to fail execution with an integrity error (e.g., you updated the file but not the hash). To fix, rebuild, retrieve the new sha384 from sri-manifest.json, and update integrity.

• Browser blocks SRI on cross-origin request when the crossorigin attribute is missing or CORS is restrictive. To fix, add crossorigin="anonymous" and configure the static hosting to allow cross-origin fetches for JS assets.

Key parameters (checkout session creation)

When creating a checkout session on your backend, the following parameters are commonly used across web SDKs:

Payment and checkout parameters (full reference)

Parameters for yuno.startCheckout, yuno.mountCheckout (Seamless), and related payment flows. All parameters used in Payment flows (Web) are listed here with full detail.

Core parameters

Callbacks

Card form options (card)

Render mode

Seamless (payment Web) only

Custom texts

Enrollment parameters (full reference)

Parameters for yuno.mountEnrollmentLite and yuno.mountEnrollmentHeadless. All parameters used in Enrollment flows (Web) are listed here with full detail.

Mount external buttons

Use the mountExternalButtons method to render Google Pay and Apple Pay buttons in custom locations within your UI. This gives you control over where these buttons are displayed.

await yuno.mountExternalButtons([
  {
    paymentMethodType: 'APPLE_PAY',
    elementSelector: '#apple-pay',
  },
  {
    paymentMethodType: 'GOOGLE_PAY',
    elementSelector: '#google-pay',
  },
]);

Parameters

Unmounting buttons

You can unmount a single external button by payment method type:

yuno.unmountExternalButton('APPLE_PAY');

Or unmount all external buttons at once:

yuno.unmountAllExternalButtons();

Enrolling payment methods

You can enroll payment methods (store cards for future use) directly during the payment flow by setting payment_method.vault_on_success = true in the checkout session creation.

When vault_on_success is set to true:

• The payment method will be automatically enrolled if the payment status is SUCCEEDED
• If the payment does not succeed, no vaulting will occur
• The payment response will include a vaulted_token that you can use for future transactions

Example:

{
    "account_id": "...",
    ...
    "payment_method": {
        "vault_on_success": true
    }
}

To generate and receive a vaulted_token when vault_on_success = true, the payment must reference an existing Yuno customer through customer_payer.id in the checkout session. Creating or sending the customer data inline inside the payment request does not create the customer on our side, so no vaulting will occur.

For enrollment flows, see Enrollment flows (Web).