React Native Enrollment

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.

Status	Description
`SUCCEEDED`	The payment method was saved successfully.
`FAILED`	The enrollment failed.
`CANCELED`	The user closed the enrollment flow.

StylingCustomize the appearance of the Yuno SDK in your React Native app.

⌘I

Overview

Seamless SDK

Lite SDK

Headless SDK

Customization

Card Enrollment

Resources

Additional Platforms

External Native Modules

Save during payment

Separate enrollment

Listeners

​Save during payment

​Separate enrollment

​Listeners

Save during payment

Separate enrollment

Listeners