> ## Documentation Index
> Fetch the complete documentation index at: https://yuno-3979e326-fix-create-subscription-card-usage.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart Guide

Welcome to the Yuno SDKs quickstart guide. This guide shows you how to easily implement our full payment flow, Yuno's most straightforward solution with pre-built UI and automatic payment method display.

Choose your platform and follow the steps to start process your first payments with Yuno.

<Tabs>
  <Tab title="Web SDK integration">
    ### 1. Install

    ```bash theme={null}
    npm install @yuno-payments/sdk-web
    ```

    Or include via CDN:

    ```html theme={null}
    <script src="https://sdk-web.y.uno/v1.9/main.js"></script>
    ```

    ### 2. Initialize and process payment

    ```javascript theme={null}
    import { Yuno } from '@yuno-payments/sdk-web';

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

    // Create checkout session on your backend
    // Your backend calls: POST https://api-sandbox.y.uno/v1/checkout/sessions
    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
    await yuno.startCheckout({
    checkoutSession: session.checkout_session,
    elementSelector: '#payment-form',
    countryCode: 'US',
    async yunoCreatePayment(oneTimeToken) {
        // Your backend calls: POST https://api-sandbox.y.uno/v1/payments
        // with { payment_method: { token: oneTimeToken }, checkout_session: ... }
        const payment = await fetch('/api/process-payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            one_time_token: oneTimeToken,
            checkout_session: session.checkout_session
        })
        }).then(r => r.json());
        
        // Required for async payment methods (3DS, PIX, etc.)
        await yuno.continuePayment();
    }
    });

    // Mount payment form
    await yuno.mountCheckout();
    ```

    ### 3. Add HTML container and trigger payment

    ```html theme={null}
    <div id="payment-form"></div>
    <button id="pay-button">Pay Now</button>

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

    **Test with**: Card `4111 1111 1111 1111`, any future date, any CVV

    For a comprehensive overview of all Web SDK parameters, see [Web SDK Common Reference](/docs/sdks/resources/references/web).

    [Complete Web guide →](/docs/sdks/full-checkout/web-payments)
  </Tab>

  <Tab title="iOS">
    ### 1. Install

    **CocoaPods**:

    ```ruby theme={null}
    pod 'YunoSDK', '~> 2.11.1'
    ```

    **Swift Package Manager**:

    ```swift theme={null}
    dependencies: [
        .package(url: "https://github.com/yuno-payments/yuno-sdk-ios", from: "2.11.1")
    ]
    ```

    ### 2. Initialize and implement delegate

    ```swift theme={null}
    import YunoSDK

    // Initialize in AppDelegate or App struct
    Yuno.initialize(
        apiKey: "your-public-api-key",
        config: YunoConfig()
    )

    // In your view controller - implement YunoPaymentDelegate
    class PaymentViewController: UIViewController, YunoPaymentDelegate {
        
        // Required delegate properties
        var checkoutSession: String { "session-from-backend" }
        var countryCode: String { "US" }
        var language: String? { "en" }
        var viewController: UIViewController? { self }
        
        override func viewDidLoad() {
            super.viewDidLoad()
            displayPaymentMethods()
        }
        
        func displayPaymentMethods() async {
            // Get payment methods view
            let paymentView = await Yuno.getPaymentMethodViewAsync(delegate: self)
            view.addSubview(paymentView)
            // Add constraints...
        }
        
        // Required: Create payment with one-time token
        func yunoCreatePayment(with token: String) {
            // Call your backend: POST /v1/payments
            createPaymentOnBackend(token: token) { result in
                // After payment creation, continue for async methods
                Yuno.continuePayment()
            }
        }
        
        // Required: Handle payment result
        func yunoPaymentResult(_ result: Yuno.Result) {
            switch result {
            case .succeeded:
                print("Payment succeeded!")
            case .fail:
                print("Payment failed")
            case .processing:
                print("Payment processing")
            default:
                break
            }
        }
    }

    // Start payment when user taps pay button
    @IBAction func payButtonTapped(_ sender: UIButton) {
        Yuno.startPayment(showPaymentStatus: true)
    }
    ```

    **Test with**: Card `4111 1111 1111 1111`, any future date, any CVV

    For a comprehensive overview of all iOS SDK parameters, see [iOS SDK Common Reference](/docs/sdks/resources/references/ios).

    [Complete iOS guide →](/docs/sdks/full-checkout/ios-payments)
  </Tab>

  <Tab title="Android">
    ### 1. Install

    **build.gradle**:

    ```kotlin theme={null}
    repositories {
        maven { url "https://yunopayments.jfrog.io/artifactory/snapshots-libs-release" }
    }

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

    ### 2. Initialize and process payment

    **Initialize in Application**:

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

    <Info>
      For a detailed explanation of the `keepLoader` parameter and mandatory error handling, see the [Android Reference Guide](/docs/sdks/resources/references/android#keeploader-parameter).
    </Info>

    **In Activity/Fragment**:

    ```kotlin theme={null}
    import com.yuno.payments.Yuno

    class PaymentActivity : ComponentActivity() {
        private var checkoutSession: String? = null
        
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            
            // Create checkout session on your backend first
            // Your backend calls: POST https://api-sandbox.y.uno/v1/checkout/sessions
            lifecycleScope.launch {
                val session = createCheckoutSession() // Your backend call
                checkoutSession = session.id
                
                // Start checkout with session
                startCheckout(
                    checkoutSession = session.id,
                    countryCode = "US",
                    callbackPaymentState = { state, subState ->
                        when (state) {
                            "SUCCEEDED" -> println("Payment succeeded!")
                            "FAILED" -> println("Payment failed")
                            "PROCESSING" -> println("Payment processing")
                            "REJECT" -> println("Payment rejected")
                            else -> println("Payment state: $state")
                        }
                    }
                )
            }
            
            setContent {
                var paymentMethodSelected by remember { mutableStateOf(false) }
                
                Column(
                    modifier = Modifier
                        .fillMaxSize()
                        .verticalScroll(rememberScrollState())
                ) {
                    // Display payment methods
                    PaymentMethodListViewComponent(
                        activity = this@PaymentActivity,
                        onPaymentSelected = { isSelected ->
                            paymentMethodSelected = isSelected
                        }
                    )
                    
                    // Pay button
                    Button(
                        onClick = {
                            startPayment(
                                showStatusYuno = true,
                                callbackOTT = { token ->
                                    token?.let { ott ->
                                        // Call your backend: POST /v1/payments
                                        // with { payment_method: { token: ott }, checkout_session: ... }
                                        createPayment(ott, checkoutSession!!)
                                        
                                        // Required for async payment methods
                                        continuePayment()
                                    }
                                }
                            )
                        },
                        enabled = paymentMethodSelected
                    ) {
                        Text("Pay Now")
                    }
                }
            }
        }
    }
    ```

    **Test with**: Card `4111 1111 1111 1111`, any future date, any CVV

    For a comprehensive overview of all Android SDK parameters, see [Android SDK Common Reference](/docs/sdks/resources/references/android).

    [Complete Android guide →](/docs/sdks/full-checkout/android-payments)
  </Tab>
</Tabs>

## Backend integration

Your backend must implement two API endpoints to work with Yuno:

### 1. Create checkout session

Before displaying the payment UI, your backend creates a checkout session:

* **Endpoint**: `POST https://api-sandbox.y.uno/v1/checkout/sessions`
* **Required**: Customer ID, amount, country
* **Returns**: `checkout_session` ID (used in SDK)
* **Reference**: [Create checkout session API](/reference/checkout-sessions/create-checkout-session)

**Example request**:

```json theme={null}
{
  "country": "US",
  "customer_payer": {
    "id": "customer-123"
  },
  "amount": {
    "currency": "USD",
    "value": "2500"
  }
}
```

### 2. Create payment

In the One-Time Token (OTT) callback, your backend creates the payment:

* **Endpoint**: `POST https://api-sandbox.y.uno/v1/payments`
* **Required**: One-time token (from SDK callback), checkout session
* **Returns**: Payment status and `sdk_action_required` field
* **Reference**: [Create payment API](/reference/payments/create-payment)

**Example request**:

```json theme={null}
{
  "payment_method": {
    "token": "one-time-token-from-sdk"
  },
  "checkout": {
    "session": "checkout-session-id"
  }
}
```

**Important**: If the API response has `sdk_action_required: true`, you must call the SDK's `continuePayment()` method to complete async payment methods (3DS authentication, PIX, bank redirects, etc.).

## Parameters

Primary parameters used in this quickstart:

| Parameter               | Description                                                                                                              |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `publicKey` / `apiKey`  | Your Yuno public API key (frontend). From [Yuno Dashboard](https://dashboard.y.uno/) → **Developers** > **Credentials**. |
| `checkoutSession`       | Checkout session ID returned by your backend (create session endpoint). Required to start payment.                       |
| `countryCode`           | ISO country code for the payment (e.g. `US`, `CO`). See [Country coverage](/docs/sdks/resources/country-coverage).       |
| `elementSelector` (Web) | CSS selector for the element where the payment form is mounted (e.g. `#payment-form`).                                   |

Full parameter reference: [Payment flows (Web)](/docs/sdks/full-checkout/web-payments), [Payment flows (iOS)](/docs/sdks/full-checkout/ios-payments), [Payment flows (Android)](/docs/sdks/full-checkout/android-payments).

## Alternative integration methods

If you need more control over the user interface or specific payment flows, Yuno provides alternative integration methods:

### Lite SDK

A lightweight integration that gives you full control over the payment method display while Yuno handles the secure payment processing.

* [Web Implementation](/docs/sdks/lite-web/payment)
* [Android Implementation](/docs/sdks/lite-android/checkout)
* [iOS Implementation](/docs/sdks/lite-ios/checkout)

### Secure Fields

Build your own payment forms from scratch using our UI components for maximum customization (Web Only).

* [Secure Fields Guide](/docs/sdks/customization/secure-fields/index)

## Test cards

| Card Number         | Scenario      |
| ------------------- | ------------- |
| 4111 1111 1111 1111 | Success       |
| 4000 0000 0000 0002 | Declined      |
| 4000 0000 0000 3220 | 3DS Challenge |