Skip to main content
Orientation: Choosing Your Integration Flow, before you begin, please review the Official Integration Flow.
  • Standard Flow (Full Checkout): Recommended for most merchants. Yuno handles the UI, security, and automatic updates for payment methods.
  • Custom Flow (This SDK): Use this only if you require full control over the UX. Note: You will be responsible for manually handling payment statuses, 3DS transitions, and fraud routing data collection.
Yuno allows you to save payment methods (enrollment) either during a payment flow or as a standalone step.

​
Save during payment

To save a card during a regular payment flow, include the vault_on_success flag when creating the payment on your backend. 
// When creating payment on backend, include vault_on_success flag
async function createPayment(token: string, checkoutSession: string) {
  await fetch('/api/payment/create', {
    method: 'POST',
    body: JSON.stringify({
      one_time_token: token,
      checkout_session: checkoutSession,
      vault_on_success: true, // Save after successful payment
    }),
  });
}

​
Separate enrollment

Use the enrollment flow to save a payment method without processing a payment. 
// 1. Create customer session on backend
const customerSession = await createCustomerSession('cus_123');

// 2. Set up listener
const enrollmentSubscription = YunoSdk.onEnrollmentStatus((state) => {
  if (state.status === 'SUCCEEDED') {
    console.log('Card saved successfully');
  }
});

// 3. Start enrollment flow
await YunoSdk.enrollmentPayment({
  customerSession: customerSession.id,
  countryCode: 'US',
  showPaymentStatus: true,
});

// 4. Clean up
enrollmentSubscription.remove();

​
Listeners

Use onEnrollmentStatus to track the progress of the enrollment flow.
StatusDescription
SUCCEEDEDThe payment method was saved successfully.
FAILEDThe enrollment failed.
CANCELEDThe user closed the enrollment flow.