{"id":5870,"date":"2025-05-30T11:38:51","date_gmt":"2025-05-30T03:38:51","guid":{"rendered":"https:\/\/syscomm.asia\/staging\/?page_id=5870"},"modified":"2026-08-18T18:10:23","modified_gmt":"2026-08-18T10:10:23","slug":"api-intergration","status":"publish","type":"page","link":"https:\/\/syscomm.com.my\/ms\/api-intergration\/","title":{"rendered":"Integrasi API"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5870\" class=\"elementor elementor-5870\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfd92ce e-flex e-con-boxed e-con e-parent\" data-id=\"bfd92ce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60f6ada elementor-widget elementor-widget-html\" data-id=\"60f6ada\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--\r\nCOPYRIGHT-SAFE ASSET VERSION \u2014 API INTEGRATION MALAYSIA\r\nPhotography sources: Unsplash only (commercial-use stock source)\r\nIcons \/ diagrams \/ arrows \/ nodes: original CSS \/ text symbols created in this HTML\r\nNo Google Images, Pinterest, Agoda, theme-demo or third-party icon CDN assets used.\r\nStandard SYSCOMM width: 88.5%\r\n-->\r\n<!--\r\nSYSCOMM \u2014 API INTEGRATION & CUSTOM DEVELOPMENT MALAYSIA\r\nUNIQUE SYSTEMS \/ DATA-FLOW EDITORIAL DESIGN\r\nSTANDARD 88.5% WIDE SCREEN \/ ELEMENTOR SAFE \/ SEO-FRIENDLY\r\n\r\nPaste this entire block into ONE Elementor HTML Widget.\r\n\r\nRecommended Rank Math \/ AIOSEO\r\nSEO Title:\r\nAPI Integration Malaysia | Custom API & System Integration | SYSCOMM\r\n\r\nMeta Description:\r\nAPI integration services in Malaysia by SYSCOMM. Connect websites, ecommerce and business systems with third-party APIs, custom APIs, payment integration and data automation.\r\n\r\nPrimary focus:\r\nAPI integration Malaysia\r\n\r\nSecondary topics used naturally:\r\nAPI integration services Malaysia\r\ncustom API development Malaysia\r\nthird party API integration\r\nweb API integration\r\nsystem integration Malaysia\r\npayment API integration\r\necommerce API integration\r\nAPI developer Malaysia\r\n-->\r\n\r\n<div id=\"scm-api\">\r\n\r\n  <!-- =====================================================\r\n       HERO \u2014 LIVE SYSTEM CONNECTION MAP\r\n       No repeated hero arrangement \/ no repeated images\r\n       ===================================================== -->\r\n  <section class=\"api-hero\">\r\n\r\n    <div class=\"api-hero-copy\">\r\n      <div class=\"api-kicker\">API INTEGRATION \/ CUSTOM DEVELOPMENT \/ MALAYSIA<\/div>\r\n\r\n      <h1>API Integration Malaysia: Connect Your Website to the Systems Your Business Uses.<\/h1>\r\n\r\n      <p class=\"api-lead\">\r\n        SYSCOMM develops API integrations and custom web connections that allow\r\n        websites, ecommerce platforms and business systems to exchange data and\r\n        trigger useful actions automatically.\r\n      <\/p>\r\n\r\n      <p>\r\n        From payment gateways and customer accounts to accounting, inventory,\r\n        product data, business workflows and external services, the first step is\r\n        understanding what needs to move between systems, when it should move and\r\n        what should happen when something goes wrong.\r\n      <\/p>\r\n\r\n      <div class=\"api-actions\">\r\n        <a href=\"\/contact\/\" class=\"api-link\">Discuss an integration \u2197<\/a>\r\n        <a href=\"#api-assessment\" class=\"api-link quiet\">Check project readiness \u2193<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n\r\n    <div class=\"api-network\" aria-label=\"Animated API system integration diagram\">\r\n\r\n      <svg class=\"api-network-lines\" viewBox=\"0 0 900 650\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n        <path d=\"M130 155 C280 155,270 320,445 320\" \/>\r\n        <path d=\"M760 120 C610 120,630 300,445 320\" \/>\r\n        <path d=\"M115 510 C280 510,290 345,445 320\" \/>\r\n        <path d=\"M765 505 C615 505,610 350,445 320\" \/>\r\n        <path d=\"M445 320 C450 210,450 175,450 90\" \/>\r\n        <path d=\"M445 320 C450 430,450 465,450 575\" \/>\r\n      <\/svg>\r\n\r\n      <div class=\"api-packet packet-1\"><\/div>\r\n      <div class=\"api-packet packet-2\"><\/div>\r\n      <div class=\"api-packet packet-3\"><\/div>\r\n      <div class=\"api-packet packet-4\"><\/div>\r\n\r\n      <div class=\"api-node core\">\r\n        <small>YOUR<\/small>\r\n        <strong>WEBSITE<\/strong>\r\n        <span>API LAYER<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"api-node n1\">\r\n        <small>01<\/small>\r\n        <strong>PAYMENT<\/strong>\r\n        <span>Gateway<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"api-node n2\">\r\n        <small>02<\/small>\r\n        <strong>ERP \/ ACCOUNTING<\/strong>\r\n        <span>Business Data<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"api-node n3\">\r\n        <small>03<\/small>\r\n        <strong>ECOMMERCE<\/strong>\r\n        <span>Orders \/ Products<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"api-node n4\">\r\n        <small>04<\/small>\r\n        <strong>CRM<\/strong>\r\n        <span>Customer Data<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"api-node n5\">\r\n        <small>05<\/small>\r\n        <strong>AUTH<\/strong>\r\n        <span>Users \/ Access<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"api-node n6\">\r\n        <small>06<\/small>\r\n        <strong>CUSTOM SYSTEM<\/strong>\r\n        <span>Workflow<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"api-network-status\">\r\n        <i><\/i>\r\n        <span>CONNECTED SYSTEMS \/ DATA FLOW \/ AUTOMATION<\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       PROTOCOL STRIP\r\n       ===================================================== -->\r\n  <section class=\"api-protocol api-line\">\r\n    <span>REST API<\/span>\r\n    <span>JSON<\/span>\r\n    <span>WEBHOOKS<\/span>\r\n    <span>OAUTH<\/span>\r\n    <span>PAYMENT<\/span>\r\n    <span>PRODUCT SYNC<\/span>\r\n    <span>ORDER SYNC<\/span>\r\n    <span>AUTHENTICATION<\/span>\r\n    <span>CUSTOM WORKFLOWS<\/span>\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       WHAT API INTEGRATION ACTUALLY SOLVES\r\n       ===================================================== -->\r\n  <section class=\"api-section api-line\">\r\n\r\n    <div class=\"api-heading\">\r\n      <span class=\"api-label\">WHAT API INTEGRATION ACTUALLY DOES<\/span>\r\n      <h2>Move the right data between systems without making people repeat the same work.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"api-problems\">\r\n\r\n      <article>\r\n        <span>01 \/ DATA<\/span>\r\n        <h3>Exchange & Synchronisation<\/h3>\r\n        <p>\r\n          Move products, customers, orders, status updates or other information\r\n          between systems when a supported API or integration method is available.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>02 \/ ACTION<\/span>\r\n        <h3>Trigger Business Processes<\/h3>\r\n        <p>\r\n          An event in one system can trigger an action elsewhere \u2014 for example,\r\n          creating a record, sending data, updating a status or starting a workflow.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>03 \/ VALIDATION<\/span>\r\n        <h3>Verify Data Before It Moves<\/h3>\r\n        <p>\r\n          Integration logic can check required fields, formats, permissions and\r\n          business rules before information is accepted or sent to another service.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>04 \/ ACCESS<\/span>\r\n        <h3>Authentication & User Identity<\/h3>\r\n        <p>\r\n          Supported APIs can help websites work with login systems, user accounts,\r\n          permissions and identity services without rebuilding every capability from\r\n          scratch.\r\n        <\/p>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       DATA PIPELINE \u2014 UNIQUE UI\r\n       ===================================================== -->\r\n  <section class=\"api-pipeline api-line\">\r\n\r\n    <div class=\"api-pipeline-title\">\r\n      <span class=\"api-label\">HOW DATA MOVES<\/span>\r\n      <h2>A reliable integration needs more than an API endpoint.<\/h2>\r\n\r\n      <p>\r\n        The connection has to account for input, validation, authentication,\r\n        transformation, destination rules, responses, errors and recovery.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"pipeline-console\">\r\n\r\n      <div class=\"console-top\">\r\n        <span>INTEGRATION PIPELINE<\/span>\r\n        <div><i><\/i><i><\/i><i><\/i><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"pipeline-flow\">\r\n\r\n        <div class=\"pipe-step\">\r\n          <small>01<\/small>\r\n          <strong>SOURCE<\/strong>\r\n          <span>Website \/ App \/ System<\/span>\r\n        <\/div>\r\n\r\n        <b>\u2192<\/b>\r\n\r\n        <div class=\"pipe-step\">\r\n          <small>02<\/small>\r\n          <strong>AUTH<\/strong>\r\n          <span>Credentials \/ Token<\/span>\r\n        <\/div>\r\n\r\n        <b>\u2192<\/b>\r\n\r\n        <div class=\"pipe-step\">\r\n          <small>03<\/small>\r\n          <strong>VALIDATE<\/strong>\r\n          <span>Rules \/ Required Data<\/span>\r\n        <\/div>\r\n\r\n        <b>\u2192<\/b>\r\n\r\n        <div class=\"pipe-step\">\r\n          <small>04<\/small>\r\n          <strong>TRANSFORM<\/strong>\r\n          <span>Map \/ Format<\/span>\r\n        <\/div>\r\n\r\n        <b>\u2192<\/b>\r\n\r\n        <div class=\"pipe-step\">\r\n          <small>05<\/small>\r\n          <strong>DESTINATION<\/strong>\r\n          <span>External API<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"pipeline-log\">\r\n        <div><span>10:24:07<\/span><b>REQUEST<\/b><em>Product data received<\/em><i>200<\/i><\/div>\r\n        <div><span>10:24:08<\/span><b>VALIDATE<\/b><em>Required fields passed<\/em><i>OK<\/i><\/div>\r\n        <div><span>10:24:08<\/span><b>SYNC<\/b><em>External record updated<\/em><i>200<\/i><\/div>\r\n        <div class=\"warn\"><span>10:24:11<\/span><b>RETRY<\/b><em>External service timeout<\/em><i>WAIT<\/i><\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       USE CASE LANES\r\n       ===================================================== -->\r\n  <section class=\"api-section api-line\">\r\n\r\n    <div class=\"api-heading\">\r\n      <span class=\"api-label\">API INTEGRATION USE CASES<\/span>\r\n      <h2>Connect digital touchpoints to real business workflows.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"api-lanes\">\r\n\r\n      <article class=\"lane-payment\">\r\n        <div class=\"lane-no\">01<\/div>\r\n        <div class=\"lane-title\">\r\n          <span>PAYMENT<\/span>\r\n          <h3>Payment API Integration<\/h3>\r\n        <\/div>\r\n        <p>\r\n          Connect supported payment services to ecommerce or web applications and\r\n          handle transaction responses according to the required workflow.\r\n        <\/p>\r\n        <div class=\"lane-art card-art\" aria-hidden=\"true\">\r\n          <div><\/div><span><\/span><span><\/span>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"lane-commerce\">\r\n        <div class=\"lane-no\">02<\/div>\r\n        <div class=\"lane-title\">\r\n          <span>ECOMMERCE<\/span>\r\n          <h3>Product, Inventory & Order Sync<\/h3>\r\n        <\/div>\r\n        <p>\r\n          Exchange supported product, stock, customer or order information between an\r\n          ecommerce website and another business platform.\r\n        <\/p>\r\n        <div class=\"lane-art boxes-art\" aria-hidden=\"true\">\r\n          <i><\/i><i><\/i><i><\/i><b><\/b>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"lane-account\">\r\n        <div class=\"lane-no\">03<\/div>\r\n        <div class=\"lane-title\">\r\n          <span>ACCOUNT \/ CRM<\/span>\r\n          <h3>Customer & Account Integration<\/h3>\r\n        <\/div>\r\n        <p>\r\n          Pass enquiry, registration, account or customer data to supported systems\r\n          while applying the required mapping and validation logic.\r\n        <\/p>\r\n        <div class=\"lane-art user-art\" aria-hidden=\"true\">\r\n          <i><\/i><div><\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"lane-custom\">\r\n        <div class=\"lane-no\">04<\/div>\r\n        <div class=\"lane-title\">\r\n          <span>CUSTOM WORKFLOW<\/span>\r\n          <h3>Internal & Third-Party System Integration<\/h3>\r\n        <\/div>\r\n        <p>\r\n          Connect a website to custom business systems when documentation, access and\r\n          an appropriate interface are available.\r\n        <\/p>\r\n        <div class=\"lane-art nodes-art\" aria-hidden=\"true\">\r\n          <i><\/i><i><\/i><i><\/i><span><\/span>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       REAL IMAGES \u2014 ONLY 3, NEW & TOPIC-RELEVANT\r\n       ===================================================== -->\r\n  <section class=\"api-visual-story api-line\">\r\n\r\n    <div class=\"api-story-copy\">\r\n      <span class=\"api-label\">INTEGRATION IS SOFTWARE ENGINEERING<\/span>\r\n\r\n      <h2>The difficult part is usually not sending the first request. It is making the connection dependable.<\/h2>\r\n\r\n      <p>\r\n        APIs can make development faster because existing services can be reused, but\r\n        every external dependency introduces requirements that have to be understood:\r\n        authentication, limits, response formats, error conditions, timeouts, data\r\n        ownership and changes made by the API provider.\r\n      <\/p>\r\n\r\n      <p>\r\n        That is why an integration quotation normally requires documentation and a\r\n        technical review before the real scope can be confirmed.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"api-story-images\">\r\n\r\n      <figure class=\"story-main\">\r\n        <img decoding=\"async\" loading=\"lazy\"\r\n          src=\"https:\/\/images.unsplash.com\/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1600&q=82\"\r\n          alt=\"Digital network connectivity representing API system integration\">\r\n        <figcaption>NETWORK \/ CONNECTION<\/figcaption>\r\n      <\/figure>\r\n\r\n      <figure class=\"story-small one\">\r\n        <img decoding=\"async\" loading=\"lazy\"\r\n          src=\"https:\/\/images.unsplash.com\/photo-1555949963-ff9fe0c870eb?auto=format&fit=crop&w=1200&q=82\"\r\n          alt=\"Software code for API integration development\">\r\n        <figcaption>DEVELOPMENT<\/figcaption>\r\n      <\/figure>\r\n\r\n      <figure class=\"story-small two\">\r\n        <img decoding=\"async\" loading=\"lazy\"\r\n          src=\"https:\/\/images.unsplash.com\/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1200&q=82\"\r\n          alt=\"Technical team planning custom API integration\">\r\n        <figcaption>PLANNING \/ TESTING<\/figcaption>\r\n      <\/figure>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       INTEGRATION TYPES \u2014 ARCHITECTURE MAP\r\n       ===================================================== -->\r\n  <section class=\"api-architecture api-line\">\r\n\r\n    <div class=\"architecture-head\">\r\n      <span class=\"api-label\">API DEVELOPMENT & INTEGRATION SERVICES<\/span>\r\n      <h2>Different connection models for different system requirements.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"architecture-map\">\r\n\r\n      <div class=\"arch-axis vertical\"><\/div>\r\n      <div class=\"arch-axis horizontal\"><\/div>\r\n\r\n      <article class=\"arch-a\">\r\n        <span>01<\/span>\r\n        <h3>Third-Party API Integration<\/h3>\r\n        <p>\r\n          Connect your website or web application to an external service using the\r\n          provider's supported API and documentation.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article class=\"arch-b\">\r\n        <span>02<\/span>\r\n        <h3>Custom API Development<\/h3>\r\n        <p>\r\n          Build an interface for your own application when another authorised system\r\n          needs controlled access to defined data or capabilities.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article class=\"arch-c\">\r\n        <span>03<\/span>\r\n        <h3>First-Party \/ Internal API<\/h3>\r\n        <p>\r\n          Create a structured connection between internal systems or applications\r\n          where a suitable interface does not already exist.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article class=\"arch-d\">\r\n        <span>04<\/span>\r\n        <h3>Webhook & Event Integration<\/h3>\r\n        <p>\r\n          Where supported, events can push information between systems instead of\r\n          requiring one side to repeatedly check for changes.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <div class=\"arch-core\">\r\n        <strong>API<\/strong>\r\n        <span>INTEGRATION LAYER<\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       ASSESSMENT \u2014 PROJECT READINESS\r\n       ===================================================== -->\r\n  <section class=\"api-assessment api-line\" id=\"api-assessment\">\r\n\r\n    <div class=\"assessment-intro\">\r\n      <span class=\"api-label\">BEFORE WE QUOTE<\/span>\r\n\r\n      <h2>What we need to evaluate an API integration project.<\/h2>\r\n\r\n      <p>\r\n        An integration cannot be scoped reliably from the system name alone. Access,\r\n        documentation and the exact data flow determine whether the connection is\r\n        straightforward, restricted or requires additional custom work.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"assessment-list\">\r\n\r\n      <div>\r\n        <span>01<\/span>\r\n        <strong>Which systems need to connect?<\/strong>\r\n        <small>Source + destination<\/small>\r\n      <\/div>\r\n\r\n      <div>\r\n        <span>02<\/span>\r\n        <strong>Is API documentation available?<\/strong>\r\n        <small>Endpoints + methods + examples<\/small>\r\n      <\/div>\r\n\r\n      <div>\r\n        <span>03<\/span>\r\n        <strong>Do you have API credentials or sandbox access?<\/strong>\r\n        <small>Authentication + test environment<\/small>\r\n      <\/div>\r\n\r\n      <div>\r\n        <span>04<\/span>\r\n        <strong>What information needs to move?<\/strong>\r\n        <small>Fields + direction + mapping<\/small>\r\n      <\/div>\r\n\r\n      <div>\r\n        <span>05<\/span>\r\n        <strong>When should data be exchanged?<\/strong>\r\n        <small>Real time + scheduled + event<\/small>\r\n      <\/div>\r\n\r\n      <div>\r\n        <span>06<\/span>\r\n        <strong>What happens when the external service fails?<\/strong>\r\n        <small>Retry + alert + fallback<\/small>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       BLACK RELIABILITY SECTION \u2014 ALL HEADINGS FORCE WHITE\r\n       ===================================================== -->\r\n  <section class=\"api-reliability api-line\">\r\n\r\n    <div class=\"reliability-title\">\r\n      <span>RELIABILITY \/ SECURITY \/ MAINTENANCE<\/span>\r\n\r\n      <h2>An integration is only useful when it behaves predictably in the real world.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"reliability-grid\">\r\n\r\n      <article>\r\n        <span>01<\/span>\r\n        <h3>Authentication<\/h3>\r\n        <p>\r\n          Credentials, tokens and access methods must follow the external provider's\r\n          supported security model.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>02<\/span>\r\n        <h3>Error Handling<\/h3>\r\n        <p>\r\n          Failed requests should be identified and handled according to the business\r\n          impact instead of silently losing data.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>03<\/span>\r\n        <h3>Rate Limits<\/h3>\r\n        <p>\r\n          External APIs may limit request frequency or volume, affecting how and when\r\n          synchronisation can run.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>04<\/span>\r\n        <h3>Logging<\/h3>\r\n        <p>\r\n          Useful logs make troubleshooting easier when a third-party service,\r\n          credential or payload changes.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>05<\/span>\r\n        <h3>Testing<\/h3>\r\n        <p>\r\n          Normal cases, invalid data and relevant failure scenarios should be tested\r\n          before a business-critical integration goes live.\r\n        <\/p>\r\n      <\/article>\r\n\r\n      <article>\r\n        <span>06<\/span>\r\n        <h3>API Changes<\/h3>\r\n        <p>\r\n          Third-party providers can update or deprecate APIs, so integrations may\r\n          require future maintenance even when your own website has not changed.\r\n        <\/p>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       PROCESS \u2014 REQUEST \/ RESPONSE SEQUENCE\r\n       ===================================================== -->\r\n  <section class=\"api-section api-line\">\r\n\r\n    <div class=\"api-heading\">\r\n      <span class=\"api-label\">API INTEGRATION PROCESS<\/span>\r\n      <h2>From business requirement to tested system connection.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"api-sequence\">\r\n\r\n      <div class=\"sequence-column\">\r\n        <strong>BUSINESS<\/strong>\r\n        <span>Requirement<\/span>\r\n        <span>Rules<\/span>\r\n        <span>Acceptance<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"sequence-center\">\r\n\r\n        <article>\r\n          <span>01<\/span>\r\n          <h3>Define the Data Flow<\/h3>\r\n          <p>What moves, from where, to where and why.<\/p>\r\n        <\/article>\r\n\r\n        <article>\r\n          <span>02<\/span>\r\n          <h3>Review the API<\/h3>\r\n          <p>Documentation, authentication, endpoints and limitations.<\/p>\r\n        <\/article>\r\n\r\n        <article>\r\n          <span>03<\/span>\r\n          <h3>Map the Rules<\/h3>\r\n          <p>Fields, formats, validation, transformations and errors.<\/p>\r\n        <\/article>\r\n\r\n        <article>\r\n          <span>04<\/span>\r\n          <h3>Develop & Test<\/h3>\r\n          <p>Implement the integration and verify relevant scenarios.<\/p>\r\n        <\/article>\r\n\r\n        <article>\r\n          <span>05<\/span>\r\n          <h3>Deploy & Monitor<\/h3>\r\n          <p>Go live and troubleshoot real operating conditions where required.<\/p>\r\n        <\/article>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"sequence-column right\">\r\n        <strong>SYSTEM<\/strong>\r\n        <span>Request<\/span>\r\n        <span>Response<\/span>\r\n        <span>Status<\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       SEO \/ CONTENT \u2014 LIGHT, NOT ANOTHER BLACK SECTION\r\n       ===================================================== -->\r\n  <section class=\"api-search api-line\">\r\n\r\n    <div class=\"search-code\" aria-hidden=\"true\">\r\n      <span>GET<\/span>\r\n      <strong>\/api\/integration<\/strong>\r\n      <small>200 OK<\/small>\r\n\r\n      <div>\r\n        <i>\"service\"<\/i>: \"system integration\",<br>\r\n        <i>\"market\"<\/i>: \"Malaysia\",<br>\r\n        <i>\"purpose\"<\/i>: \"useful business automation\"\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"search-copy\">\r\n      <span class=\"api-label\">API INTEGRATION MALAYSIA<\/span>\r\n\r\n      <h2>Useful technical content is better than repeating keywords.<\/h2>\r\n\r\n      <p>\r\n        A business looking for API integration normally needs practical answers:\r\n        whether two systems can connect, what access is required, how data will move,\r\n        what happens if requests fail and who maintains the integration afterwards.\r\n      <\/p>\r\n\r\n      <p>\r\n        This page is structured around those decisions while naturally explaining\r\n        SYSCOMM's API integration and custom development services in Malaysia.\r\n      <\/p>\r\n\r\n      <div class=\"search-links\">\r\n        <a href=\"\/web-design\/\">Professional Web Design \u2197<\/a>\r\n        <a href=\"\/shopify-website-development-malaysia\/\">Shopify Website Development \u2197<\/a>\r\n        <a href=\"\/why-choose-syscomm\/\">Why Choose SYSCOMM \u2197<\/a>\r\n        <a href=\"\/web-design-faq\/\">Web Design FAQ \u2197<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       FAQ\r\n       ===================================================== -->\r\n  <section class=\"api-faq-section api-line\">\r\n\r\n    <div class=\"api-faq-intro\">\r\n      <span class=\"api-label\">API INTEGRATION FAQ<\/span>\r\n\r\n      <h2>Questions to answer before connecting business systems.<\/h2>\r\n\r\n      <p>\r\n        The exact answer depends on the APIs and systems involved, so technical access\r\n        and documentation should be reviewed before final scope is confirmed.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"api-faq\">\r\n\r\n      <details>\r\n        <summary>\r\n          <span>01<\/span>\r\n          <strong>What is API integration?<\/strong>\r\n          <i>+<\/i>\r\n        <\/summary>\r\n        <div>\r\n          <p>\r\n            API integration allows two software systems to exchange data or trigger\r\n            supported functions through a defined application programming interface.\r\n            The exact capabilities depend on what each system's API allows.\r\n          <\/p>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          <span>02<\/span>\r\n          <strong>Can any website connect to any software system?<\/strong>\r\n          <i>+<\/i>\r\n        <\/summary>\r\n        <div>\r\n          <p>\r\n            No. The external system normally needs to provide a supported API or other\r\n            authorised integration method. Access rights, API features, documentation\r\n            and technical limitations must be reviewed first.\r\n          <\/p>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          <span>03<\/span>\r\n          <strong>What information do you need before quoting an API integration?<\/strong>\r\n          <i>+<\/i>\r\n        <\/summary>\r\n        <div>\r\n          <p>\r\n            Useful information includes the systems involved, API documentation,\r\n            credentials or sandbox access, required data fields, synchronisation\r\n            direction, frequency, business rules and expected error handling.\r\n          <\/p>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          <span>04<\/span>\r\n          <strong>Can you integrate payment APIs into an ecommerce website?<\/strong>\r\n          <i>+<\/i>\r\n        <\/summary>\r\n        <div>\r\n          <p>\r\n            Where the payment provider offers a suitable supported API and the project\r\n            requirements are compatible, payment integration can be scoped. Payment\r\n            flows require careful handling of transaction states, callbacks and\r\n            provider requirements.\r\n          <\/p>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          <span>05<\/span>\r\n          <strong>What is the difference between third-party integration and custom API development?<\/strong>\r\n          <i>+<\/i>\r\n        <\/summary>\r\n        <div>\r\n          <p>\r\n            Third-party integration connects your system to an API provided by another\r\n            service. Custom API development creates an interface for your own\r\n            application or system when authorised external or internal applications\r\n            need defined access to its data or functions.\r\n          <\/p>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          <span>06<\/span>\r\n          <strong>Does an API integration require maintenance after launch?<\/strong>\r\n          <i>+<\/i>\r\n        <\/summary>\r\n        <div>\r\n          <p>\r\n            It can. External providers may change authentication, endpoints, limits or\r\n            supported API versions. Credentials can also expire or be replaced.\r\n            Business-critical integrations should therefore have clear ownership and\r\n            a maintenance plan.\r\n          <\/p>\r\n        <\/div>\r\n      <\/details>\r\n\r\n      <details>\r\n        <summary>\r\n          <span>07<\/span>\r\n          <strong>Can APIs connect ecommerce orders to accounting or inventory systems?<\/strong>\r\n          <i>+<\/i>\r\n        <\/summary>\r\n        <div>\r\n          <p>\r\n            Potentially, yes, if both systems expose the necessary supported interfaces\r\n            and the required order, product, stock or customer data can be accessed.\r\n            The exact mapping and sync rules need to be reviewed.\r\n          <\/p>\r\n        <\/div>\r\n      <\/details>\r\n\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n\r\n  <!-- =====================================================\r\n       CTA \u2014 CONNECTION COMPLETE\r\n       ===================================================== -->\r\n  <section class=\"api-cta api-line\">\r\n\r\n    <div class=\"cta-signal\" aria-hidden=\"true\">\r\n      <div class=\"signal-a\"><\/div>\r\n      <div class=\"signal-b\"><\/div>\r\n      <span><\/span>\r\n      <strong>CONNECTED<\/strong>\r\n    <\/div>\r\n\r\n    <div class=\"api-cta-copy\">\r\n      <span class=\"api-label\">START AN INTEGRATION PROJECT<\/span>\r\n\r\n      <h2>Tell us which systems need to talk to each other.<\/h2>\r\n\r\n      <p>\r\n        Share the systems involved, API documentation and the business process you\r\n        want to automate or improve. We can review the requirement and identify what\r\n        needs to be confirmed before development.\r\n      <\/p>\r\n\r\n      <a href=\"\/contact\/\" class=\"api-cta-link\">\r\n        <span>Discuss your API requirement<\/span>\r\n        <span>\u2197<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\/* =========================================================\r\n   SYSCOMM API INTEGRATION\r\n   UNIQUE SYSTEM \/ DATA FLOW DESIGN\r\n   STANDARD SITE WIDTH = 88.5%\r\n   ========================================================= *\/\r\n\r\n#scm-api{\r\n  --bg:#fff;\r\n  --text:#090909;\r\n  --muted:#71716b;\r\n  --line:#d8d8d2;\r\n  --soft:#f4f4f0;\r\n  --dark:#090a0a;\r\n\r\n  position:relative!important;\r\n  left:50%!important;\r\n\r\n  width:100vw!important;\r\n  max-width:100vw!important;\r\n\r\n  margin-left:-50vw!important;\r\n  margin-right:0!important;\r\n\r\n  overflow-x:hidden!important;\r\n\r\n  background:#fff!important;\r\n  color:var(--text);\r\n\r\n  font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;\r\n}\r\n\r\n#scm-api *{\r\n  box-sizing:border-box;\r\n  min-width:0;\r\n}\r\n\r\n#scm-api a{\r\n  color:inherit;\r\n  text-decoration:none;\r\n}\r\n\r\n#scm-api img{\r\n  display:block;\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n}\r\n\r\n#scm-api .api-hero,\r\n#scm-api .api-protocol,\r\n#scm-api .api-section,\r\n#scm-api .api-pipeline,\r\n#scm-api .api-visual-story,\r\n#scm-api .api-architecture,\r\n#scm-api .api-assessment,\r\n#scm-api .api-reliability,\r\n#scm-api .api-search,\r\n#scm-api .api-faq-section,\r\n#scm-api .api-cta{\r\n  width:88.5%!important;\r\n  max-width:none!important;\r\n\r\n  margin-left:auto!important;\r\n  margin-right:auto!important;\r\n}\r\n\r\n#scm-api .api-line{\r\n  border-top:1px solid var(--line);\r\n}\r\n\r\n#scm-api .api-label,\r\n#scm-api .api-kicker{\r\n  font-size:10px;\r\n  line-height:1.4;\r\n  letter-spacing:.14em;\r\n  text-transform:uppercase;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-link{\r\n  display:inline-flex;\r\n\r\n  padding-bottom:6px;\r\n\r\n  border-bottom:1px solid currentColor;\r\n\r\n  font-size:10px;\r\n  text-transform:uppercase;\r\n  letter-spacing:.12em;\r\n}\r\n\r\n#scm-api .api-link.quiet{\r\n  color:var(--muted);\r\n}\r\n\r\n\r\n\/* ================= HERO ================= *\/\r\n\r\n#scm-api .api-hero{\r\n  display:grid;\r\n  grid-template-columns:.8fr 1.2fr;\r\n  gap:5vw;\r\n  align-items:center;\r\n\r\n  min-height:820px;\r\n\r\n  padding:75px 0 100px;\r\n}\r\n\r\n#scm-api h1{\r\n  max-width:820px;\r\n\r\n  margin:34px 0 38px;\r\n\r\n  font-size:clamp(54px,5.8vw,96px);\r\n  line-height:.88;\r\n  letter-spacing:-.073em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-hero-copy p{\r\n  max-width:620px;\r\n\r\n  margin:0 0 18px;\r\n\r\n  font-size:14px;\r\n  line-height:1.72;\r\n  color:#454540;\r\n}\r\n\r\n#scm-api .api-hero-copy .api-lead{\r\n  font-size:16px;\r\n  color:#111;\r\n}\r\n\r\n#scm-api .api-actions{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:22px;\r\n\r\n  margin-top:30px;\r\n}\r\n\r\n\r\n\/* NETWORK *\/\r\n\r\n#scm-api .api-network{\r\n  position:relative;\r\n\r\n  min-height:670px;\r\n\r\n  border:1px solid var(--line);\r\n\r\n  background:\r\n    linear-gradient(var(--line) 1px,transparent 1px),\r\n    linear-gradient(90deg,var(--line) 1px,transparent 1px);\r\n  background-size:52px 52px;\r\n\r\n  overflow:hidden;\r\n}\r\n\r\n#scm-api .api-network:after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n  inset:0;\r\n\r\n  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.1),rgba(255,255,255,.92) 70%);\r\n  pointer-events:none;\r\n}\r\n\r\n#scm-api .api-network-lines{\r\n  position:absolute;\r\n  z-index:2;\r\n\r\n  inset:0;\r\n\r\n  width:100%;\r\n  height:100%;\r\n}\r\n\r\n#scm-api .api-network-lines path{\r\n  fill:none;\r\n  stroke:#8d8d86;\r\n  stroke-width:1;\r\n  stroke-dasharray:5 7;\r\n}\r\n\r\n#scm-api .api-node{\r\n  position:absolute;\r\n  z-index:5;\r\n\r\n  width:132px;\r\n  min-height:94px;\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n\r\n  padding:15px;\r\n\r\n  border:1px solid #bdbdb6;\r\n  background:#fff;\r\n\r\n  transition:transform .3s ease,background .3s ease,color .3s ease;\r\n}\r\n\r\n#scm-api .api-node:hover{\r\n  transform:translateY(-4px);\r\n  background:#0b0b0b;\r\n  color:#fff;\r\n}\r\n\r\n#scm-api .api-node small{\r\n  margin-bottom:9px;\r\n\r\n  font-size:8px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-node strong{\r\n  font-size:13px;\r\n  line-height:1.05;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-node span{\r\n  margin-top:5px;\r\n\r\n  font-size:8px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-node.core{\r\n  left:50%;\r\n  top:50%;\r\n\r\n  width:170px;\r\n  height:170px;\r\n\r\n  align-items:center;\r\n\r\n  transform:translate(-50%,-50%);\r\n\r\n  border-radius:50%;\r\n  border-color:#111;\r\n\r\n  background:#0b0b0b;\r\n  color:#fff;\r\n\r\n  text-align:center;\r\n}\r\n\r\n#scm-api .api-node.core:hover{\r\n  transform:translate(-50%,-53%);\r\n}\r\n\r\n#scm-api .api-node.core small,\r\n#scm-api .api-node.core span{\r\n  color:#aaa;\r\n}\r\n\r\n#scm-api .api-node.core strong{\r\n  font-size:20px;\r\n}\r\n\r\n#scm-api .n1{left:6%;top:14%}\r\n#scm-api .n2{right:6%;top:9%}\r\n#scm-api .n3{left:4%;bottom:10%}\r\n#scm-api .n4{right:5%;bottom:10%}\r\n#scm-api .n5{left:50%;top:3%;transform:translateX(-50%)}\r\n#scm-api .n6{left:50%;bottom:2%;transform:translateX(-50%)}\r\n\r\n#scm-api .api-network-status{\r\n  position:absolute;\r\n  z-index:5;\r\n\r\n  left:18px;\r\n  bottom:17px;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  gap:9px;\r\n\r\n  padding:8px 11px;\r\n\r\n  background:#fff;\r\n  border:1px solid var(--line);\r\n\r\n  font-size:8px;\r\n  letter-spacing:.09em;\r\n}\r\n\r\n#scm-api .api-network-status i{\r\n  width:7px;\r\n  height:7px;\r\n\r\n  border-radius:50%;\r\n  background:#111;\r\n}\r\n\r\n#scm-api .api-packet{\r\n  position:absolute;\r\n  z-index:4;\r\n\r\n  width:8px;\r\n  height:8px;\r\n\r\n  border-radius:50%;\r\n  background:#111;\r\n}\r\n\r\n#scm-api .packet-1{left:19%;top:25%}\r\n#scm-api .packet-2{right:19%;top:24%}\r\n#scm-api .packet-3{left:21%;bottom:25%}\r\n#scm-api .packet-4{right:20%;bottom:24%}\r\n\r\n\r\n\/* ================= PROTOCOL ================= *\/\r\n\r\n#scm-api .api-protocol{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n\r\n  padding:0;\r\n}\r\n\r\n#scm-api .api-protocol span{\r\n  flex:1 1 auto;\r\n\r\n  padding:16px 20px;\r\n\r\n  border-right:1px solid var(--line);\r\n  border-bottom:1px solid var(--line);\r\n\r\n  text-align:center;\r\n\r\n  font-size:9px;\r\n  letter-spacing:.1em;\r\n  text-transform:uppercase;\r\n}\r\n\r\n\r\n\/* ================= SECTION ================= *\/\r\n\r\n#scm-api .api-section{\r\n  padding:100px 0 115px;\r\n}\r\n\r\n#scm-api .api-heading{\r\n  display:grid;\r\n  grid-template-columns:210px minmax(0,1fr);\r\n  gap:48px;\r\n\r\n  margin-bottom:55px;\r\n}\r\n\r\n#scm-api .api-heading h2{\r\n  max-width:1080px;\r\n\r\n  margin:0;\r\n\r\n  font-size:clamp(43px,5vw,78px);\r\n  line-height:.93;\r\n  letter-spacing:-.065em;\r\n  font-weight:400;\r\n}\r\n\r\n\r\n\/* PROBLEMS *\/\r\n\r\n#scm-api .api-problems{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n\r\n  border-top:1px solid var(--line);\r\n  border-left:1px solid var(--line);\r\n}\r\n\r\n#scm-api .api-problems article{\r\n  min-height:390px;\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n\r\n  padding:25px;\r\n\r\n  border-right:1px solid var(--line);\r\n  border-bottom:1px solid var(--line);\r\n\r\n  transition:background .3s ease,transform .3s ease;\r\n}\r\n\r\n#scm-api .api-problems article:hover{\r\n  background:#f7f7f4;\r\n  transform:translateY(-4px);\r\n}\r\n\r\n#scm-api .api-problems article>span{\r\n  font-size:9px;\r\n  letter-spacing:.1em;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-problems h3{\r\n  margin:auto 0 18px;\r\n\r\n  font-size:30px;\r\n  line-height:1;\r\n  letter-spacing:-.048em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-problems p{\r\n  margin:0;\r\n\r\n  font-size:12px;\r\n  line-height:1.67;\r\n  color:var(--muted);\r\n}\r\n\r\n\r\n\/* ================= PIPELINE ================= *\/\r\n\r\n#scm-api .api-pipeline{\r\n  display:grid;\r\n  grid-template-columns:.65fr 1.35fr;\r\n  gap:6vw;\r\n\r\n  padding:105px 0 120px;\r\n}\r\n\r\n#scm-api .api-pipeline-title h2{\r\n  margin:25px 0;\r\n\r\n  font-size:clamp(43px,4.8vw,73px);\r\n  line-height:.93;\r\n  letter-spacing:-.064em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-pipeline-title p{\r\n  max-width:560px;\r\n\r\n  margin:0;\r\n\r\n  font-size:14px;\r\n  line-height:1.72;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .pipeline-console{\r\n  padding:26px;\r\n\r\n  background:#0b0c0c;\r\n  color:#fff;\r\n}\r\n\r\n#scm-api .console-top{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n\r\n  padding-bottom:18px;\r\n\r\n  border-bottom:1px solid #333;\r\n\r\n  font-size:8px;\r\n  letter-spacing:.12em;\r\n}\r\n\r\n#scm-api .console-top div{\r\n  display:flex;\r\n  gap:7px;\r\n}\r\n\r\n#scm-api .console-top i{\r\n  width:7px;\r\n  height:7px;\r\n\r\n  border:1px solid #777;\r\n  border-radius:50%;\r\n}\r\n\r\n#scm-api .pipeline-flow{\r\n  display:flex;\r\n  align-items:stretch;\r\n\r\n  gap:9px;\r\n\r\n  padding:42px 0;\r\n}\r\n\r\n#scm-api .pipe-step{\r\n  flex:1;\r\n\r\n  min-height:145px;\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n\r\n  padding:14px;\r\n\r\n  border:1px solid #3c3c3c;\r\n}\r\n\r\n#scm-api .pipe-step small{\r\n  margin-bottom:auto;\r\n\r\n  font-size:8px;\r\n  color:#888;\r\n}\r\n\r\n#scm-api .pipe-step strong{\r\n  margin-top:20px;\r\n\r\n  font-size:12px;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .pipe-step span{\r\n  margin-top:6px;\r\n\r\n  font-size:8px;\r\n  color:#999;\r\n}\r\n\r\n#scm-api .pipeline-flow>b{\r\n  align-self:center;\r\n\r\n  font-size:14px;\r\n  font-weight:300;\r\n  color:#777;\r\n}\r\n\r\n#scm-api .pipeline-log{\r\n  border-top:1px solid #333;\r\n}\r\n\r\n#scm-api .pipeline-log>div{\r\n  display:grid;\r\n  grid-template-columns:80px 80px minmax(0,1fr) 45px;\r\n  gap:15px;\r\n\r\n  padding:12px 0;\r\n\r\n  border-bottom:1px solid #292929;\r\n\r\n  font-size:9px;\r\n}\r\n\r\n#scm-api .pipeline-log span,\r\n#scm-api .pipeline-log em{\r\n  color:#999;\r\n  font-style:normal;\r\n}\r\n\r\n#scm-api .pipeline-log i{\r\n  justify-self:end;\r\n\r\n  color:#fff;\r\n  font-style:normal;\r\n}\r\n\r\n#scm-api .pipeline-log .warn i{\r\n  color:#bbb;\r\n}\r\n\r\n\r\n\/* ================= LANES ================= *\/\r\n\r\n#scm-api .api-lanes{\r\n  border-top:1px solid var(--line);\r\n}\r\n\r\n#scm-api .api-lanes article{\r\n  position:relative;\r\n\r\n  display:grid;\r\n  grid-template-columns:60px .75fr 1fr 180px;\r\n  gap:28px;\r\n  align-items:center;\r\n\r\n  min-height:200px;\r\n\r\n  border-bottom:1px solid var(--line);\r\n\r\n  overflow:hidden;\r\n\r\n  transition:background .3s ease;\r\n}\r\n\r\n#scm-api .api-lanes article:hover{\r\n  background:#fafaf7;\r\n}\r\n\r\n#scm-api .lane-no{\r\n  font-size:10px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .lane-title>span{\r\n  font-size:8px;\r\n  letter-spacing:.1em;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .lane-title h3{\r\n  margin:10px 0 0;\r\n\r\n  font-size:29px;\r\n  line-height:1;\r\n  letter-spacing:-.045em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-lanes article>p{\r\n  max-width:650px;\r\n\r\n  margin:0;\r\n\r\n  font-size:12px;\r\n  line-height:1.65;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .lane-art{\r\n  position:relative;\r\n\r\n  width:150px;\r\n  height:110px;\r\n\r\n  justify-self:end;\r\n}\r\n\r\n\/* payment card *\/\r\n#scm-api .card-art div{\r\n  position:absolute;\r\n\r\n  left:10px;\r\n  top:15px;\r\n\r\n  width:120px;\r\n  height:72px;\r\n\r\n  border:1px solid #777;\r\n  border-radius:4px;\r\n}\r\n\r\n#scm-api .card-art div:before{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  left:0;\r\n  top:18px;\r\n\r\n  width:100%;\r\n  height:12px;\r\n\r\n  background:#111;\r\n}\r\n\r\n#scm-api .card-art span{\r\n  position:absolute;\r\n\r\n  width:8px;\r\n  height:8px;\r\n\r\n  border:1px solid #777;\r\n  border-radius:50%;\r\n}\r\n\r\n#scm-api .card-art span:nth-child(2){left:24px;bottom:7px}\r\n#scm-api .card-art span:nth-child(3){left:38px;bottom:7px}\r\n\r\n\/* boxes *\/\r\n#scm-api .boxes-art i{\r\n  position:absolute;\r\n\r\n  width:55px;\r\n  height:55px;\r\n\r\n  border:1px solid #777;\r\n}\r\n\r\n#scm-api .boxes-art i:nth-child(1){left:3px;top:4px}\r\n#scm-api .boxes-art i:nth-child(2){right:3px;top:4px}\r\n#scm-api .boxes-art i:nth-child(3){left:48px;bottom:2px}\r\n#scm-api .boxes-art b{\r\n  position:absolute;\r\n\r\n  left:28px;\r\n  top:49px;\r\n\r\n  width:90px;\r\n  height:1px;\r\n\r\n  background:#999;\r\n}\r\n\r\n\/* user *\/\r\n#scm-api .user-art i{\r\n  position:absolute;\r\n\r\n  left:52px;\r\n  top:8px;\r\n\r\n  width:40px;\r\n  height:40px;\r\n\r\n  border:1px solid #777;\r\n  border-radius:50%;\r\n}\r\n\r\n#scm-api .user-art div{\r\n  position:absolute;\r\n\r\n  left:28px;\r\n  bottom:5px;\r\n\r\n  width:90px;\r\n  height:55px;\r\n\r\n  border:1px solid #777;\r\n  border-radius:50% 50% 0 0;\r\n}\r\n\r\n\/* nodes *\/\r\n#scm-api .nodes-art i{\r\n  position:absolute;\r\n\r\n  width:28px;\r\n  height:28px;\r\n\r\n  border:1px solid #777;\r\n  border-radius:50%;\r\n  background:#fff;\r\n}\r\n\r\n#scm-api .nodes-art i:nth-child(1){left:4px;top:12px}\r\n#scm-api .nodes-art i:nth-child(2){right:4px;top:12px}\r\n#scm-api .nodes-art i:nth-child(3){left:58px;bottom:8px}\r\n\r\n#scm-api .nodes-art span{\r\n  position:absolute;\r\n\r\n  left:20px;\r\n  top:38px;\r\n\r\n  width:110px;\r\n  height:1px;\r\n\r\n  background:#888;\r\n\r\n  transform:rotate(18deg);\r\n}\r\n\r\n\r\n\/* ================= IMAGE STORY ================= *\/\r\n\r\n#scm-api .api-visual-story{\r\n  display:grid;\r\n  grid-template-columns:.7fr 1.3fr;\r\n  gap:7vw;\r\n  align-items:center;\r\n\r\n  padding:105px 0 120px;\r\n}\r\n\r\n#scm-api .api-story-copy h2{\r\n  margin:25px 0;\r\n\r\n  font-size:clamp(43px,4.8vw,72px);\r\n  line-height:.93;\r\n  letter-spacing:-.064em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-story-copy p{\r\n  max-width:590px;\r\n\r\n  margin:0 0 18px;\r\n\r\n  font-size:14px;\r\n  line-height:1.72;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-story-images{\r\n  position:relative;\r\n\r\n  min-height:700px;\r\n}\r\n\r\n#scm-api .api-story-images figure{\r\n  position:absolute;\r\n\r\n  margin:0;\r\n\r\n  overflow:hidden;\r\n\r\n  background:var(--soft);\r\n}\r\n\r\n#scm-api .api-story-images img{\r\n  filter:saturate(.58) contrast(.98);\r\n  transition:transform .8s ease,filter .8s ease;\r\n}\r\n\r\n#scm-api .api-story-images figure:hover img{\r\n  transform:scale(1.03);\r\n  filter:saturate(.82);\r\n}\r\n\r\n#scm-api .story-main{\r\n  left:0;\r\n  top:0;\r\n\r\n  width:72%;\r\n  height:460px;\r\n}\r\n\r\n#scm-api .story-small.one{\r\n  right:0;\r\n  top:110px;\r\n\r\n  width:36%;\r\n  height:285px;\r\n\r\n  border:12px solid #fff;\r\n}\r\n\r\n#scm-api .story-small.two{\r\n  left:25%;\r\n  bottom:0;\r\n\r\n  width:42%;\r\n  height:280px;\r\n\r\n  border:12px solid #fff;\r\n}\r\n\r\n#scm-api .api-story-images figcaption{\r\n  position:absolute;\r\n\r\n  left:10px;\r\n  bottom:9px;\r\n\r\n  padding:5px 7px;\r\n\r\n  background:rgba(255,255,255,.9);\r\n\r\n  font-size:8px;\r\n  letter-spacing:.09em;\r\n}\r\n\r\n\r\n\/* ================= ARCHITECTURE ================= *\/\r\n\r\n#scm-api .api-architecture{\r\n  padding:105px 0 125px;\r\n}\r\n\r\n#scm-api .architecture-head{\r\n  display:grid;\r\n  grid-template-columns:210px minmax(0,1fr);\r\n  gap:48px;\r\n\r\n  margin-bottom:60px;\r\n}\r\n\r\n#scm-api .architecture-head h2{\r\n  max-width:1000px;\r\n\r\n  margin:0;\r\n\r\n  font-size:clamp(43px,5vw,76px);\r\n  line-height:.93;\r\n  letter-spacing:-.064em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .architecture-map{\r\n  position:relative;\r\n\r\n  min-height:670px;\r\n\r\n  border:1px solid var(--line);\r\n\r\n  background:#fafaf7;\r\n}\r\n\r\n#scm-api .arch-axis{\r\n  position:absolute;\r\n\r\n  background:var(--line);\r\n}\r\n\r\n#scm-api .arch-axis.vertical{\r\n  left:50%;\r\n  top:5%;\r\n  bottom:5%;\r\n\r\n  width:1px;\r\n}\r\n\r\n#scm-api .arch-axis.horizontal{\r\n  top:50%;\r\n  left:5%;\r\n  right:5%;\r\n\r\n  height:1px;\r\n}\r\n\r\n#scm-api .architecture-map article{\r\n  position:absolute;\r\n\r\n  width:36%;\r\n  min-height:210px;\r\n\r\n  padding:24px;\r\n\r\n  background:#fff;\r\n  border:1px solid var(--line);\r\n}\r\n\r\n#scm-api .arch-a{left:5%;top:6%}\r\n#scm-api .arch-b{right:5%;top:6%}\r\n#scm-api .arch-c{left:5%;bottom:6%}\r\n#scm-api .arch-d{right:5%;bottom:6%}\r\n\r\n#scm-api .architecture-map article>span{\r\n  font-size:9px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .architecture-map h3{\r\n  margin:46px 0 13px;\r\n\r\n  font-size:28px;\r\n  line-height:1;\r\n  letter-spacing:-.045em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .architecture-map p{\r\n  margin:0;\r\n\r\n  font-size:12px;\r\n  line-height:1.62;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .arch-core{\r\n  position:absolute;\r\n  z-index:3;\r\n\r\n  left:50%;\r\n  top:50%;\r\n\r\n  width:150px;\r\n  height:150px;\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n  align-items:center;\r\n\r\n  transform:translate(-50%,-50%);\r\n\r\n  border-radius:50%;\r\n\r\n  background:#0b0b0b;\r\n  color:#fff;\r\n}\r\n\r\n#scm-api .arch-core strong{\r\n  font-size:34px;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .arch-core span{\r\n  margin-top:6px;\r\n\r\n  font-size:7px;\r\n  letter-spacing:.08em;\r\n  color:#aaa;\r\n}\r\n\r\n\r\n\/* ================= ASSESSMENT ================= *\/\r\n\r\n#scm-api .api-assessment{\r\n  display:grid;\r\n  grid-template-columns:.72fr 1.28fr;\r\n  gap:7vw;\r\n\r\n  padding:105px 0 120px;\r\n}\r\n\r\n#scm-api .assessment-intro h2{\r\n  margin:25px 0;\r\n\r\n  font-size:clamp(43px,4.8vw,74px);\r\n  line-height:.93;\r\n  letter-spacing:-.064em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .assessment-intro p{\r\n  max-width:580px;\r\n\r\n  margin:0;\r\n\r\n  font-size:14px;\r\n  line-height:1.72;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .assessment-list{\r\n  border-top:1px solid var(--line);\r\n}\r\n\r\n#scm-api .assessment-list>div{\r\n  display:grid;\r\n  grid-template-columns:45px minmax(0,1fr) 220px;\r\n  gap:20px;\r\n  align-items:center;\r\n\r\n  padding:19px 0;\r\n\r\n  border-bottom:1px solid var(--line);\r\n}\r\n\r\n#scm-api .assessment-list span{\r\n  font-size:9px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .assessment-list strong{\r\n  font-size:20px;\r\n  line-height:1.2;\r\n  letter-spacing:-.03em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .assessment-list small{\r\n  font-size:9px;\r\n  text-transform:uppercase;\r\n  letter-spacing:.08em;\r\n  color:var(--muted);\r\n}\r\n\r\n\r\n\/* ================= RELIABILITY BLACK ================= *\/\r\n\r\n#scm-api .api-reliability{\r\n  display:grid;\r\n  grid-template-columns:.85fr 1.15fr;\r\n\r\n  background:#090a0a;\r\n}\r\n\r\n#scm-api .reliability-title,\r\n#scm-api .reliability-grid{\r\n  min-height:670px;\r\n\r\n  padding:70px 5vw;\r\n}\r\n\r\n#scm-api .reliability-title{\r\n  border-right:1px solid #333;\r\n}\r\n\r\n#scm-api .api-reliability,\r\n#scm-api .api-reliability *,\r\n#scm-api .api-reliability h1,\r\n#scm-api .api-reliability h2,\r\n#scm-api .api-reliability h3{\r\n  color:#fff!important;\r\n  -webkit-text-fill-color:#fff!important;\r\n}\r\n\r\n#scm-api .reliability-title>span{\r\n  font-size:9px;\r\n  letter-spacing:.12em;\r\n\r\n  color:#aaa!important;\r\n  -webkit-text-fill-color:#aaa!important;\r\n}\r\n\r\n#scm-api .reliability-title h2{\r\n  max-width:680px;\r\n\r\n  margin:30px 0 0;\r\n\r\n  font-size:clamp(45px,5vw,78px);\r\n  line-height:.91;\r\n  letter-spacing:-.067em;\r\n  font-weight:400;\r\n\r\n  opacity:1!important;\r\n}\r\n\r\n#scm-api .reliability-grid{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n\r\n  align-content:center;\r\n}\r\n\r\n#scm-api .reliability-grid article{\r\n  min-height:210px;\r\n\r\n  padding:23px;\r\n\r\n  border-right:1px solid #333;\r\n  border-bottom:1px solid #333;\r\n}\r\n\r\n#scm-api .reliability-grid article:nth-child(odd){\r\n  border-left:1px solid #333;\r\n}\r\n\r\n#scm-api .reliability-grid article:nth-child(-n+2){\r\n  border-top:1px solid #333;\r\n}\r\n\r\n#scm-api .reliability-grid article>span{\r\n  font-size:9px;\r\n\r\n  color:#888!important;\r\n  -webkit-text-fill-color:#888!important;\r\n}\r\n\r\n#scm-api .reliability-grid h3{\r\n  margin:48px 0 12px;\r\n\r\n  font-size:23px;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .reliability-grid p{\r\n  margin:0;\r\n\r\n  font-size:11px;\r\n  line-height:1.6;\r\n\r\n  color:#aaa!important;\r\n  -webkit-text-fill-color:#aaa!important;\r\n}\r\n\r\n\r\n\/* ================= SEQUENCE ================= *\/\r\n\r\n#scm-api .api-sequence{\r\n  display:grid;\r\n  grid-template-columns:170px minmax(0,1fr) 170px;\r\n\r\n  border-top:1px solid var(--line);\r\n  border-bottom:1px solid var(--line);\r\n}\r\n\r\n#scm-api .sequence-column{\r\n  display:flex;\r\n  flex-direction:column;\r\n\r\n  padding:25px;\r\n\r\n  border-right:1px solid var(--line);\r\n\r\n  background:#f5f5f1;\r\n}\r\n\r\n#scm-api .sequence-column.right{\r\n  border-right:0;\r\n  border-left:1px solid var(--line);\r\n}\r\n\r\n#scm-api .sequence-column strong{\r\n  margin-bottom:auto;\r\n\r\n  font-size:13px;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .sequence-column span{\r\n  padding:13px 0;\r\n\r\n  border-bottom:1px solid var(--line);\r\n\r\n  font-size:9px;\r\n  text-transform:uppercase;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .sequence-center article{\r\n  display:grid;\r\n  grid-template-columns:50px .7fr 1.3fr;\r\n  gap:20px;\r\n  align-items:center;\r\n\r\n  min-height:135px;\r\n\r\n  padding:18px 28px;\r\n\r\n  border-bottom:1px solid var(--line);\r\n}\r\n\r\n#scm-api .sequence-center article:last-child{\r\n  border-bottom:0;\r\n}\r\n\r\n#scm-api .sequence-center article>span{\r\n  font-size:9px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .sequence-center h3{\r\n  margin:0;\r\n\r\n  font-size:25px;\r\n  line-height:1;\r\n  letter-spacing:-.04em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .sequence-center p{\r\n  margin:0;\r\n\r\n  font-size:12px;\r\n  line-height:1.6;\r\n  color:var(--muted);\r\n}\r\n\r\n\r\n\/* ================= SEARCH ================= *\/\r\n\r\n#scm-api .api-search{\r\n  display:grid;\r\n  grid-template-columns:.8fr 1.2fr;\r\n\r\n  padding:105px 0 120px;\r\n}\r\n\r\n#scm-api .search-code{\r\n  min-height:500px;\r\n\r\n  display:flex;\r\n  flex-direction:column;\r\n\r\n  padding:45px;\r\n\r\n  background:#f3f3ef;\r\n}\r\n\r\n#scm-api .search-code>span{\r\n  align-self:flex-start;\r\n\r\n  padding:7px 10px;\r\n\r\n  background:#111;\r\n  color:#fff;\r\n\r\n  font-size:9px;\r\n}\r\n\r\n#scm-api .search-code>strong{\r\n  margin:35px 0 10px;\r\n\r\n  font-size:34px;\r\n  letter-spacing:-.04em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .search-code>small{\r\n  font-size:10px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .search-code>div{\r\n  margin-top:auto;\r\n\r\n  padding-top:30px;\r\n\r\n  border-top:1px solid var(--line);\r\n\r\n  font-family:monospace;\r\n  font-size:13px;\r\n  line-height:1.8;\r\n}\r\n\r\n#scm-api .search-code i{\r\n  font-style:normal;\r\n  color:#777;\r\n}\r\n\r\n#scm-api .search-copy{\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n\r\n  padding-left:7vw;\r\n}\r\n\r\n#scm-api .search-copy h2{\r\n  max-width:780px;\r\n\r\n  margin:25px 0;\r\n\r\n  font-size:clamp(43px,4.8vw,74px);\r\n  line-height:.93;\r\n  letter-spacing:-.064em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .search-copy p{\r\n  max-width:650px;\r\n\r\n  margin:0 0 18px;\r\n\r\n  font-size:14px;\r\n  line-height:1.72;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .search-links{\r\n  margin-top:28px;\r\n\r\n  border-top:1px solid var(--line);\r\n}\r\n\r\n#scm-api .search-links a{\r\n  display:flex;\r\n\r\n  padding:14px 0;\r\n\r\n  border-bottom:1px solid var(--line);\r\n\r\n  font-size:11px;\r\n}\r\n\r\n\r\n\/* ================= FAQ ================= *\/\r\n\r\n#scm-api .api-faq-section{\r\n  display:grid;\r\n  grid-template-columns:.7fr 1.3fr;\r\n  gap:7vw;\r\n\r\n  padding:105px 0 120px;\r\n}\r\n\r\n#scm-api .api-faq-intro{\r\n  position:sticky;\r\n  top:110px;\r\n  align-self:start;\r\n}\r\n\r\n#scm-api .api-faq-intro h2{\r\n  margin:25px 0;\r\n\r\n  font-size:clamp(42px,4.7vw,71px);\r\n  line-height:.93;\r\n  letter-spacing:-.063em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-faq-intro p{\r\n  max-width:520px;\r\n\r\n  margin:0;\r\n\r\n  font-size:13px;\r\n  line-height:1.68;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-faq{\r\n  border-top:1px solid var(--line);\r\n}\r\n\r\n#scm-api .api-faq details{\r\n  border-bottom:1px solid var(--line);\r\n}\r\n\r\n#scm-api .api-faq summary{\r\n  list-style:none;\r\n  cursor:pointer;\r\n\r\n  display:grid;\r\n  grid-template-columns:45px minmax(0,1fr) 25px;\r\n  align-items:center;\r\n\r\n  min-height:88px;\r\n}\r\n\r\n#scm-api .api-faq summary::-webkit-details-marker{\r\n  display:none;\r\n}\r\n\r\n#scm-api .api-faq summary>span{\r\n  font-size:9px;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-faq summary strong{\r\n  font-size:20px;\r\n  line-height:1.2;\r\n  letter-spacing:-.03em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-faq summary i{\r\n  justify-self:end;\r\n\r\n  font-style:normal;\r\n  font-size:22px;\r\n\r\n  transition:transform .25s ease;\r\n}\r\n\r\n#scm-api .api-faq details[open] summary i{\r\n  transform:rotate(45deg);\r\n}\r\n\r\n#scm-api .api-faq details>div{\r\n  max-width:850px;\r\n\r\n  margin-left:45px;\r\n  padding:0 0 28px;\r\n}\r\n\r\n#scm-api .api-faq details p{\r\n  margin:0;\r\n\r\n  font-size:13px;\r\n  line-height:1.7;\r\n  color:var(--muted);\r\n}\r\n\r\n\r\n\/* ================= CTA ================= *\/\r\n\r\n#scm-api .api-cta{\r\n  display:grid;\r\n  grid-template-columns:.75fr 1.25fr;\r\n  gap:7vw;\r\n  align-items:center;\r\n\r\n  min-height:650px;\r\n\r\n  padding:90px 0 110px;\r\n\r\n  overflow:hidden;\r\n}\r\n\r\n#scm-api .cta-signal{\r\n  position:relative;\r\n\r\n  height:450px;\r\n}\r\n\r\n#scm-api .signal-a,\r\n#scm-api .signal-b{\r\n  position:absolute;\r\n\r\n  left:50%;\r\n  top:50%;\r\n\r\n  border:1px solid var(--line);\r\n  border-radius:50%;\r\n\r\n  transform:translate(-50%,-50%);\r\n}\r\n\r\n#scm-api .signal-a{\r\n  width:310px;\r\n  height:310px;\r\n}\r\n\r\n#scm-api .signal-b{\r\n  width:440px;\r\n  height:440px;\r\n}\r\n\r\n#scm-api .cta-signal>span{\r\n  position:absolute;\r\n\r\n  left:50%;\r\n  top:50%;\r\n\r\n  width:22px;\r\n  height:22px;\r\n\r\n  transform:translate(-50%,-50%);\r\n\r\n  border-radius:50%;\r\n  background:#111;\r\n}\r\n\r\n#scm-api .cta-signal>strong{\r\n  position:absolute;\r\n\r\n  left:50%;\r\n  top:calc(50% + 38px);\r\n\r\n  transform:translateX(-50%);\r\n\r\n  font-size:9px;\r\n  letter-spacing:.12em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-cta-copy h2{\r\n  max-width:930px;\r\n\r\n  margin:25px 0;\r\n\r\n  font-size:clamp(50px,5.8vw,90px);\r\n  line-height:.9;\r\n  letter-spacing:-.07em;\r\n  font-weight:400;\r\n}\r\n\r\n#scm-api .api-cta-copy p{\r\n  max-width:650px;\r\n\r\n  margin:0 0 35px;\r\n\r\n  font-size:14px;\r\n  line-height:1.72;\r\n  color:var(--muted);\r\n}\r\n\r\n#scm-api .api-cta-link{\r\n  display:flex;\r\n  justify-content:space-between;\r\n\r\n  max-width:650px;\r\n\r\n  padding:18px 0;\r\n\r\n  border-top:1px solid #111;\r\n  border-bottom:1px solid #111;\r\n\r\n  font-size:10px;\r\n  text-transform:uppercase;\r\n  letter-spacing:.12em;\r\n}\r\n\r\n\r\n\/* ================= MOTION ================= *\/\r\n\r\n@media(prefers-reduced-motion:no-preference){\r\n\r\n  #scm-api .packet-1{\r\n    animation:packetA 4s ease-in-out infinite alternate;\r\n  }\r\n\r\n  #scm-api .packet-2{\r\n    animation:packetB 4.8s ease-in-out infinite alternate;\r\n  }\r\n\r\n  #scm-api .packet-3{\r\n    animation:packetC 5.3s ease-in-out infinite alternate;\r\n  }\r\n\r\n  #scm-api .packet-4{\r\n    animation:packetD 4.4s ease-in-out infinite alternate;\r\n  }\r\n\r\n  #scm-api .api-network-status i{\r\n    animation:statusBlink 1.5s ease-in-out infinite;\r\n  }\r\n\r\n  #scm-api .signal-a{\r\n    animation:signalPulse 4s ease-in-out infinite alternate;\r\n  }\r\n\r\n  #scm-api .signal-b{\r\n    animation:signalPulse 5.5s ease-in-out infinite alternate-reverse;\r\n  }\r\n\r\n}\r\n\r\n@keyframes packetA{\r\n  to{transform:translate(185px,105px)}\r\n}\r\n\r\n@keyframes packetB{\r\n  to{transform:translate(-190px,120px)}\r\n}\r\n\r\n@keyframes packetC{\r\n  to{transform:translate(185px,-105px)}\r\n}\r\n\r\n@keyframes packetD{\r\n  to{transform:translate(-185px,-110px)}\r\n}\r\n\r\n@keyframes statusBlink{\r\n  50%{opacity:.25}\r\n}\r\n\r\n@keyframes signalPulse{\r\n  from{opacity:.4;scale:.96}\r\n  to{opacity:1;scale:1.03}\r\n}\r\n\r\n\r\n\/* ================= TABLET ================= *\/\r\n\r\n@media(max-width:1100px){\r\n\r\n  #scm-api .api-hero,\r\n  #scm-api .api-protocol,\r\n  #scm-api .api-section,\r\n  #scm-api .api-pipeline,\r\n  #scm-api .api-visual-story,\r\n  #scm-api .api-architecture,\r\n  #scm-api .api-assessment,\r\n  #scm-api .api-reliability,\r\n  #scm-api .api-search,\r\n  #scm-api .api-faq-section,\r\n  #scm-api .api-cta{\r\n    width:calc(100% - 38px)!important;\r\n  }\r\n\r\n  #scm-api .api-hero{\r\n    grid-template-columns:1fr;\r\n    gap:55px;\r\n  }\r\n\r\n  #scm-api .api-problems{\r\n    grid-template-columns:1fr 1fr;\r\n  }\r\n\r\n  #scm-api .api-pipeline{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #scm-api .api-lanes article{\r\n    grid-template-columns:45px .8fr 1.2fr 130px;\r\n  }\r\n\r\n  #scm-api .lane-art{\r\n    width:120px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* ================= MOBILE ================= *\/\r\n\r\n@media(max-width:767px){\r\n\r\n  #scm-api{\r\n    left:auto!important;\r\n\r\n    width:100%!important;\r\n    max-width:100%!important;\r\n\r\n    margin-left:0!important;\r\n  }\r\n\r\n  #scm-api .api-hero,\r\n  #scm-api .api-protocol,\r\n  #scm-api .api-section,\r\n  #scm-api .api-pipeline,\r\n  #scm-api .api-visual-story,\r\n  #scm-api .api-architecture,\r\n  #scm-api .api-assessment,\r\n  #scm-api .api-reliability,\r\n  #scm-api .api-search,\r\n  #scm-api .api-faq-section,\r\n  #scm-api .api-cta{\r\n    width:calc(100% - 26px)!important;\r\n  }\r\n\r\n  #scm-api .api-hero{\r\n    min-height:auto;\r\n\r\n    padding:55px 0 75px;\r\n  }\r\n\r\n  #scm-api h1{\r\n    font-size:clamp(49px,14vw,72px);\r\n  }\r\n\r\n  #scm-api .api-network{\r\n    min-height:600px;\r\n  }\r\n\r\n  #scm-api .api-node{\r\n    width:100px;\r\n    min-height:78px;\r\n\r\n    padding:10px;\r\n  }\r\n\r\n  #scm-api .api-node.core{\r\n    width:135px;\r\n    height:135px;\r\n  }\r\n\r\n  #scm-api .n1{left:3%}\r\n  #scm-api .n2{right:3%}\r\n  #scm-api .n3{left:3%}\r\n  #scm-api .n4{right:3%}\r\n\r\n  #scm-api .api-section{\r\n    padding:70px 0 82px;\r\n  }\r\n\r\n  #scm-api .api-heading,\r\n  #scm-api .architecture-head{\r\n    grid-template-columns:1fr;\r\n    gap:24px;\r\n  }\r\n\r\n  #scm-api .api-heading h2,\r\n  #scm-api .architecture-head h2{\r\n    font-size:clamp(42px,12vw,61px);\r\n  }\r\n\r\n  #scm-api .api-problems{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #scm-api .api-problems article{\r\n    min-height:300px;\r\n  }\r\n\r\n  #scm-api .api-pipeline{\r\n    gap:45px;\r\n\r\n    padding:75px 0 85px;\r\n  }\r\n\r\n  #scm-api .pipeline-console{\r\n    padding:18px;\r\n  }\r\n\r\n  #scm-api .pipeline-flow{\r\n    display:block;\r\n  }\r\n\r\n  #scm-api .pipe-step{\r\n    min-height:95px;\r\n\r\n    margin-bottom:9px;\r\n  }\r\n\r\n  #scm-api .pipeline-flow>b{\r\n    display:block;\r\n\r\n    margin:4px 0;\r\n\r\n    transform:rotate(90deg);\r\n\r\n    text-align:center;\r\n  }\r\n\r\n  #scm-api .pipeline-log>div{\r\n    grid-template-columns:60px 65px minmax(0,1fr);\r\n  }\r\n\r\n  #scm-api .pipeline-log i{\r\n    display:none;\r\n  }\r\n\r\n  #scm-api .api-lanes article{\r\n    grid-template-columns:32px minmax(0,1fr) 22px;\r\n\r\n    min-height:150px;\r\n\r\n    padding:18px 0;\r\n  }\r\n\r\n  #scm-api .api-lanes article>p,\r\n  #scm-api .lane-art{\r\n    display:none;\r\n  }\r\n\r\n  #scm-api .api-visual-story,\r\n  #scm-api .api-assessment,\r\n  #scm-api .api-reliability,\r\n  #scm-api .api-search,\r\n  #scm-api .api-faq-section,\r\n  #scm-api .api-cta{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #scm-api .api-visual-story{\r\n    gap:45px;\r\n\r\n    padding:75px 0 85px;\r\n  }\r\n\r\n  #scm-api .api-story-images{\r\n    min-height:550px;\r\n  }\r\n\r\n  #scm-api .story-main{\r\n    width:82%;\r\n    height:350px;\r\n  }\r\n\r\n  #scm-api .story-small.one{\r\n    width:48%;\r\n    height:230px;\r\n  }\r\n\r\n  #scm-api .story-small.two{\r\n    left:5%;\r\n\r\n    width:52%;\r\n    height:220px;\r\n  }\r\n\r\n  #scm-api .api-architecture{\r\n    padding:75px 0 85px;\r\n  }\r\n\r\n  #scm-api .architecture-map{\r\n    min-height:auto;\r\n\r\n    padding:18px;\r\n  }\r\n\r\n  #scm-api .arch-axis,\r\n  #scm-api .arch-core{\r\n    display:none;\r\n  }\r\n\r\n  #scm-api .architecture-map article,\r\n  #scm-api .arch-a,\r\n  #scm-api .arch-b,\r\n  #scm-api .arch-c,\r\n  #scm-api .arch-d{\r\n    position:static;\r\n\r\n    width:100%;\r\n    min-height:220px;\r\n\r\n    margin-bottom:12px;\r\n  }\r\n\r\n  #scm-api .api-assessment{\r\n    gap:50px;\r\n\r\n    padding:75px 0 85px;\r\n  }\r\n\r\n  #scm-api .assessment-list>div{\r\n    grid-template-columns:35px minmax(0,1fr);\r\n  }\r\n\r\n  #scm-api .assessment-list small{\r\n    grid-column:2;\r\n  }\r\n\r\n  #scm-api .reliability-title,\r\n  #scm-api .reliability-grid{\r\n    min-height:auto;\r\n\r\n    padding:60px 28px;\r\n  }\r\n\r\n  #scm-api .reliability-title{\r\n    border-right:0;\r\n    border-bottom:1px solid #333;\r\n  }\r\n\r\n  #scm-api .reliability-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #scm-api .reliability-grid article,\r\n  #scm-api .reliability-grid article:nth-child(n){\r\n    border-left:1px solid #333;\r\n  }\r\n\r\n  #scm-api .api-sequence{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  #scm-api .sequence-column{\r\n    display:none;\r\n  }\r\n\r\n  #scm-api .sequence-center article{\r\n    grid-template-columns:35px minmax(0,1fr);\r\n  }\r\n\r\n  #scm-api .sequence-center p{\r\n    grid-column:2;\r\n  }\r\n\r\n  #scm-api .search-code{\r\n    min-height:370px;\r\n\r\n    padding:28px;\r\n  }\r\n\r\n  #scm-api .search-copy{\r\n    padding:55px 0 0;\r\n  }\r\n\r\n  #scm-api .api-faq-section{\r\n    gap:50px;\r\n\r\n    padding:75px 0 85px;\r\n  }\r\n\r\n  #scm-api .api-faq-intro{\r\n    position:static;\r\n  }\r\n\r\n  #scm-api .api-cta{\r\n    min-height:auto;\r\n\r\n    padding:80px 0 90px;\r\n  }\r\n\r\n  #scm-api .cta-signal{\r\n    height:380px;\r\n  }\r\n\r\n  #scm-api .signal-b{\r\n    width:340px;\r\n    height:340px;\r\n  }\r\n\r\n  #scm-api .signal-a{\r\n    width:230px;\r\n    height:230px;\r\n  }\r\n\r\n  #scm-api .api-cta-copy h2{\r\n    font-size:clamp(48px,14vw,70px);\r\n  }\r\n\r\n}\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n  #scm-api .api-packet,\r\n  #scm-api .api-network-status i,\r\n  #scm-api .signal-a,\r\n  #scm-api .signal-b{\r\n    animation:none!important;\r\n  }\r\n\r\n}\r\n\r\n\/* ASSET POLICY:\r\n   - Photos: Unsplash\r\n   - Icons \/ diagrams: original CSS \/ text symbols\r\n   - No external icon library dependency\r\n*\/\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  var root=document.getElementById('scm-api');\r\n  if(!root) return;\r\n\r\n  \/* Smooth internal jump *\/\r\n  root.querySelectorAll('a[href^=\"#\"]').forEach(function(link){\r\n    link.addEventListener('click',function(e){\r\n      var target=root.querySelector(this.getAttribute('href'));\r\n      if(target){\r\n        e.preventDefault();\r\n        target.scrollIntoView({behavior:'smooth',block:'start'});\r\n      }\r\n    });\r\n  });\r\n\r\n  \/* One FAQ open at a time *\/\r\n  root.querySelectorAll('.api-faq details').forEach(function(item){\r\n    item.addEventListener('toggle',function(){\r\n      if(!item.open) return;\r\n\r\n      root.querySelectorAll('.api-faq details').forEach(function(other){\r\n        if(other!==item) other.open=false;\r\n      });\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>API INTEGRATION \/ CUSTOM DEVELOPMENT \/ MALAYSIA API Integration Malaysia: Connect Your Website to the Systems Your Business Uses. SYSCOMM develops API integrations and custom web connections that allow websites, ecommerce platforms and business systems to exchange data and trigger useful actions automatically. From payment gateways and customer accounts to accounting, inventory, product data, business [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5870","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/pages\/5870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/comments?post=5870"}],"version-history":[{"count":6,"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/pages\/5870\/revisions"}],"predecessor-version":[{"id":8454,"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/pages\/5870\/revisions\/8454"}],"wp:attachment":[{"href":"https:\/\/syscomm.com.my\/ms\/wp-json\/wp\/v2\/media?parent=5870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}