Seamless Checkout

Combine SDK convenience with full control over payment method selection

Seamless Checkout lets Yuno handle the checkout flow while you manage payment method selection. It creates payments in a single flow. From token generation to payment creation. With minimal code.

Recommended by Yuno for the smoothest SDK integration experience. Seamless is the only integration that creates payments seamlessly in one flow.

Using React or Vue? Check out the React Components or Vue Components for framework-specific wrappers.

How it works

1. You display available payment methods to the customer
2. When the customer selects a method, mount the Seamless Checkout form
3. Yuno renders the payment form, handles tokenization, and calls your yunoCreatePayment callback
4. You create the payment server-side, then call yuno.continuePayment() to complete the flow

Integration steps

1. Create a checkout session

Create a checkout session from your server using the Create Checkout Session endpoint.

2. Initialize the SDK

const yuno = Yuno.initialize("YOUR_PUBLIC_API_KEY");

3. Start Seamless Checkout

yuno.startSeamlessCheckout({
  checkoutSession: "your-checkout-session-id",
  elementSelector: "#root",
  countryCode: "US",
  language: "en-US",
  showLoading: true,
  issuersFormEnable: true,
  showPaymentStatus: true,
  renderMode: {
    type: "modal",
  },
  card: {
    type: "extends",
    cardSaveEnable: false,
  },
  async yunoCreatePayment(oneTimeToken, tokenWithInformation) {
    await createPayment({ oneTimeToken, checkoutSession });
    yuno.continuePayment({ showPaymentStatus: true });
  },
  yunoPaymentMethodSelected(data) {
    console.log("Payment method selected:", data);
  },
  yunoPaymentResult(data) {
    console.log("Payment result:", data);
  },
  yunoError(error) {
    console.error("An error occurred:", error);
  },
});

4. Mount the checkout for a payment method

When the customer selects a payment method, mount the form:

yuno.mountSeamlessCheckout({
  paymentMethodType: PAYMENT_METHOD_TYPE,
  vaultedToken: VAULTED_TOKEN, // optional, for saved payment methods
});

5. Trigger the payment

yuno.startPayment();

External buttons

Mount Apple Pay and Google Pay buttons outside the checkout form:

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

Remove buttons when no longer needed:

yuno.unmountExternalButton(); // Remove one
yuno.unmountAllExternalButtons(); // Remove all

Callbacks

Callback	Description
yunoCreatePayment(oneTimeToken, tokenWithInformation)	Called when token is generated. Create payment server-side, then call yuno.continuePayment()
yunoPaymentMethodSelected(data)	Fires when the user selects a payment method
yunoPaymentResult(data)	Returns the final payment result
yunoError(error, data)	Error handler

Card vaulting

To automatically save cards on successful payment, set vault_on_success: true when creating the checkout session.

Next steps

Full Checkout

Pre-built UI with zero payment method management.

Customization

Theme and style your checkout.