<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><style>.chartlet-stage{position:relative;display:inline-block;max-width:100%;vertical-align:top}.chartlet-stage>svg{display:block}.chartlet-hotspot{position:absolute;border-radius:8px;cursor:pointer}.chartlet-focus{margin:0 0 12px 0;font-size:13px}.chartlet-focus summary{cursor:pointer;min-height:24px}.chartlet-focus fieldset{border:none;padding:0;margin:4px 0 0 0}.chartlet-focus label{display:inline-flex;align-items:center;min-height:44px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-focus input{margin-right:4px}.chartlet-focus input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-focus-node:checked) #chartlet-dfc32a94493acb95 .chartlet-f{opacity:.18}#chartlet-dfc32a94493acb95-hs-0{left:43.895%;top:1.579%;width:10.833%;height:7.105%}#chartlet-dfc32a94493acb95-hs-1{left:43.895%;top:17.528%;width:10.833%;height:6.316%}#chartlet-dfc32a94493acb95-hs-2{left:43.895%;top:39.134%;width:10.833%;height:4.737%}#chartlet-dfc32a94493acb95-hs-3{left:66.86%;top:39.134%;width:10.833%;height:4.737%}#chartlet-dfc32a94493acb95-hs-4{left:27.152%;top:61.621%;width:10.833%;height:4.737%}#chartlet-dfc32a94493acb95-hs-5{left:43.895%;top:61.621%;width:10.833%;height:4.737%}#chartlet-dfc32a94493acb95-hs-6{left:27.152%;top:75.202%;width:10.833%;height:6.053%}#chartlet-dfc32a94493acb95-hs-7{left:42.841%;top:93.158%;width:12.941%;height:4.737%}#chartlet-dfc32a94493acb95-hs-8{left:22.306%;top:54.214%;width:14.944%;height:1.711%}#chartlet-dfc32a94493acb95-hs-9{left:40.167%;top:54.214%;width:18.29%;height:1.711%}#chartlet-dfc32a94493acb95-hs-10{left:61.373%;top:54.214%;width:16.227%;height:1.711%}#chartlet-dfc32a94493acb95-hs-11{left:43.123%;top:87.25%;width:12.377%;height:1.711%}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-0:checked) #chartlet-dfc32a94493acb95 .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-0:checked) #chartlet-dfc32a94493acb95 .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-0:checked) #chartlet-dfc32a94493acb95 .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-1:checked) #chartlet-dfc32a94493acb95 .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-1:checked) #chartlet-dfc32a94493acb95 .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-1:checked) #chartlet-dfc32a94493acb95 .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-2:checked) #chartlet-dfc32a94493acb95 .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-2:checked) #chartlet-dfc32a94493acb95 .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-2:checked) #chartlet-dfc32a94493acb95 .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-3:checked) #chartlet-dfc32a94493acb95 .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-3:checked) #chartlet-dfc32a94493acb95 .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-3:checked) #chartlet-dfc32a94493acb95 .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-4:checked) #chartlet-dfc32a94493acb95 .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-4:checked) #chartlet-dfc32a94493acb95 .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-4:checked) #chartlet-dfc32a94493acb95 .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-5:checked) #chartlet-dfc32a94493acb95 .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-5:checked) #chartlet-dfc32a94493acb95 .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-5:checked) #chartlet-dfc32a94493acb95 .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-6:checked) #chartlet-dfc32a94493acb95 .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-6:checked) #chartlet-dfc32a94493acb95 .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-6:checked) #chartlet-dfc32a94493acb95 .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-7:checked) #chartlet-dfc32a94493acb95 .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-7:checked) #chartlet-dfc32a94493acb95 .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-7:checked) #chartlet-dfc32a94493acb95 .chartlet-n-7 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-8:checked) #chartlet-dfc32a94493acb95 .chartlet-f-8{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-8:checked) #chartlet-dfc32a94493acb95 .chartlet-n-8 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-8:checked) #chartlet-dfc32a94493acb95 .chartlet-n-8 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-9:checked) #chartlet-dfc32a94493acb95 .chartlet-f-9{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-9:checked) #chartlet-dfc32a94493acb95 .chartlet-n-9 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-9:checked) #chartlet-dfc32a94493acb95 .chartlet-n-9 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-10:checked) #chartlet-dfc32a94493acb95 .chartlet-f-10{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-10:checked) #chartlet-dfc32a94493acb95 .chartlet-n-10 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-10:checked) #chartlet-dfc32a94493acb95 .chartlet-n-10 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-11:checked) #chartlet-dfc32a94493acb95 .chartlet-f-11{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-11:checked) #chartlet-dfc32a94493acb95 .chartlet-n-11 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-11:checked) #chartlet-dfc32a94493acb95 .chartlet-n-11 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(.chartlet-focus-node:checked) #chartlet-dfc32a94493acb95-m .chartlet-f{opacity:.18}#chartlet-dfc32a94493acb95-m-hs-0{left:44.895%;top:1.2%;width:21.219%;height:5.4%}#chartlet-dfc32a94493acb95-m-hs-1{left:43.902%;top:15.293%;width:23.206%;height:4.8%}#chartlet-dfc32a94493acb95-m-hs-2{left:43.884%;top:35.122%;width:23.242%;height:3.6%}#chartlet-dfc32a94493acb95-m-hs-3{left:71.722%;top:35.122%;width:21.219%;height:3.6%}#chartlet-dfc32a94493acb95-m-hs-4{left:11.681%;top:61.688%;width:19.197%;height:3.6%}#chartlet-dfc32a94493acb95-m-hs-5{left:43.27%;top:61.688%;width:24.469%;height:3.6%}#chartlet-dfc32a94493acb95-m-hs-6{left:7.059%;top:73.981%;width:28.442%;height:4.6%}#chartlet-dfc32a94493acb95-m-hs-7{left:43.072%;top:93.2%;width:24.867%;height:5.2%}#chartlet-dfc32a94493acb95-m-hs-8{left:23.604%;top:50.189%;width:18.814%;height:4.6%}#chartlet-dfc32a94493acb95-m-hs-9{left:46.862%;top:48.889%;width:17.286%;height:7.2%}#chartlet-dfc32a94493acb95-m-hs-10{left:75.063%;top:48.889%;width:14.536%;height:7.2%}#chartlet-dfc32a94493acb95-m-hs-11{left:47.809%;top:84.474%;width:15.392%;height:4.6%}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-0:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-0:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-0:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-1:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-1:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-1:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-2:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-2:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-2:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-3:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-3:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-3:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-4:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-4:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-4:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-5:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-5:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-5:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-6:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-6:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-6:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-7:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-7:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-7:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-7 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-8:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-8{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-8:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-8 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-8:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-8 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-9:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-9{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-9:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-9 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-9:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-9 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-10:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-10{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-10:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-10 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-10:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-10 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-11:checked) #chartlet-dfc32a94493acb95-m .chartlet-f-11{opacity:1}.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-11:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-11 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-dfc32a94493acb95-focus-11:checked) #chartlet-dfc32a94493acb95-m .chartlet-n-11 .chartlet-seq-box{stroke-width:3}</style><details class="chartlet-focus"><summary>Focus</summary><fieldset><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" checked> Show all</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-0"> Shopper</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-1"> Web shop</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-2"> Checkout</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-3"> Support</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-4"> Orders</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-5"> Payments</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-6"> Order store</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-7"> Card processor</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-8"> Orders API</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-9"> Payments API</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-10"> Refunds API</label><label><input type="radio" name="chartlet-dfc32a94493acb95-focus" class="chartlet-focus-node" id="chartlet-dfc32a94493acb95-focus-11"> Card API</label></fieldset></details><figure class="chartlet-figure" data-viz="chart"><figcaption>Checkout and the interfaces it relies on</figcaption><div class="chartlet-variant-desktop"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="960" height="760" viewBox="0 0 960 760" id="chartlet-dfc32a94493acb95" role="img" aria-labelledby="chartlet-dfc32a94493acb95-title chartlet-dfc32a94493acb95-description" class="chartlet-root"><title id="chartlet-dfc32a94493acb95-title">Checkout and the interfaces it relies on</title><desc id="chartlet-dfc32a94493acb95-description">Architecture diagram with 8 components and 7 connections in 1 boundary. Shop platform: Checkout, Support, Orders, Payments, Order store. Main path: Shopper → Web shop → Checkout → Payments → Card processor. Most connected: Checkout and Payments (3 connections each). Nothing leads into Shopper and Support. Nothing leads out of Order store and Card processor. Bottleneck: Checkout; without it the diagram falls apart. Shopper (person): connects to Web shop (buys). Web shop (frontend): connects to Checkout (submits, via HTTPS). Checkout (service): connects to Orders (requires Orders API, places) and Payments (requires Payments API, charges). Support (service): connects to Payments (requires Refunds API, refunds). Orders (service): connects to Order store (via SQL). Payments (service): connects to Card processor (requires Card API, via HTTPS). Order store (database): no outgoing connection. Card processor (external system): no outgoing connection. Orders provides Orders API. Payments provides Payments API and Refunds API. Card processor provides Card API.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-dfc32a94493acb95 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95 .chartlet-label,#chartlet-dfc32a94493acb95 .chartlet-tick,#chartlet-dfc32a94493acb95 .chartlet-value,#chartlet-dfc32a94493acb95 .chartlet-value-inverse,#chartlet-dfc32a94493acb95 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-dfc32a94493acb95 .chartlet-value,#chartlet-dfc32a94493acb95 .chartlet-value-inverse{font-weight:600}#chartlet-dfc32a94493acb95 .chartlet-value{fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-dfc32a94493acb95 .chartlet-axis-title{font-weight:600}#chartlet-dfc32a94493acb95 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-dfc32a94493acb95 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-dfc32a94493acb95 .chartlet-bar,#chartlet-dfc32a94493acb95 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-dfc32a94493acb95 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-dfc32a94493acb95 .chartlet-background{fill:var(--chartlet-background)}.chartlet-root{--chartlet-node:#eef3fd;--chartlet-lane:#f7f9fc;--chartlet-lane-head:#eef1f6;--chartlet-shadow:rgba(16,24,40,.09);--chartlet-role-blue:#2563eb;--chartlet-role-blue-fill:#eef3fd;--chartlet-role-green:#15803d;--chartlet-role-green-fill:#ecfdf3;--chartlet-role-amber:#b45309;--chartlet-role-amber-fill:#fff7e8;--chartlet-role-teal:#0f766e;--chartlet-role-teal-fill:#e9faf7;--chartlet-role-violet:#6d28d9;--chartlet-role-violet-fill:#f3efff;--chartlet-role-gray:#667085;--chartlet-role-gray-fill:#f7f8fa;--chartlet-role-red:#b42318;--chartlet-role-red-fill:#fef3f2}.chartlet-root.chartlet-theme-dark{--chartlet-node:#1a2436;--chartlet-lane:#121925;--chartlet-lane-head:#18212f;--chartlet-shadow:rgba(0,0,0,.45);--chartlet-role-blue:#7ea6ff;--chartlet-role-blue-fill:#1a2436;--chartlet-role-green:#4ade80;--chartlet-role-green-fill:#132a1d;--chartlet-role-amber:#fbbf24;--chartlet-role-amber-fill:#2b2210;--chartlet-role-teal:#2dd4bf;--chartlet-role-teal-fill:#0f2a27;--chartlet-role-violet:#b69cff;--chartlet-role-violet-fill:#231c38;--chartlet-role-gray:#9aa7bd;--chartlet-role-gray-fill:#161d29;--chartlet-role-red:#f97066;--chartlet-role-red-fill:#2d1616}#chartlet-dfc32a94493acb95 .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-dfc32a94493acb95 .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-dfc32a94493acb95 .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-dfc32a94493acb95 .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-dfc32a94493acb95 .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-dfc32a94493acb95 .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-dfc32a94493acb95 .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-dfc32a94493acb95 .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-dfc32a94493acb95 .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-dfc32a94493acb95 .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-dfc32a94493acb95 .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95 .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-dfc32a94493acb95 .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-dfc32a94493acb95 .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-dfc32a94493acb95 .chartlet-flow-start{stroke-width:2}#chartlet-dfc32a94493acb95 .chartlet-flow-end{stroke-width:3}#chartlet-dfc32a94493acb95 .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-dfc32a94493acb95 .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-dfc32a94493acb95 .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95 .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-dfc32a94493acb95 .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-dfc32a94493acb95 .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-dfc32a94493acb95 .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-dfc32a94493acb95 .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-dfc32a94493acb95 .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-dfc32a94493acb95 .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-dfc32a94493acb95 .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-dfc32a94493acb95 .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-dfc32a94493acb95 .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-dfc32a94493acb95 .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-dfc32a94493acb95 .chartlet-flow-group{fill:var(--chartlet-accent);fill-opacity:.04;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:4 3;rx:10px}#chartlet-dfc32a94493acb95 .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}#chartlet-dfc32a94493acb95 .chartlet-arch-head{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet);stroke-width:1.5}#chartlet-dfc32a94493acb95 .chartlet-arch-dot{fill:var(--chartlet-role-blue);stroke:none}#chartlet-dfc32a94493acb95 .chartlet-arch-ball{fill:var(--chartlet-background);stroke:var(--chartlet-role-blue);stroke-width:1.5}#chartlet-dfc32a94493acb95 .chartlet-arch-interface{font-size:11px;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95 .chartlet-arch-socket{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-linecap:round}#chartlet-dfc32a94493acb95 .chartlet-arch-socket-main{stroke:var(--chartlet-accent)}#chartlet-dfc32a94493acb95 .chartlet-flow-role-critical .chartlet-arch-socket{stroke:var(--chartlet-role-red)}#chartlet-dfc32a94493acb95 .chartlet-flow-role-planned .chartlet-arch-socket{stroke:var(--chartlet-role-violet)}#chartlet-dfc32a94493acb95 .chartlet-flow-role-deprecated .chartlet-arch-socket{stroke:var(--chartlet-role-gray)}</style><rect x="202.141" y="269.418" width="555.719" height="360.114" class="chartlet-flow-group"/><text x="210.141" y="282.418" text-anchor="start" class="chartlet-flow-group-label">Shop platform</text><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="473.391,66 473.391,125.215" class="chartlet-flow-edge chartlet-flow-main"><title>Shopper → Web shop: buys</title></polyline><polyline points="469.891,125.215 473.391,133.215 476.891,125.215 469.891,125.215" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="473.391,181.215 473.391,289.418" class="chartlet-flow-edge chartlet-flow-main"><title>Web shop → Checkout: submits [HTTPS]</title></polyline><polyline points="469.891,289.418 473.391,297.418 476.891,289.418 469.891,289.418" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><polyline points="449.391,333.418 449.391,384.684 285.871,384.684 285.871,408.525" class="chartlet-flow-edge"><title>Checkout → Orders API: places</title></polyline><polyline points="275.871,418.525 276.211,415.937 277.21,413.525 278.8,411.454 280.871,409.865 283.283,408.866 285.871,408.525 288.459,408.866 290.871,409.865 292.942,411.454 294.531,413.525 295.53,415.937 295.871,418.525" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><polyline points="473.391,333.418 473.391,408.525" class="chartlet-flow-edge chartlet-flow-main"><title>Checkout → Payments API: charges</title></polyline><polyline points="463.391,418.525 463.731,415.937 464.73,413.525 466.32,411.454 468.391,409.865 470.803,408.866 473.391,408.525 475.979,408.866 478.391,409.865 480.462,411.454 482.051,413.525 483.05,415.937 483.391,418.525" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><polyline points="693.859,333.418 693.859,384.684 667.071,384.684 667.071,408.525" class="chartlet-flow-edge"><title>Support → Refunds API: refunds</title></polyline><polyline points="657.071,418.525 657.411,415.937 658.41,413.525 660,411.454 662.071,409.865 664.483,408.866 667.071,408.525 669.659,408.866 672.071,409.865 674.142,411.454 675.731,413.525 676.73,415.937 677.071,418.525" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><polyline points="473.391,504.316 473.391,659.601" class="chartlet-flow-edge chartlet-flow-main"><title>Payments → Card API: [HTTPS]</title></polyline><polyline points="463.391,669.601 463.731,667.013 464.73,664.601 466.32,662.53 468.391,660.941 470.803,659.942 473.391,659.601 475.979,659.942 478.391,660.941 480.462,662.53 482.051,664.601 483.05,667.013 483.391,669.601" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><polyline points="312.659,504.316 312.659,563.532" class="chartlet-flow-edge"><title>Orders → Order store: [SQL]</title></polyline><polyline points="309.159,563.532 312.659,571.532 316.159,563.532 309.159,563.532" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-8"><polyline points="285.871,424.525 285.871,440.975 312.659,440.975 312.659,468.316" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-9"><polyline points="473.391,424.525 473.391,468.316" class="chartlet-flow-edge chartlet-flow-main"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-10"><polyline points="667.071,424.525 667.071,440.975 497.391,440.975 497.391,468.316" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-7 chartlet-f-11"><polyline points="473.391,675.601 473.391,708" class="chartlet-flow-edge chartlet-flow-main"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-8 chartlet-f-9"></g><g class="chartlet-f chartlet-n-3 chartlet-f-3 chartlet-f-10"></g><g class="chartlet-f chartlet-n-4 chartlet-f-4 chartlet-f-6 chartlet-f-8"></g><g class="chartlet-f chartlet-n-5 chartlet-f-5 chartlet-f-9 chartlet-f-10 chartlet-f-11"></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6"></g><g class="chartlet-f chartlet-n-7 chartlet-f-7 chartlet-f-11"></g><g class="chartlet-f chartlet-n-8 chartlet-f-2 chartlet-f-4 chartlet-f-8"></g><g class="chartlet-f chartlet-n-9 chartlet-f-2 chartlet-f-5 chartlet-f-9"></g><g class="chartlet-f chartlet-n-10 chartlet-f-3 chartlet-f-5 chartlet-f-10"></g><g class="chartlet-f chartlet-n-11 chartlet-f-5 chartlet-f-7 chartlet-f-11"></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><rect x="477.391" y="71" width="36.88" height="21" class="chartlet-diagram-chip"/><text x="482.391" y="85" text-anchor="start" class="chartlet-diagram-chip-text">buys</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><rect x="477.391" y="186.215" width="63.64" height="36" class="chartlet-diagram-chip"/><text x="482.391" y="200.215" text-anchor="start" class="chartlet-diagram-chip-text">submits</text><text x="482.391" y="215.215" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><rect x="398.191" y="338.418" width="47.2" height="21" class="chartlet-diagram-chip"/><text x="440.391" y="352.418" text-anchor="end" class="chartlet-diagram-chip-text">places</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><rect x="477.391" y="338.418" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="482.391" y="352.418" text-anchor="start" class="chartlet-diagram-chip-text">charges</text></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><rect x="697.859" y="338.418" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="702.859" y="352.418" text-anchor="start" class="chartlet-diagram-chip-text">refunds</text></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><rect x="477.391" y="509.316" width="63.64" height="21" class="chartlet-diagram-chip"/><text x="482.391" y="523.316" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><rect x="316.659" y="509.316" width="47.56" height="21" class="chartlet-diagram-chip"/><text x="321.659" y="523.316" text-anchor="start" class="chartlet-diagram-chip-text">[SQL]</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><rect x="421.391" y="14.5" width="104" height="54" class="chartlet-diagram-shadow"/><rect x="421.391" y="12" width="104" height="54" class="chartlet-flow-node chartlet-role-violet"><title>Shopper</title></rect><circle cx="473.391" cy="23" r="6" class="chartlet-arch-head"/><text x="473.391" y="51.5" text-anchor="middle" class="chartlet-flow-label">Shopper</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="421.391" y="135.715" width="104" height="48" class="chartlet-diagram-shadow"/><rect x="421.391" y="133.215" width="104" height="48" class="chartlet-flow-node chartlet-role-blue"><title>Web shop</title></rect><line x1="421.391" y1="145.215" x2="525.391" y2="145.215" class="chartlet-flow-inner"/><circle cx="429.391" cy="139.215" r="1.8" class="chartlet-arch-dot"/><circle cx="435.391" cy="139.215" r="1.8" class="chartlet-arch-dot"/><circle cx="441.391" cy="139.215" r="1.8" class="chartlet-arch-dot"/><text x="473.391" y="167.715" text-anchor="middle" class="chartlet-flow-label">Web shop</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-8 chartlet-f-9"><rect x="421.391" y="299.918" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="421.391" y="297.418" width="104" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Checkout</title></rect><text x="473.391" y="319.918" text-anchor="middle" class="chartlet-flow-label">Checkout</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-3 chartlet-f-10"><rect x="641.859" y="299.918" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="641.859" y="297.418" width="104" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Support</title></rect><text x="693.859" y="319.918" text-anchor="middle" class="chartlet-flow-label">Support</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-4 chartlet-f-6 chartlet-f-8"><rect x="260.659" y="470.816" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="260.659" y="468.316" width="104" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Orders</title></rect><text x="312.659" y="490.816" text-anchor="middle" class="chartlet-flow-label">Orders</text></g><g class="chartlet-f chartlet-n-5 chartlet-f-5 chartlet-f-9 chartlet-f-10 chartlet-f-11"><rect x="421.391" y="470.816" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="421.391" y="468.316" width="104" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Payments</title></rect><text x="473.391" y="490.816" text-anchor="middle" class="chartlet-flow-label">Payments</text></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6"><polyline points="260.659,579.032 260.659,615.032 262.431,616.326 267.626,617.532 275.89,618.567 286.659,619.362 299.201,619.861 312.659,620.032 326.118,619.861 338.659,619.362 349.429,618.567 357.693,617.532 362.887,616.326 364.659,615.032 364.659,579.032 362.887,577.738 357.693,576.532 349.429,575.496 338.659,574.702 326.118,574.202 312.659,574.032 299.201,574.202 286.659,574.702 275.89,575.496 267.626,576.532 262.431,577.738 260.659,579.032 260.659,579.032" class="chartlet-diagram-shadow"/><polyline points="260.659,576.532 260.659,612.532 262.431,613.826 267.626,615.032 275.89,616.067 286.659,616.862 299.201,617.361 312.659,617.532 326.118,617.361 338.659,616.862 349.429,616.067 357.693,615.032 362.887,613.826 364.659,612.532 364.659,576.532 362.887,575.238 357.693,574.032 349.429,572.996 338.659,572.202 326.118,571.702 312.659,571.532 299.201,571.702 286.659,572.202 275.89,572.996 267.626,574.032 262.431,575.238 260.659,576.532 260.659,576.532" class="chartlet-flow-node chartlet-role-teal"><title>Order store</title></polyline><polyline points="260.659,576.532 262.431,577.826 267.626,579.032 275.89,580.067 286.659,580.862 299.201,581.361 312.659,581.532 326.118,581.361 338.659,580.862 349.429,580.067 357.693,579.032 362.887,577.826 364.659,576.532" class="chartlet-diagram-rim"/><text x="312.659" y="602.032" text-anchor="middle" class="chartlet-flow-label">Order store</text></g><g class="chartlet-f chartlet-n-7 chartlet-f-7 chartlet-f-11"><rect x="411.276" y="710.5" width="124.23" height="36" class="chartlet-diagram-shadow"/><rect x="411.276" y="708" width="124.23" height="36" class="chartlet-flow-node chartlet-flow-external chartlet-role-gray"><title>Card processor</title></rect><text x="473.391" y="730.5" text-anchor="middle" class="chartlet-flow-label">Card processor</text></g><g class="chartlet-f chartlet-n-8 chartlet-f-2 chartlet-f-4 chartlet-f-8"><circle cx="285.871" cy="418.525" r="6" class="chartlet-arch-ball"><title>Orders API</title></circle><text x="297.871" y="422.525" text-anchor="start" class="chartlet-arch-interface">Orders API</text></g><g class="chartlet-f chartlet-n-9 chartlet-f-2 chartlet-f-5 chartlet-f-9"><circle cx="473.391" cy="418.525" r="6" class="chartlet-arch-ball"><title>Payments API</title></circle><text x="485.391" y="422.525" text-anchor="start" class="chartlet-arch-interface">Payments API</text></g><g class="chartlet-f chartlet-n-10 chartlet-f-3 chartlet-f-5 chartlet-f-10"><circle cx="667.071" cy="418.525" r="6" class="chartlet-arch-ball"><title>Refunds API</title></circle><text x="679.071" y="422.525" text-anchor="start" class="chartlet-arch-interface">Refunds API</text></g><g class="chartlet-f chartlet-n-11 chartlet-f-5 chartlet-f-7 chartlet-f-11"><circle cx="473.391" cy="669.601" r="6" class="chartlet-arch-ball"><title>Card API</title></circle><text x="485.391" y="673.601" text-anchor="start" class="chartlet-arch-interface">Card API</text></g></svg><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-0" for="chartlet-dfc32a94493acb95-focus-0"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-1" for="chartlet-dfc32a94493acb95-focus-1"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-2" for="chartlet-dfc32a94493acb95-focus-2"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-3" for="chartlet-dfc32a94493acb95-focus-3"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-4" for="chartlet-dfc32a94493acb95-focus-4"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-5" for="chartlet-dfc32a94493acb95-focus-5"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-6" for="chartlet-dfc32a94493acb95-focus-6"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-7" for="chartlet-dfc32a94493acb95-focus-7"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-8" for="chartlet-dfc32a94493acb95-focus-8"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-9" for="chartlet-dfc32a94493acb95-focus-9"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-10" for="chartlet-dfc32a94493acb95-focus-10"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-hs-11" for="chartlet-dfc32a94493acb95-focus-11"></label></div></div><div class="chartlet-variant-mobile"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="360" height="1000" viewBox="0 0 360 1000" id="chartlet-dfc32a94493acb95-m" role="img" aria-labelledby="chartlet-dfc32a94493acb95-m-title chartlet-dfc32a94493acb95-m-description" class="chartlet-root"><title id="chartlet-dfc32a94493acb95-m-title">Checkout and the interfaces it relies on</title><desc id="chartlet-dfc32a94493acb95-m-description">Architecture diagram with 8 components and 7 connections in 1 boundary. Shop platform: Checkout, Support, Orders, Payments, Order store. Main path: Shopper → Web shop → Checkout → Payments → Card processor. Most connected: Checkout and Payments (3 connections each). Nothing leads into Shopper and Support. Nothing leads out of Order store and Card processor. Bottleneck: Checkout; without it the diagram falls apart. Shopper (person): connects to Web shop (buys). Web shop (frontend): connects to Checkout (submits, via HTTPS). Checkout (service): connects to Orders (requires Orders API, places) and Payments (requires Payments API, charges). Support (service): connects to Payments (requires Refunds API, refunds). Orders (service): connects to Order store (via SQL). Payments (service): connects to Card processor (requires Card API, via HTTPS). Order store (database): no outgoing connection. Card processor (external system): no outgoing connection. Orders provides Orders API. Payments provides Payments API and Refunds API. Card processor provides Card API.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-dfc32a94493acb95-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95-m .chartlet-label,#chartlet-dfc32a94493acb95-m .chartlet-tick,#chartlet-dfc32a94493acb95-m .chartlet-value,#chartlet-dfc32a94493acb95-m .chartlet-value-inverse,#chartlet-dfc32a94493acb95-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-dfc32a94493acb95-m .chartlet-value,#chartlet-dfc32a94493acb95-m .chartlet-value-inverse{font-weight:600}#chartlet-dfc32a94493acb95-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-dfc32a94493acb95-m .chartlet-axis-title{font-weight:600}#chartlet-dfc32a94493acb95-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-dfc32a94493acb95-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-dfc32a94493acb95-m .chartlet-bar,#chartlet-dfc32a94493acb95-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-dfc32a94493acb95-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-dfc32a94493acb95-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-dfc32a94493acb95-m .chartlet-title-small{font-size:18px}.chartlet-root{--chartlet-node:#eef3fd;--chartlet-lane:#f7f9fc;--chartlet-lane-head:#eef1f6;--chartlet-shadow:rgba(16,24,40,.09);--chartlet-role-blue:#2563eb;--chartlet-role-blue-fill:#eef3fd;--chartlet-role-green:#15803d;--chartlet-role-green-fill:#ecfdf3;--chartlet-role-amber:#b45309;--chartlet-role-amber-fill:#fff7e8;--chartlet-role-teal:#0f766e;--chartlet-role-teal-fill:#e9faf7;--chartlet-role-violet:#6d28d9;--chartlet-role-violet-fill:#f3efff;--chartlet-role-gray:#667085;--chartlet-role-gray-fill:#f7f8fa;--chartlet-role-red:#b42318;--chartlet-role-red-fill:#fef3f2}.chartlet-root.chartlet-theme-dark{--chartlet-node:#1a2436;--chartlet-lane:#121925;--chartlet-lane-head:#18212f;--chartlet-shadow:rgba(0,0,0,.45);--chartlet-role-blue:#7ea6ff;--chartlet-role-blue-fill:#1a2436;--chartlet-role-green:#4ade80;--chartlet-role-green-fill:#132a1d;--chartlet-role-amber:#fbbf24;--chartlet-role-amber-fill:#2b2210;--chartlet-role-teal:#2dd4bf;--chartlet-role-teal-fill:#0f2a27;--chartlet-role-violet:#b69cff;--chartlet-role-violet-fill:#231c38;--chartlet-role-gray:#9aa7bd;--chartlet-role-gray-fill:#161d29;--chartlet-role-red:#f97066;--chartlet-role-red-fill:#2d1616}#chartlet-dfc32a94493acb95-m .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-dfc32a94493acb95-m .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-dfc32a94493acb95-m .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-dfc32a94493acb95-m .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-dfc32a94493acb95-m .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-dfc32a94493acb95-m .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-dfc32a94493acb95-m .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-dfc32a94493acb95-m .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-dfc32a94493acb95-m .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-dfc32a94493acb95-m .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-dfc32a94493acb95-m .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95-m .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-dfc32a94493acb95-m .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-dfc32a94493acb95-m .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-dfc32a94493acb95-m .chartlet-flow-start{stroke-width:2}#chartlet-dfc32a94493acb95-m .chartlet-flow-end{stroke-width:3}#chartlet-dfc32a94493acb95-m .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-dfc32a94493acb95-m .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-dfc32a94493acb95-m .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95-m .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-dfc32a94493acb95-m .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-dfc32a94493acb95-m .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-dfc32a94493acb95-m .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-dfc32a94493acb95-m .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-dfc32a94493acb95-m .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-dfc32a94493acb95-m .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-dfc32a94493acb95-m .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-dfc32a94493acb95-m .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-dfc32a94493acb95-m .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-dfc32a94493acb95-m .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-dfc32a94493acb95-m .chartlet-flow-group{fill:var(--chartlet-accent);fill-opacity:.04;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:4 3;rx:10px}#chartlet-dfc32a94493acb95-m .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}#chartlet-dfc32a94493acb95-m .chartlet-arch-head{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet);stroke-width:1.5}#chartlet-dfc32a94493acb95-m .chartlet-arch-dot{fill:var(--chartlet-role-blue);stroke:none}#chartlet-dfc32a94493acb95-m .chartlet-arch-ball{fill:var(--chartlet-background);stroke:var(--chartlet-role-blue);stroke-width:1.5}#chartlet-dfc32a94493acb95-m .chartlet-arch-interface{font-size:11px;fill:var(--chartlet-text)}#chartlet-dfc32a94493acb95-m .chartlet-arch-socket{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-linecap:round}#chartlet-dfc32a94493acb95-m .chartlet-arch-socket-main{stroke:var(--chartlet-accent)}#chartlet-dfc32a94493acb95-m .chartlet-flow-role-critical .chartlet-arch-socket{stroke:var(--chartlet-role-red)}#chartlet-dfc32a94493acb95-m .chartlet-flow-role-planned .chartlet-arch-socket{stroke:var(--chartlet-role-violet)}#chartlet-dfc32a94493acb95-m .chartlet-flow-role-deprecated .chartlet-arch-socket{stroke:var(--chartlet-role-gray)}</style><rect x="13.412" y="323.22" width="333.175" height="474.587" class="chartlet-flow-group"/><text x="21.412" y="336.22" text-anchor="start" class="chartlet-flow-group-label">Shop platform</text><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="199.818,66 199.818,144.932" class="chartlet-flow-edge chartlet-flow-main"><title>Shopper → Web shop: buys</title></polyline><polyline points="196.318,144.932 199.818,152.932 203.318,144.932 196.318,144.932" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="199.818,200.932 199.818,343.22" class="chartlet-flow-edge chartlet-flow-main"><title>Web shop → Checkout: submits [HTTPS]</title></polyline><polyline points="196.318,343.22 199.818,351.22 203.318,343.22 196.318,343.22" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><polyline points="175.818,387.22 175.818,453.524 118.838,453.524 118.838,514.886" class="chartlet-flow-edge"><title>Checkout → Orders API: places</title></polyline><polyline points="108.838,524.886 109.179,522.298 110.178,519.886 111.767,517.815 113.838,516.226 116.25,515.227 118.838,514.886 121.426,515.227 123.838,516.226 125.909,517.815 127.498,519.886 128.497,522.298 128.838,524.886" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><polyline points="199.818,387.22 199.818,514.886" class="chartlet-flow-edge chartlet-flow-main"><title>Checkout → Payments API: charges</title></polyline><polyline points="189.818,524.886 190.159,522.298 191.158,519.886 192.747,517.815 194.818,516.226 197.23,515.227 199.818,514.886 202.406,515.227 204.818,516.226 206.889,517.815 208.478,519.886 209.477,522.298 209.818,524.886" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><polyline points="296.393,387.22 296.393,514.886" class="chartlet-flow-edge"><title>Support → Refunds API: refunds</title></polyline><polyline points="286.393,524.886 286.733,522.298 287.732,519.886 289.322,517.815 291.393,516.226 293.804,515.227 296.393,514.886 298.981,515.227 301.393,516.226 303.464,517.815 305.053,519.886 306.052,522.298 306.393,524.886" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><polyline points="199.818,652.876 199.818,857.744" class="chartlet-flow-edge chartlet-flow-main"><title>Payments → Card API: [HTTPS]</title></polyline><polyline points="189.818,867.744 190.159,865.156 191.158,862.744 192.747,860.673 194.818,859.084 197.23,858.085 199.818,857.744 202.406,858.085 204.818,859.084 206.889,860.673 208.478,862.744 209.477,865.156 209.818,867.744" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><polyline points="76.607,652.876 76.607,731.808" class="chartlet-flow-edge"><title>Orders → Order store: [SQL]</title></polyline><polyline points="73.107,731.808 76.607,739.808 80.107,731.808 73.107,731.808" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-8"><polyline points="118.838,530.886 118.838,581.514 76.607,581.514 76.607,616.876" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-9"><polyline points="199.818,530.886 199.818,616.876" class="chartlet-flow-edge chartlet-flow-main"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-10"><polyline points="296.393,530.886 296.393,581.514 223.818,581.514 223.818,616.876" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-7 chartlet-f-11"><polyline points="199.818,873.744 199.818,932" class="chartlet-flow-edge chartlet-flow-main"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-8 chartlet-f-9"></g><g class="chartlet-f chartlet-n-3 chartlet-f-3 chartlet-f-10"></g><g class="chartlet-f chartlet-n-4 chartlet-f-4 chartlet-f-6 chartlet-f-8"></g><g class="chartlet-f chartlet-n-5 chartlet-f-5 chartlet-f-9 chartlet-f-10 chartlet-f-11"></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6"></g><g class="chartlet-f chartlet-n-7 chartlet-f-7 chartlet-f-11"></g><g class="chartlet-f chartlet-n-8 chartlet-f-2 chartlet-f-4 chartlet-f-8"></g><g class="chartlet-f chartlet-n-9 chartlet-f-2 chartlet-f-5 chartlet-f-9"></g><g class="chartlet-f chartlet-n-10 chartlet-f-3 chartlet-f-5 chartlet-f-10"></g><g class="chartlet-f chartlet-n-11 chartlet-f-5 chartlet-f-7 chartlet-f-11"></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><rect x="203.818" y="71" width="36.88" height="21" class="chartlet-diagram-chip"/><text x="208.818" y="85" text-anchor="start" class="chartlet-diagram-chip-text">buys</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><rect x="203.818" y="205.932" width="63.64" height="36" class="chartlet-diagram-chip"/><text x="208.818" y="219.932" text-anchor="start" class="chartlet-diagram-chip-text">submits</text><text x="208.818" y="234.932" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><rect x="124.618" y="392.22" width="47.2" height="21" class="chartlet-diagram-chip"/><text x="166.818" y="406.22" text-anchor="end" class="chartlet-diagram-chip-text">places</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><rect x="203.818" y="392.22" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="208.818" y="406.22" text-anchor="start" class="chartlet-diagram-chip-text">charges</text></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><rect x="300.393" y="392.22" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="305.393" y="406.22" text-anchor="start" class="chartlet-diagram-chip-text">refunds</text></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><rect x="203.818" y="657.876" width="63.64" height="21" class="chartlet-diagram-chip"/><text x="208.818" y="671.876" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><rect x="80.607" y="657.876" width="47.56" height="21" class="chartlet-diagram-chip"/><text x="85.607" y="671.876" text-anchor="start" class="chartlet-diagram-chip-text">[SQL]</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><rect x="161.623" y="14.5" width="76.39" height="54" class="chartlet-diagram-shadow"/><rect x="161.623" y="12" width="76.39" height="54" class="chartlet-flow-node chartlet-role-violet"><title>Shopper</title></rect><circle cx="199.818" cy="23" r="6" class="chartlet-arch-head"/><text x="199.818" y="51.5" text-anchor="middle" class="chartlet-flow-label">Shopper</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="158.048" y="155.432" width="83.54" height="48" class="chartlet-diagram-shadow"/><rect x="158.048" y="152.932" width="83.54" height="48" class="chartlet-flow-node chartlet-role-blue"><title>Web shop</title></rect><line x1="158.048" y1="164.932" x2="241.588" y2="164.932" class="chartlet-flow-inner"/><circle cx="166.048" cy="158.932" r="1.8" class="chartlet-arch-dot"/><circle cx="172.048" cy="158.932" r="1.8" class="chartlet-arch-dot"/><circle cx="178.048" cy="158.932" r="1.8" class="chartlet-arch-dot"/><text x="199.818" y="187.432" text-anchor="middle" class="chartlet-flow-label">Web shop</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-8 chartlet-f-9"><rect x="157.983" y="353.72" width="83.67" height="36" class="chartlet-diagram-shadow"/><rect x="157.983" y="351.22" width="83.67" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Checkout</title></rect><text x="199.818" y="373.72" text-anchor="middle" class="chartlet-flow-label">Checkout</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-3 chartlet-f-10"><rect x="258.198" y="353.72" width="76.39" height="36" class="chartlet-diagram-shadow"/><rect x="258.198" y="351.22" width="76.39" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Support</title></rect><text x="296.393" y="373.72" text-anchor="middle" class="chartlet-flow-label">Support</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-4 chartlet-f-6 chartlet-f-8"><rect x="42.052" y="619.376" width="69.11" height="36" class="chartlet-diagram-shadow"/><rect x="42.052" y="616.876" width="69.11" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Orders</title></rect><text x="76.607" y="639.376" text-anchor="middle" class="chartlet-flow-label">Orders</text></g><g class="chartlet-f chartlet-n-5 chartlet-f-5 chartlet-f-9 chartlet-f-10 chartlet-f-11"><rect x="155.773" y="619.376" width="88.09" height="36" class="chartlet-diagram-shadow"/><rect x="155.773" y="616.876" width="88.09" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Payments</title></rect><text x="199.818" y="639.376" text-anchor="middle" class="chartlet-flow-label">Payments</text></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6"><polyline points="25.412,747.308 25.412,783.308 27.157,784.602 32.271,785.808 40.407,786.843 51.01,787.638 63.357,788.137 76.607,788.308 89.858,788.137 102.205,787.638 112.808,786.843 120.944,785.808 126.058,784.602 127.802,783.308 127.802,747.308 126.058,746.013 120.944,744.808 112.808,743.772 102.205,742.977 89.858,742.478 76.607,742.308 63.357,742.478 51.01,742.977 40.407,743.772 32.271,744.808 27.157,746.013 25.412,747.308 25.412,747.308" class="chartlet-diagram-shadow"/><polyline points="25.412,744.808 25.412,780.808 27.157,782.102 32.271,783.308 40.407,784.343 51.01,785.138 63.357,785.637 76.607,785.808 89.858,785.637 102.205,785.138 112.808,784.343 120.944,783.308 126.058,782.102 127.802,780.808 127.802,744.808 126.058,743.513 120.944,742.308 112.808,741.272 102.205,740.477 89.858,739.978 76.607,739.808 63.357,739.978 51.01,740.477 40.407,741.272 32.271,742.308 27.157,743.513 25.412,744.808 25.412,744.808" class="chartlet-flow-node chartlet-role-teal"><title>Order store</title></polyline><polyline points="25.412,744.808 27.157,746.102 32.271,747.308 40.407,748.343 51.01,749.138 63.357,749.637 76.607,749.808 89.858,749.637 102.205,749.138 112.808,748.343 120.944,747.308 126.058,746.102 127.802,744.808" class="chartlet-diagram-rim"/><text x="76.607" y="770.308" text-anchor="middle" class="chartlet-flow-label">Order store</text></g><g class="chartlet-f chartlet-n-7 chartlet-f-7 chartlet-f-11"><rect x="155.058" y="934.5" width="89.52" height="52" class="chartlet-diagram-shadow"/><rect x="155.058" y="932" width="89.52" height="52" class="chartlet-flow-node chartlet-flow-external chartlet-role-gray"><title>Card processor</title></rect><text x="199.818" y="954.5" text-anchor="middle" class="chartlet-flow-label">Card</text><text x="199.818" y="970.5" text-anchor="middle" class="chartlet-flow-label">processor</text></g><g class="chartlet-f chartlet-n-8 chartlet-f-2 chartlet-f-4 chartlet-f-8"><circle cx="118.838" cy="524.886" r="6" class="chartlet-arch-ball"><title>Orders API</title></circle><rect x="84.973" y="532.886" width="67.73" height="17" class="chartlet-diagram-chip"/><text x="118.838" y="543.886" text-anchor="middle" class="chartlet-arch-interface">Orders API</text></g><g class="chartlet-f chartlet-n-9 chartlet-f-2 chartlet-f-5 chartlet-f-9"><circle cx="199.818" cy="524.886" r="6" class="chartlet-arch-ball"><title>Payments API</title></circle><rect x="168.703" y="532.886" width="62.23" height="30" class="chartlet-diagram-chip"/><text x="199.818" y="543.886" text-anchor="middle" class="chartlet-arch-interface">Payments</text><text x="199.818" y="556.886" text-anchor="middle" class="chartlet-arch-interface">API</text></g><g class="chartlet-f chartlet-n-10 chartlet-f-3 chartlet-f-5 chartlet-f-10"><circle cx="296.393" cy="524.886" r="6" class="chartlet-arch-ball"><title>Refunds API</title></circle><rect x="270.228" y="532.886" width="52.33" height="30" class="chartlet-diagram-chip"/><text x="296.393" y="543.886" text-anchor="middle" class="chartlet-arch-interface">Refunds</text><text x="296.393" y="556.886" text-anchor="middle" class="chartlet-arch-interface">API</text></g><g class="chartlet-f chartlet-n-11 chartlet-f-5 chartlet-f-7 chartlet-f-11"><circle cx="199.818" cy="867.744" r="6" class="chartlet-arch-ball"><title>Card API</title></circle><rect x="172.113" y="875.744" width="55.41" height="17" class="chartlet-diagram-chip"/><text x="199.818" y="886.744" text-anchor="middle" class="chartlet-arch-interface">Card API</text></g></svg><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-0" for="chartlet-dfc32a94493acb95-focus-0"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-1" for="chartlet-dfc32a94493acb95-focus-1"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-2" for="chartlet-dfc32a94493acb95-focus-2"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-3" for="chartlet-dfc32a94493acb95-focus-3"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-4" for="chartlet-dfc32a94493acb95-focus-4"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-5" for="chartlet-dfc32a94493acb95-focus-5"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-6" for="chartlet-dfc32a94493acb95-focus-6"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-7" for="chartlet-dfc32a94493acb95-focus-7"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-8" for="chartlet-dfc32a94493acb95-focus-8"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-9" for="chartlet-dfc32a94493acb95-focus-9"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-10" for="chartlet-dfc32a94493acb95-focus-10"></label><label class="chartlet-hotspot" id="chartlet-dfc32a94493acb95-m-hs-11" for="chartlet-dfc32a94493acb95-focus-11"></label></div></div><p class="chartlet-source">Source: Platform handbook, payment path</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Checkout and the interfaces it relies on</caption><thead><tr><th scope="col">Component</th><th scope="col">Kind</th><th scope="col">Boundary</th><th scope="col">Provides</th><th scope="col">Connects to</th></tr></thead><tbody><tr><th scope="row">Shopper</th><td>person</td><td></td><td></td><td>Web shop (buys)</td></tr><tr><th scope="row">Web shop</th><td>frontend</td><td></td><td></td><td>Checkout (submits, via HTTPS)</td></tr><tr><th scope="row">Checkout</th><td>service</td><td>Shop platform</td><td></td><td>Orders (requires Orders API, places), Payments (requires Payments API, charges)</td></tr><tr><th scope="row">Support</th><td>service</td><td>Shop platform</td><td></td><td>Payments (requires Refunds API, refunds)</td></tr><tr><th scope="row">Orders</th><td>service</td><td>Shop platform</td><td>Orders API</td><td>Order store (via SQL)</td></tr><tr><th scope="row">Payments</th><td>service</td><td>Shop platform</td><td>Payments API, Refunds API</td><td>Card processor (requires Card API, via HTTPS)</td></tr><tr><th scope="row">Order store</th><td>database</td><td>Shop platform</td><td></td><td></td></tr><tr><th scope="row">Card processor</th><td>external system</td><td></td><td>Card API</td><td></td></tr></tbody></table></details></figure></div>