Kotlin Multiplatform payment UI library for Android, iOS, and Web. Provides card tokenization components built on top of the Conekta API.

• Modules
• Installation
  • Android
  • iOS
  • Web
• Public Key
• Usage
  • Android Usage
  • iOS Usage
  • Web Usage
• Development
  • Prerequisites
  • Project Structure
  • Build Commands
  • Running Tests
  • Linting
  • Publishing
• CI Pipeline
• Examples
• License

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

This includes conekta-elements-shared transitively. No need to add both.

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

Artifacts are published to Maven Central. No additional repository configuration required.

For GitHub Packages (pre-release builds):

// settings.gradle.kts
dependencyResolutionManagement {
    repositories {
        maven {
            url = uri("https://maven.pkg.github.com/conekta/conekta-elements")
            credentials {
                username = providers.gradleProperty("gpr.user").orNull ?: System.getenv("GP_USER")
                password = providers.gradleProperty("gpr.token").orNull ?: System.getenv("GP_TOKEN")
            }
        }
    }
}

The compose module uses Coil 3 to load card brand icons from Conekta's CDN. Initialize it in your Application class:

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)
    }
}

Register in AndroidManifest.xml:

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

The compose module produces composeKit.xcframework, distributed as a zip asset in every GitHub release.

Add the package dependency in Xcode via File > Add Package Dependencies using the repository URL, or add a binary target in your Package.swift:

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"]
        )
    ]
)

The checksum is available in checksum.txt included in the release assets.

1. Download composeKit.xcframework.zip from the latest release
2. Unzip and drag composeKit.xcframework into your Xcode project
3. In your target > General > Frameworks, Libraries, and Embedded Content, set it to Embed & Sign

• Xcode 15+
• iOS 15+

npm install @conekta/elements

See webApp/README.md for full documentation.

All platforms require a Conekta public key to tokenize cards. Get yours from the Conekta Dashboard:

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 = "My Store",
            collectCardholderName = true,
        ),
        onSuccess = { result ->
            println("Token: ${result.token}")
            println("Last four: ${result.lastFour}")
        },
        onError = { error ->
            when (error) {
                is TokenizerError.ValidationError -> println("Validation: ${error.message}")
                is TokenizerError.NetworkError -> println("Network: ${error.message}")
                is TokenizerError.ApiError -> println("API ${error.code}: ${error.message}")
            }
        },
    )
}

import SwiftUI
import composeKit

struct ContentView: View {
    @State private var showingAlert = false
    @State private var alertMessage = ""

    var body: some View {
        ConektaTokenizerView(
            config: TokenizerConfig(
                publicKey: "key_xxxxx",
                merchantName: "My Store",
                collectCardholderName: true
            ),
            onSuccess: { result in
                alertMessage = "Token: \(result.token)"
                showingAlert = true
            },
            onError: { error in
                if let apiError = error as? TokenizerError.TokenizerApiError {
                    alertMessage = "\(apiError.code): \(apiError.message)"
                } else if let networkError = error as? TokenizerError.TokenizerNetworkError {
                    alertMessage = networkError.message
                } else {
                    alertMessage = "Payment could not be processed."
                }
                showingAlert = true
            }
        )
    }
}

import { ConektaProvider, ExpressCheckout } from '@conekta/elements';

function App() {
  return (
    <ConektaProvider publicKey="key_xxx" environment="sandbox">
      <ExpressCheckout
        amount={10000}
        currency="MXN"
        onPaymentCompleted={(result) => console.log(result)}
      />
    </ConektaProvider>
  );
}

Install tooling:

# Java (via SDKMAN)
sdk env install

# Node.js (via nvm)
nvm install

conekta-elements/
├── shared/                 # Core KMP module (Android, iOS, JS)
│   └── src/
│       ├── commonMain/     # Shared business logic
│       │   └── kotlin/io/conekta/elements/
│       │       ├── tokenizer/
│       │       │   ├── api/           # HTTP client + API service
│       │       │   ├── crypto/        # AES + RSA encryption (expect/actual)
│       │       │   ├── formatters/    # Card number/CVV/expiry formatters
│       │       │   ├── models/        # TokenizerConfig, TokenResult, TokenizerError
│       │       │   └── validators/    # Form validation (Luhn, expiry, CVV)
│       │       └── assets/            # CDN URLs for card brand images
│       ├── androidMain/    # JCE crypto implementation
│       ├── iosMain/        # CommonCrypto/Security implementation
│       ├── jsMain/         # crypto-js + jsencrypt implementation
│       └── commonTest/     # Shared tests
├── compose/                # Compose Multiplatform UI module (Android, iOS)
│   └── src/
│       ├── commonMain/     # Shared composables
│       │   └── kotlin/io/conekta/compose/
│       │       ├── tokenizer/     # ConektaTokenizer composable
│       │       ├── components/    # TextField, CardBrandIcon, etc.
│       │       ├── theme/         # Colors, fonts
│       │       └── i18n/          # Localization (ES/EN)
│       └── androidHostTest/       # Robolectric UI tests
├── webApp/                 # React + TypeScript web library
├── examples/               # Android + iOS example apps
│   ├── android/
│   └── ios/
├── buildSrc/               # Custom Gradle tasks (string validation, resources sync)
├── Package.swift           # SPM binary target config
├── Makefile                # Common build commands
└── .github/workflows/      # CI pipeline

All common tasks are available via make:

# Build
make build                  # Clean build all modules
make build-ci               # Build with configuration cache (CI)
make build-XCFramework      # Build iOS XCFramework

# Test
make shared-test            # Run shared module tests (Android, iOS, JS) + coverage
make compose-test           # Run compose UI tests (Robolectric) + coverage
make ios-test               # Run iOS simulator tests only

# Lint
make lint-check             # Check code style (ktlint)
make lint-fix               # Auto-fix code style issues

# Publish
make publish-local          # Publish to Maven Local (for local development)
make publish                # Publish to remote repositories

# JS
make js-build               # Build JS browser distribution

Or use Gradle directly:

# Compile specific targets
./gradlew :shared:compileKotlinIosSimulatorArm64
./gradlew :shared:compileKotlinJs
./gradlew :compose:compileKotlinIosArm64

# Run specific test suites
./gradlew :shared:testAndroidHostTest
./gradlew :shared:jsNodeTest
./gradlew :shared:iosSimulatorArm64Test
./gradlew :compose:testAndroidHostTest

# String resource validation
./gradlew :compose:validateStringsOrder
./gradlew :compose:validateStringsSpelling

# Coverage reports
./gradlew :shared:koverXmlReport
./gradlew :compose:koverXmlReport

# All tests across all platforms
make shared-test            # shared: Android + iOS + JS + Kover coverage
make compose-test           # compose: Robolectric Android UI tests + Kover coverage

# Quick verification (compile only, no tests)
./gradlew :shared:compileKotlinIosSimulatorArm64 :shared:compileKotlinJs :compose:compileKotlinIosArm64

# Full local validation (same as CI)
make lint-check && make shared-test && make compose-test

Coverage reports are generated at:

• shared/build/reports/kover/ (XML + HTML)
• compose/build/reports/kover/ (XML + HTML)

The project uses ktlint with the following configuration (.editorconfig):

• Max line length: 120
• Indent: 4 spaces
• Trailing commas: allowed
• @Composable functions: exempt from naming rules

make lint-check   # Verify code style
make lint-fix     # Auto-fix issues

make publish-local

This publishes both shared and compose modules to ~/.m2/repository/. Consumer apps can use it by adding mavenLocal() to their repositories.

Handled by the deploy-maven-central.yml workflow on release. Requires signing keys configured as repository secrets.

Handled by the deploy.yml workflow. Requires GP_USER and GP_TOKEN environment variables.

make build-XCFramework

Produces compose/build/XCFrameworks/release/composeKit.xcframework/ with Compose resources embedded in each slice.

The CI runs on every push to main and on pull requests (.github/workflows/ci.yml):

Working example apps are available in the examples/ directory:

See examples/README.md for detailed setup instructions.

MIT