dependencies {
    implementation("io.conekta:conekta-elements-compose:0.2.0-beta.2")
}

import coil3.ImageLoader
import coil3.SingletonImageLoader
import io.conekta.compose.ConektaImageLoader

class MyApp : Application(), SingletonImageLoader.Factory {
    override fun newImageLoader(context: Context): ImageLoader {
        return ConektaImageLoader.newImageLoader(context)
    }
}

<application
    android:name=".MyApp"
    ... >

import io.conekta.compose.tokenizer.ConektaTokenizer
import io.conekta.elements.tokenizer.models.TokenizerConfig
import io.conekta.elements.tokenizer.models.TokenizerError

@Composable
fun PaymentScreen() {
    ConektaTokenizer(
        config = TokenizerConfig(
            publicKey = "key_xxxxx",
            merchantName = "Mi Tienda",
            collectCardholderName = true,
        ),
        onSuccess = { result ->
            val token = result.token
            val lastFour = result.lastFour
        },
        onError = { error ->
            when (error) {
                is TokenizerError.ValidationError -> {}
                is TokenizerError.NetworkError -> {}
                is TokenizerError.ApiError -> {}
            }
        },
    )
}

let package = Package(
    ...
    targets: [
        .binaryTarget(
            name: "composeKit",
            url: "https://github.com/conekta/conekta-elements/releases/download/0.2.0-beta.2/composeKit.xcframework.zip",
            checksum: "e5fc1a7030756eea3f8cc4c229c178baac9369e4c3ba3238274f03824fdb02b2"
        ),
        .target(
            name: "YourTarget",
            dependencies: ["composeKit"]
        )
    ]
)

import SwiftUI
import composeKit

struct PaymentView: View {
    var body: some View {
        ConektaTokenizerView(
            config: TokenizerConfig(
                publicKey: "key_xxxxx",
                merchantName: "Mi Tienda",
                collectCardholderName: true
            ),
            onSuccess: { result in
                print("Token: \(result.token)")
            },
            onError: { error in
                print(error.localizedDescription)
            }
        )
        .ignoresSafeArea(.container, edges: .bottom)
    }
}

curl -X POST https://api.conekta.io/orders \
  -H "Accept: application/vnd.conekta-v2.2.0+json" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer key_private_xxxxx" \
  -d '{
    "currency": "MXN",
    "customer_info": {
      "name": "Juan Pérez",
      "email": "[email protected]",
      "phone": "+525512345678"
    },
    "line_items": [{
      "name": "Producto",
      "unit_price": 10000,
      "quantity": 1
    }],
    "charges": [{
      "payment_method": {
        "type": "card",
        "token_id": "tok_2o3Nk5FPjr7Ac8X9z"
      }
    }]
  }'

npm install conekta-elements-react-native

cd ios && pod install

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ConektaTokenizer } from 'conekta-elements-react-native';
import type { TokenResult, TokenizerError } from 'conekta-elements-react-native';

export default function CheckoutScreen() {
  const [token, setToken] = useState('');

  function handleSuccess(result: TokenResult) {
    console.log('Token:', result.token, 'Last four:', result.lastFour);
    setToken(result.token);
  }

  function handleError(error: TokenizerError) {
    console.error(`[${error.type}] ${error.message}`);
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ConektaTokenizer
        config={{
          publicKey: 'key_XXXXXXXXXXXXXXXX',
          merchantName: 'Mi Tienda',
        }}
        onSuccess={handleSuccess}
        onError={handleError}
        style={{ flex: 1 }}
      />
    </SafeAreaView>
  );
}

interface TokenResult {
  token: string;     // Token de la tarjeta
  lastFour: string;  // Últimos cuatro dígitos de la tarjeta
}

type TokenizerError =
  | { type: 'ValidationError'; message: string }  // Error de validación del formulario
  | { type: 'NetworkError'; message: string }      // Error de conectividad
  | { type: 'ApiError'; code: string; message: string }  // Error de la API de Conekta

npx expo install expo-dev-client

# Build local
npx expo run:ios
npx expo run:android

# O build con EAS
eas build --profile development