Skip to main content
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

Default experience (with intermediate screen)

Enhanced wallet experience

Enhanced experience (direct native sheet)

​
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
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

Installment selector

Options panel

Installment options panel

If the plan includes interest, a Payment details panel appears below showing the breakdown (number of installments, financing cost, etc.).
Financing details

​
How to enable

Apple Pay installments are enabled from the Yuno dashboard, by creating installment plans for the Apple Pay payment method. The snippet doesn’t change: a store running the enhanced experience with 'Apple Pay' in paymentMethods already asks Yuno for the available plans on every order.
1

Create an Apple Pay installment plan

  1. In the Yuno dashboard, go to Installments and click Create installment.
  2. In Payment method type, select Apple Pay.
  3. Set the number of installments, the rate, the amount range, and the availability window.
Create installment with Payment method type set to Apple Pay
Card plans are not reused. Apple Pay only sees plans created for the Apple Pay payment method, so a store with installment plans already set up for cards still needs its own Apple Pay plans.
2

Check the plan in the list

The plan appears with Apple Pay in the Payment method column. Create one plan per amount band if you want different options for different cart sizes.
Installments list showing Apple Pay plans per amount band
3

Confirm it in your checkout

Open the payment step with a cart inside the plan’s amount range and select Apple Pay. The Installments selector appears above the button.
You can also create plans with the Create Installments Plan endpoint, sending payment_method_type: APPLE_PAY.

​
Eligibility rules

Yuno resolves the plan for each order from the cart total, so the shopper always sees the options that apply to what’s in their cart. If the cart changes, the options are recalculated. Each plan you create defines:
  • Payment method type: must be Apple Pay.
  • Currency and country: must match the order.
  • Amount range: minimum and maximum order total the plan covers.
  • Availability window: start and end date for the plan.
The selector shows one entry per number of installments. If two plans cover the same order and both offer the same count, only one of them is used, so keep the amount ranges apart if you want a predictable result. If no plan covers the order, the selector is hidden and Apple Pay renders as a plain button — the payment still goes through, at one installment.
Check the minimum amount of your lowest plan against your typical order total. If the plan starts above it, most shoppers never see the selector, and the feature looks broken when it’s only out of range.