Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.y.uno/llms.txt

Use this file to discover all available pages before exploring further.

The Apple Pay & Google Pay enhanced experience is an optional add-on for stores already using the Yuno VTEX plugin. It improves the checkout experience for shoppers by removing an intermediate screen between the VTEX checkout and the device’s native wallet sheet, which is known to reduce conversion on wallet payments.
Default wallet experience
Enhanced wallet experience

​
What it is

By default, when a shopper selects Apple Pay or Google Pay, the Yuno Payment App opens an intermediate screen inside the VTEX checkout before the device’s native confirmation sheet (Face ID, fingerprint, or PIN) appears. The enhanced experience removes that intermediate screen: the Apple Pay and Google Pay buttons appear directly inside the VTEX checkout payment step, and tapping a button opens the device’s native sheet immediately. This integration also unlocks the optional Apple Pay installments feature.

​
How it works

When a shopper reaches the checkout, the Yuno SDK quietly prepares a payment session in the background. By the time they reach the payment step, the Apple Pay and Google Pay buttons appear instantly.
  • Fast confirmation: Tapping a button opens the native wallet sheet immediately.
  • Auto-recalculation: If the shopper changes their cart (adds an item, applies a coupon, changes shipping), the SDK recalculates the session automatically.
  • Error handling: If a payment fails, the shopper can try again without reloading the page.

​
Integration guide

Setting up the enhanced experience involves adding a small JavaScript snippet to your VTEX checkout and finding the values to fill into it.
1

Add the snippet to your VTEX checkout

The snippet is added to your store’s checkout6-custom.js file from the VTEX dashboard.
  1. In the VTEX dashboard, search for Checkout in the top bar.
VTEX Checkout settings
  1. Select the website your store uses (usually Default).
Select website
  1. Open the Code tab and select checkout6-custom.js from the file list on the right.
Open checkout6-custom.js
  1. Add the snippet below at the end of the file, then click Save.
Save snippet
(function () {
  window.addEventListener('yuno-sdk-vtex-io-ready', function (event) {
    var YunoVTEXIO = event.detail.YunoVTEXIO;
    YunoVTEXIO.initialConfiguration({
      paymentMethods: ['Google Pay', 'Apple Pay'],
      affiliationName: 'YOUR_AFFILIATION_NAME'
    });
  });

  var script = document.createElement('script');
  script.src = 'https://sdk-web-vtex-io.y.uno/v1/main.js';
  document.head.appendChild(script);
})();
Replace YOUR_AFFILIATION_NAME with the affiliation name from your Yuno provider configuration. In paymentMethods, list the wallets you want to enable — 'Apple Pay', 'Google Pay', or both.
2

Find the affiliation name

The affiliationName value is the same one you set when configuring Yuno as a payment provider.
  1. In the VTEX dashboard search bar, type providers and select the Providers result.
VTEX Providers
  1. Find the Yuno provider configured for this store and open it.
Select Yuno provider
  1. In the provider’s detail view, copy the value from the Affiliation Name field and use it in the snippet.
Copy affiliation name
After saving the snippet, the enhanced experience is live. Apple Pay and Google Pay buttons will appear directly inside the VTEX checkout payment step

​
Apple Pay installments

Apple Pay installments is an optional feature within the enhanced experience that lets shoppers split their purchase into installments.

​
What shoppers see

Once enabled, an Installments selector appears above the Apple Pay button. Tapping it opens a panel listing every installment option.
Installments selector
Options panel
If the plan includes interest, a Payment details panel appears below showing the breakdown (number of installments, financing cost, etc.).
Financing details

​
Eligibility rules

Each installment plan configured in your Yuno dashboard can include optional limits:
  • Amount range: Minimum and maximum order total.
  • Availability window: Start and end date for the plan.
If the order doesn’t meet these rules, the selector is hidden and Apple Pay renders as a plain button.

​
How to enable

To turn on Apple Pay installments, add the appleInstallmentsMerchantReference field to the snippet’s initialConfiguration call:
1

Get the Merchant reference

  1. In the Yuno dashboard, go to Installments.
  2. Open the detail panel for the installment plan you want to offer.
  3. Copy the Merchant reference value.
Merchant reference
2

Update the snippet

Update your snippet in checkout6-custom.js:
YunoVTEXIO.initialConfiguration({
  paymentMethods: ['Google Pay', 'Apple Pay'],
  affiliationName: 'YOUR_AFFILIATION_NAME',
  appleInstallmentsMerchantReference: 'YOUR_MERCHANT_REFERENCE' 
});
Save the snippet. The installments selector will appear above the Apple Pay button on the next checkout.