Quickstart - Your First Payment in 5 Minutes

npm install @yuno-payments/sdk-web

<script src="https://sdk-web.y.uno/v1.5/main.js"></script>

import { Yuno } from '@yuno-payments/sdk-web';

// Initialize SDK
const yuno = await Yuno.initialize('your-public-api-key');

// Create checkout session on your backend
const session = await fetch('/api/create-session', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    customer_id: 'customer-123',
    amount: { currency: 'USD', value: 1000 },
    country: 'US'
  })
}).then(r => r.json());

// Configure checkout
yuno.startCheckout({
  checkoutSession: session.checkout_session,
  elementSelector: '#payment-form',
  countryCode: 'US',
  async yunoCreatePayment(oneTimeToken) {
    // Process payment on your backend
    await fetch('/api/process-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        one_time_token: oneTimeToken,
        checkout_session: session.checkout_session
      })
    });
    yuno.continuePayment();
  }
});

// Mount payment form
yuno.mountCheckout();

<div id="payment-form"></div>
<button id="pay-button">Pay Now</button>

<script>
  document.getElementById('pay-button').addEventListener('click', () => {
    yuno.startPayment();
  });
</script>

pod 'YunoSDK'

dependencies: [
    .package(url: "https://github.com/yuno-payments/yuno-sdk-ios", from: "1.0.0")
]

import YunoSDK

// Initialize in AppDelegate or App struct
Yuno.initialize(publicKey: "your-public-api-key")

// In your view controller
class PaymentViewController: UIViewController, YunoPaymentDelegate {
    
    func processPayment() async {
        // Create session on your backend
        let session = try await createCheckoutSession()
        
        // Configure and start payment
        let config = YunoConfig(
            checkoutSession: session.id,
            countryCode: "US"
        )
        
        Yuno.startPayment(with: config, delegate: self)
    }
    
    // Handle payment result
    func yunoPaymentResult(_ result: PaymentResult) {
        switch result.status {
        case .succeeded:
            print("Payment succeeded!")
        case .failed:
            print("Payment failed: \(result.error?.message ?? "")")
        case .pending:
            print("Payment pending")
        }
    }
}

repositories {
    maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" }
}

dependencies {
    implementation 'com.yuno.payments:android-sdk:1.0.0'
}

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        Yuno.initialize(
            this,
            publicApiKey = "your-public-api-key",
            config = YunoConfig()
        )
    }
}

import com.yuno.payments.Yuno

class PaymentActivity : ComponentActivity() {
    private var checkoutSession: String? = null
    private var paymentReady = mutableStateOf(false)
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        setContent {
            var paymentMethodSelected by remember { mutableStateOf(false) }
            
            Column {
                // Initialize checkout
                LaunchedEffect(Unit) {
                    val session = createCheckoutSession()
                    checkoutSession = session.id
                    
                    startCheckout(
                        checkoutSession = session.id,
                        countryCode = "US"
                    )
                }
                
                // Display payment methods
                PaymentMethodListViewComponent(
                    activity = this@PaymentActivity,
                    onPaymentSelected = { paymentMethodSelected = it }
                )
                
                // Pay button
                Button(
                    onClick = {
                        lifecycleScope.launch {
                            startPayment(
                                showStatusYuno = true,
                                callbackOTT = { token ->
                                    token?.let { processPayment(it, checkoutSession!!) }
                                }
                            )
                        }
                    },
                    enabled = paymentMethodSelected
                ) {
                    Text("Pay Now")
                }
            }
        }
    }
}

npm install @yuno-payments/react-native-sdk

cd ios && pod install

import { Yuno } from '@yuno-payments/react-native-sdk';

// Initialize
Yuno.initialize({
  publicKey: 'your-public-api-key',
});

// In your component
const PaymentScreen = () => {
  const [isReady, setIsReady] = useState(false);
  
  useEffect(() => {
    initCheckout();
    return () => YunoSdk.removeListeners();
  }, []);
  
  const initCheckout = async () => {
    const session = await createCheckoutSession();
    
    // Set up listeners
    YunoSdk.yunoPaymentResult((result) => {
      if (result.status === 'SUCCEEDED') {
        console.log('Payment succeeded!');
      }
    });
    
    // Show checkout
    await YunoSdk.showPaymentCheckout({
      checkoutSession: session.id,
      countryCode: 'US',
    });
    
    setIsReady(true);
  };
  
  const processPayment = async () => {
    await YunoSdk.startPayment(true); // Start payment flow
  };
  
  return (
    <Button 
      title="Pay Now" 
      onPress={processPayment}
      disabled={!isReady}
    />
  );
};