---
title: SDK Integration Best Practice
slug: sdks/integration-best-practices
excerpt: Learn the best practices to follow before beginning with the SDK integration.
hidden: false
sidebar_order: 2
metadata:
  title: SDK Best Practices – Pine Labs Online Payments
  description: >-
    Learn SDK integration best practices for Pine Labs Online payment solutions.
    Improve security, performance, reliability, and user experience across web,
    Android, and iOS payment integrations.
---

[block:html]
{
  "html": "<style>\n\n/* Main Container */\n.content-container {\n    max-width: 80rem;\n    margin: 0 auto;\n}\n\n/* Section Styles */\n.section {\n    margin-bottom: 3rem;\n}\n\n.section-title {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: #0f172a;\n    margin-bottom: 1.5rem;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    margin-bottom: 1.5rem;\n}\n\n.section-icon {\n    width: 1.5rem;\n    height: 1.5rem;\n}\n\n.text-blue {\n    color: #2563eb;\n}\n\n.text-indigo {\n    color: #4f46e5;\n}\n\n.text-violet {\n    color: #7c3aed;\n}\n\n/* Cards Container */\n.cards-container {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n}\n\n/* Practice Card */\n.practice-card {\n    background-color: #ffffff;\n    border-radius: 0.75rem;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    border: 1px solid #e2e8f0;\n    padding: 1.5rem;\n    transition: box-shadow 0.2s ease;\n}\n\n.practice-card:hover {\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n.card-content {\n    display: flex;\n    align-items: flex-start;\n    gap: 1rem;\n}\n\n.icon-wrapper {\n    padding: 0.75rem;\n    border-radius: 0.5rem;\n    flex-shrink: 0;\n\t\tmargin-top: 10px;\n}\n\n.icon {\n    width: 1.25rem;\n    height: 1.25rem;\n}\n\n.icon-purple {\n    background-color: #D0F6E5;\n    color: #003434;\n}\n\n.icon-green {\n    background-color: #D0F6E5;\n    color: #003434;\n}\n\n.icon-cyan {\n    background-color: #D0F6E5;\n    color: #003434;\n}\n\n.icon-red {\n    background-color: #D0F6E5;\n    color: #003434;\n}\n\n.icon-amber {\n    background-color: #D0F6E5;\n    color: #003434;\n}\n\n.card-text {\n    flex: 1;\n}\n\n.card-title {\n    font-weight: 600;\n    color: #0f172a;\n    margin-bottom: 0.5rem;\n}\n\n.card-description {\n    color: #334155;\n}\n\n.card-description p {\n    line-height: 1.625;\n}\n\n.mt-2 {\n    margin-top: 0.5rem;\n}\n\n.text-muted {\n    color: #475569;\n}\n\n.italic {\n    font-style: italic;\n}\n\n/* Info Box */\n.info-box {\n    background-color: #ffffff;\n    border-radius: 0.75rem;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    border: 1px solid #e2e8f0;\n    padding: 1.5rem;\n    margin-bottom: 1.5rem;\n}\n\n.info-text {\n    color: #334155;\n    margin-bottom: 1rem;\n}\n\n.info-text.no-margin {\n    margin-bottom: 0;\n}\n\n/* Two Column Grid */\n.two-column-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1.5rem;\n    margin-bottom: 2rem;\n}\n\n@media (min-width: 768px) {\n    .two-column-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n.column-card {\n    background-color: #ffffff;\n    border-radius: 0.75rem;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    border: 1px solid #e2e8f0;\n    padding: 1.5rem;\n}\n\n.column-header {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n}\n\n.small-icon {\n    width: 1.25rem;\n    height: 1.25rem;\n\t\tmargin-top: 4px;\n}\n\n.text-green {\n    color: #16a34a;\n}\n\n.text-red {\n    color: #dc2626;\n}\n\n.column-title {\n    font-weight: 600;\n    color: #0f172a;\n}\n\n.column-subtitle {\n    font-size: 0.875rem;\n    color: #475569;\n    margin-bottom: 1rem;\n}\n\n.entry-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.entry-item {\n    display: flex;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n    color: #334155;\n}\n\n.entry-icon {\n    width: 1rem;\n    height: 1rem;\n    flex-shrink: 0;\n\t\tmargin-top: 4px;\n}\n\n.column-footer {\n    font-size: 0.875rem;\n    color: #64748b;\n    margin-top: 1rem;\n    font-style: italic;\n}\n\n/* Warning Box */\n.warning-box {\n    background-color: #fffbeb;\n    border: 1px solid #fcd34d;\n    border-radius: 0.75rem;\n    padding: 1.5rem;\n}\n\n.warning-content {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n}\n\n.warning-icon {\n    width: 1.25rem;\n    height: 1.25rem;\n    color: #d97706;\n    margin-top: 0.125rem;\n    flex-shrink: 0;\n\t\tmargin-top: 15px;\n}\n\n.warning-title {\n    font-weight: 600;\n    color: #78350f;\n    margin-bottom: 0.5rem;\n}\n\n.warning-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 0.375rem;\n    color: #334155;\n}\n\n.warning-item {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.bullet {\n    width: 0.375rem;\n    height: 0.375rem;\n    background-color: #003434;\n    border-radius: 50%;\n}\n\n/* Ownership Container */\n.ownership-container {\n    background-color: #ffffff;\n    border-radius: 0.75rem;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    border: 1px solid #e2e8f0;\n    overflow: hidden;\n}\n\n.ownership-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n    .ownership-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n.ownership-section {\n    padding: 1.5rem;\n    border-bottom: 1px solid #e2e8f0;\n}\n\n@media (min-width: 768px) {\n    .ownership-section {\n        border-bottom: none;\n    }\n    \n    .ownership-section:first-child {\n        border-right: 1px solid #e2e8f0;\n    }\n}\n\n.ownership-title {\n    font-weight: 600;\n    color: #0f172a;\n    margin-bottom: 0.75rem;\n}\n\n.ownership-text {\n    color: #334155;\n}\n\n.ownership-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    color: #334155;\n}\n\n.ownership-item {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.ownership-bullet {\n    width: 0.375rem;\n    height: 0.375rem;\n    background-color: #003434;\n    border-radius: 50%;\n}\n\n.ownership-footer {\n    background-color: #eff6ff;\n    border-top: 1px solid: #bfdbfe;\n    padding: 1rem;\n}\n\n.ownership-footer-text {\n    font-size: 0.875rem;\n    color: #1e3a8a;\n}\n\n/* Rules Container */\n.rules-container {\n    background-color: #ffffff;\n    border-radius: 0.75rem;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    border: 1px solid #e2e8f0;\n    padding: 1.5rem;\n}\n\n.rules-list {\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n}\n\n.rule-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 1rem;\n}\n\n.rule-number {\n    flex-shrink: 0;\n    width: 2rem;\n    height: 2rem;\n    border-radius: 50%;\n    background-color: #003434;\n    color: #fff;\n    font-weight: 600;\n    font-size: 0.875rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\t\tmargin-top: 16px;\n}\n\n.rule-text {\n    color: #334155;\n    padding-top: 0.25rem;\n}\n\n</style>"
}
[/block]

## Key Best Practices

[block:html]
{
  "html": "    <div class=\"content-container\">\n        \n        <!-- Core Best Practices -->\n        <section class=\"section\">\n            <div class=\"cards-container\">\n                <!-- Single SDK Initialization -->\n                <div class=\"practice-card\">\n                    <div class=\"card-content\">\n                        <div class=\"icon-wrapper icon-purple\">\n                            <svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"16 18 22 12 16 6\"></polyline>\n                                <polyline points=\"8 6 2 12 8 18\"></polyline>\n                            </svg>\n                        </div>\n                        <div class=\"card-text\">\n                            <h3 class=\"card-title\">Use a Single SDK Initialization</h3>\n                            <div class=\"card-description\">\n                                <p>Initialize the SDK only once during your app lifecycle. Re-initializing or integrating the SDK multiple times can lead to unexpected behaviour or runtime errors.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Swift & iOS Compatibility -->\n                <div class=\"practice-card\">\n                    <div class=\"card-content\">\n                        <div class=\"icon-wrapper icon-green\">\n                            <svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>\n                                <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>\n                            </svg>\n                        </div>\n                        <div class=\"card-text\">\n                            <h3 class=\"card-title\">Match Swift & iOS Compatibility</h3>\n                            <div class=\"card-description\">\n                                <p>The SDK is built in Swift 5. Ensure your app's Swift version matches or is compatible (Swift 5 or later) to avoid compile-time or runtime issues.</p>\n                                <p class=\"mt-2\">Keep your iOS deployment target up-to-date so that all required frameworks work without build errors.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Network & Security -->\n                <div class=\"practice-card\">\n                    <div class=\"card-content\">\n                        <div class=\"icon-wrapper icon-cyan\">\n                            <svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <path d=\"M5 12.55a11 11 0 0 1 14.08 0\"></path>\n                                <path d=\"M1.42 9a16 16 0 0 1 21.16 0\"></path>\n                                <path d=\"M8.53 16.11a6 6 0 0 1 6.95 0\"></path>\n                                <line x1=\"12\" y1=\"20\" x2=\"12.01\" y2=\"20\"></line>\n                            </svg>\n                        </div>\n                        <div class=\"card-text\">\n                            <h3 class=\"card-title\">Network & Security Configuration</h3>\n                            <div class=\"card-description\">\n                                <p>If network calls fail in testing (e.g., due to SSL or Apple ATS), allowlist required domains and configure App Transport Security (ATS) properly to prevent blocked requests.</p>\n                                <p class=\"mt-2 text-muted italic\">This is a common issue when testing in restricted environments like simulators or corporate networks.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- API Keys Security -->\n                <div class=\"practice-card\">\n                    <div class=\"card-content\">\n                        <div class=\"icon-wrapper icon-red\">\n                            <svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\n                                <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\n                            </svg>\n                        </div>\n                        <div class=\"card-text\">\n                            <h3 class=\"card-title\">Handle API Keys Securely</h3>\n                            <div class=\"card-description\">\n                                <p><strong>Do not hardcode API keys in the app bundle.</strong> Generate and supply keys securely from your backend.</p>\n                                <p class=\"mt-2\">This reduces exposure of sensitive keys and prevents misuse.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Keep SDK Updated -->\n                <div class=\"practice-card\">\n                    <div class=\"card-content\">\n                        <div class=\"icon-wrapper icon-amber\">\n                            <svg class=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <polyline points=\"23 4 23 10 17 10\"></polyline>\n                                <path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"></path>\n                            </svg>\n                        </div>\n                        <div class=\"card-text\">\n                            <h3 class=\"card-title\">Keep SDK Updated</h3>\n                            <div class=\"card-description\">\n                                <p>Regularly update to the latest SDK version can be easily done by right clicking on the package name and clicking on Update Package.</p>\n                                <p class=\"mt-2\">This includes security updates, new payment methods, and compatibility fixes.</p>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n</div>\n        "
}
[/block]

## Recommended Way to Start the SDK

[block:html]
{
  "html": "<div class=\"content-container\">\n\n<!-- Recommended Way to Start the SDK -->\n        <section class=\"section\">            \n            <div class=\"info-box\">\n                <p class=\"info-text\">\n                    Start the SDK from a <strong>fully presented, visible view controller</strong> that is part of your app's normal navigation flow.\n                </p>\n                <p class=\"info-text\">\n                    Trigger the SDK launch via a user-initiated action, such as tapping a <strong>\"Pay Now\"</strong> button.\n                </p>\n                <p class=\"info-text no-margin\">\n                    Once launched, the SDK manages its entire internal navigation using its own navigation stack.\n                </p>\n            </div>\n\n            <!-- Ideal Entry Points -->\n            <div class=\"two-column-grid\">\n                <div class=\"column-card\">\n                    <div class=\"column-header\">\n                        <svg class=\"small-icon text-green\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>\n                            <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>\n                        </svg>\n                        <h3 class=\"column-title\">Ideal Entry Points</h3>\n                    </div>\n                    <p class=\"column-subtitle\">The SDK should be started from:</p>\n                    <ul class=\"entry-list\">\n                        <li class=\"entry-item\">\n                            <svg class=\"entry-icon text-green\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>\n                                <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>\n                            </svg>\n                            <span>Checkout screen</span>\n                        </li>\n                        <li class=\"entry-item\">\n                            <svg class=\"entry-icon text-green\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>\n                                <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>\n                            </svg>\n                            <span>Order summary screen</span>\n                        </li>\n                        <li class=\"entry-item\">\n                            <svg class=\"entry-icon text-green\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>\n                                <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>\n                            </svg>\n                            <span>Payment selection screen</span>\n                        </li>\n                    </ul>\n                    <p class=\"column-footer\">\n                        These screens are stable, full-screen, and suitable for presenting the SDK.\n                    </p>\n                </div>\n\n                <div class=\"column-card\">\n                    <div class=\"column-header\">\n                        <svg class=\"small-icon text-red\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n                            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n                        </svg>\n                        <h3 class=\"column-title\">What to Avoid</h3>\n                    </div>\n                    <p class=\"column-subtitle\">Do not start the SDK from:</p>\n                    <ul class=\"entry-list\">\n                        <li class=\"entry-item\">\n                            <svg class=\"entry-icon text-red\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n                                <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n                            </svg>\n                            <span>Alerts (UIAlertController)</span>\n                        </li>\n                        <li class=\"entry-item\">\n                            <svg class=\"entry-icon text-red\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n                                <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n                            </svg>\n                            <span>Bottom sheets or half sheets (.pageSheet)</span>\n                        </li>\n                        <li class=\"entry-item\">\n                            <svg class=\"entry-icon text-red\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n                                <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n                            </svg>\n                            <span>Popups or transient modals</span>\n                        </li>\n                        <li class=\"entry-item\">\n                            <svg class=\"entry-icon text-red\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n                                <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n                            </svg>\n                            <span>Views that are already being presented or dismissed</span>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n\n            <!-- Consequences -->\n            <div class=\"warning-box\">\n                <div class=\"warning-content\">\n                    <svg class=\"warning-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"></path>\n                        <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\n                        <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n                    </svg>\n                    <div>\n                        <h4 class=\"warning-title\">\n                            Launching the SDK from incorrect contexts can cause:\n                        </h4>\n                        <ul class=\"warning-list\">\n                            <li class=\"warning-item\">\n                                <span class=\"bullet\"></span>\n                                Presentation warnings\n                            </li>\n                            <li class=\"warning-item\">\n                                <span class=\"bullet\"></span>\n                                Broken navigation transitions\n                            </li>\n                            <li class=\"warning-item\">\n                                <span class=\"bullet\"></span>\n                                Improper SDK dismissal\n                            </li>\n                            <li class=\"warning-item\">\n                                <span class=\"bullet\"></span>\n                                Unexpected runtime behavior\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </section>\n\t\t\t\t</div>"
}
[/block]

## Navigation Ownership

[block:html]
{
  "html": "<div class=\"content-container\">\n\n        <!-- Navigation Ownership -->\n        <section class=\"section\">            \n            <div class=\"ownership-container\">\n                <div class=\"ownership-grid\">\n                    <div class=\"ownership-section\">\n                        <h4 class=\"ownership-title\">Merchant App Responsibility</h4>\n                        <p class=\"ownership-text\">The merchant app is responsible <strong>only for presenting the SDK</strong>.</p>\n                    </div>\n                    <div class=\"ownership-section bg-light\">\n                        <h4 class=\"ownership-title\">SDK Internal Handling</h4>\n                        <ul class=\"ownership-list\">\n                            <li class=\"ownership-item\">\n                                <span class=\"ownership-bullet\"></span>\n                                Creates its own navigation controller\n                            </li>\n                            <li class=\"ownership-item\">\n                                <span class=\"ownership-bullet\"></span>\n                                Pushes all SDK screens\n                            </li>\n                            <li class=\"ownership-item\">\n                                <span class=\"ownership-bullet\"></span>\n                                Handles retry and error flows\n                            </li>\n                            <li class=\"ownership-item\">\n                                <span class=\"ownership-bullet\"></span>\n                                Dismisses itself when the flow ends\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n                <div class=\"ownership-footer\">\n                    <p class=\"ownership-footer-text\">\n                        <strong>Important:</strong> Merchants should not push SDK screens or attempt to control SDK navigation.\n                    </p>\n                </div>\n            </div>\n        </section>\n</div>"
}
[/block]

## SDK Initialization Rules

[block:html]
{
  "html": "<div class=\"content-container\">\n\n<!-- SDK Initialization Rules -->\n        <section class=\"section\">            \n            <div class=\"rules-container\">\n                <ul class=\"rules-list\">\n                    <li class=\"rule-item\">\n                        <div class=\"rule-number\">1</div>\n                        <p class=\"rule-text\">Initialize and launch the SDK only once per payment attempt.</p>\n                    </li>\n                    <li class=\"rule-item\">\n                        <div class=\"rule-number\">2</div>\n                        <p class=\"rule-text\">Ensure a valid order token is available before starting the SDK.</p>\n                    </li>\n                    <li class=\"rule-item\">\n                        <div class=\"rule-number\">3</div>\n                        <p class=\"rule-text\">Avoid multiple parallel SDK launches.</p>\n                    </li>\n                </ul>\n            </div>\n        </section>\n    </div>\n"
}
[/block]
