<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-f25b3b2537dd8272 .chartlet-f{opacity:.18}#chartlet-f25b3b2537dd8272-hs-0{left:43.75%;top:2.564%;width:10.833%;height:7.179%}#chartlet-f25b3b2537dd8272-hs-1{left:43.75%;top:17.949%;width:10.833%;height:6.154%}#chartlet-f25b3b2537dd8272-hs-2{left:43.75%;top:38.462%;width:10.833%;height:5.128%}#chartlet-f25b3b2537dd8272-hs-3{left:67.083%;top:38.462%;width:10.833%;height:5.128%}#chartlet-f25b3b2537dd8272-hs-4{left:27.083%;top:61.026%;width:10.833%;height:5.128%}#chartlet-f25b3b2537dd8272-hs-5{left:43.75%;top:61.026%;width:10.833%;height:5.128%}#chartlet-f25b3b2537dd8272-hs-6{left:27.083%;top:74.359%;width:10.833%;height:6.154%}#chartlet-f25b3b2537dd8272-hs-7{left:42.5%;top:91.795%;width:13.333%;height:5.128%}#chartlet-f25b3b2537dd8272-hs-8{left:22.111%;top:53.526%;width:14.944%;height:1.667%}#chartlet-f25b3b2537dd8272-hs-9{left:40.022%;top:53.526%;width:18.29%;height:1.667%}#chartlet-f25b3b2537dd8272-hs-10{left:61.47%;top:53.526%;width:16.227%;height:1.667%}#chartlet-f25b3b2537dd8272-hs-11{left:42.978%;top:86.346%;width:12.377%;height:1.667%}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-0:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-0:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-0:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-1:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-1:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-1:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-2:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-2:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-2:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-3:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-3:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-3:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-4:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-4:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-4:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-5:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-5:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-5:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-6:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-6:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-6:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-7:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-7:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-7:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-7 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-8:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-8{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-8:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-8 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-8:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-8 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-9:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-9{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-9:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-9 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-9:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-9 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-10:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-10{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-10:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-10 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-10:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-10 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-11:checked) #chartlet-f25b3b2537dd8272 .chartlet-f-11{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-11:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-11 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-11:checked) #chartlet-f25b3b2537dd8272 .chartlet-n-11 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(.chartlet-focus-node:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f{opacity:.18}#chartlet-f25b3b2537dd8272-m-hs-0{left:44.086%;top:2%;width:21.505%;height:5.6%}#chartlet-f25b3b2537dd8272-m-hs-1{left:43.011%;top:15.6%;width:23.656%;height:4.8%}#chartlet-f25b3b2537dd8272-m-hs-2{left:43.011%;top:34.8%;width:23.656%;height:4%}#chartlet-f25b3b2537dd8272-m-hs-3{left:70.968%;top:34.8%;width:21.505%;height:4%}#chartlet-f25b3b2537dd8272-m-hs-4{left:10.753%;top:61.2%;width:19.355%;height:4%}#chartlet-f25b3b2537dd8272-m-hs-5{left:41.935%;top:61.2%;width:25.806%;height:4%}#chartlet-f25b3b2537dd8272-m-hs-6{left:6.452%;top:73.2%;width:27.957%;height:4.8%}#chartlet-f25b3b2537dd8272-m-hs-7{left:41.935%;top:91.6%;width:25.806%;height:5.6%}#chartlet-f25b3b2537dd8272-m-hs-8{left:23.155%;top:50.1%;width:18.207%;height:4.6%}#chartlet-f25b3b2537dd8272-m-hs-9{left:46.474%;top:48.8%;width:16.728%;height:7.2%}#chartlet-f25b3b2537dd8272-m-hs-10{left:68.235%;top:48.8%;width:14.067%;height:7.2%}#chartlet-f25b3b2537dd8272-m-hs-11{left:47.391%;top:83.3%;width:14.895%;height:4.6%}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-0:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-0:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-0:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-1:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-1:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-1:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-2:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-2:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-2:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-3:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-3:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-3:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-4:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-4:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-4:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-5:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-5:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-5:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-6:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-6:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-6:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-7:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-7:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-7:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-7 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-8:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-8{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-8:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-8 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-8:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-8 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-9:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-9{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-9:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-9 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-9:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-9 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-10:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-10{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-10:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-10 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-10:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-10 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-11:checked) #chartlet-f25b3b2537dd8272-m .chartlet-f-11{opacity:1}.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-11:checked) #chartlet-f25b3b2537dd8272-m .chartlet-n-11 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-f25b3b2537dd8272-focus-11:checked) #chartlet-f25b3b2537dd8272-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-f25b3b2537dd8272-focus" checked> Show all</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-0"> Shopper</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-1"> Web shop</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-2"> Checkout</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-3"> Support</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-4"> Orders</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-5"> Payments</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-6"> Order store</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-7"> Card processor</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-8"> Orders API</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-9"> Payments API</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-focus-10"> Refunds API</label><label><input type="radio" name="chartlet-f25b3b2537dd8272-focus" class="chartlet-focus-node" id="chartlet-f25b3b2537dd8272-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="780" viewBox="0 0 960 780" id="chartlet-f25b3b2537dd8272" role="img" aria-labelledby="chartlet-f25b3b2537dd8272-title chartlet-f25b3b2537dd8272-description" class="chartlet-root"><title id="chartlet-f25b3b2537dd8272-title">Checkout and the interfaces it relies on</title><desc id="chartlet-f25b3b2537dd8272-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-f25b3b2537dd8272 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272 .chartlet-label,#chartlet-f25b3b2537dd8272 .chartlet-tick,#chartlet-f25b3b2537dd8272 .chartlet-value,#chartlet-f25b3b2537dd8272 .chartlet-value-inverse,#chartlet-f25b3b2537dd8272 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-f25b3b2537dd8272 .chartlet-value,#chartlet-f25b3b2537dd8272 .chartlet-value-inverse{font-weight:600}#chartlet-f25b3b2537dd8272 .chartlet-value{fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-f25b3b2537dd8272 .chartlet-axis-title{font-weight:600}#chartlet-f25b3b2537dd8272 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-f25b3b2537dd8272 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-f25b3b2537dd8272 .chartlet-bar,#chartlet-f25b3b2537dd8272 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-f25b3b2537dd8272 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-f25b3b2537dd8272 .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-f25b3b2537dd8272 .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-f25b3b2537dd8272 .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-f25b3b2537dd8272 .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-f25b3b2537dd8272 .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-f25b3b2537dd8272 .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-f25b3b2537dd8272 .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-f25b3b2537dd8272 .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-f25b3b2537dd8272 .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-f25b3b2537dd8272 .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-f25b3b2537dd8272 .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-f25b3b2537dd8272 .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272 .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-f25b3b2537dd8272 .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-f25b3b2537dd8272 .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-f25b3b2537dd8272 .chartlet-flow-start{stroke-width:2}#chartlet-f25b3b2537dd8272 .chartlet-flow-end{stroke-width:3}#chartlet-f25b3b2537dd8272 .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-f25b3b2537dd8272 .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-f25b3b2537dd8272 .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272 .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-f25b3b2537dd8272 .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-f25b3b2537dd8272 .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-f25b3b2537dd8272 .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-f25b3b2537dd8272 .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-f25b3b2537dd8272 .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-f25b3b2537dd8272 .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-f25b3b2537dd8272 .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-f25b3b2537dd8272 .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-f25b3b2537dd8272 .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-f25b3b2537dd8272 .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-f25b3b2537dd8272 .chartlet-flow-group{fill:var(--chartlet-accent);fill-opacity:.04;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:4 3;rx:10px}#chartlet-f25b3b2537dd8272 .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}#chartlet-f25b3b2537dd8272 .chartlet-arch-head{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet);stroke-width:1.5}#chartlet-f25b3b2537dd8272 .chartlet-arch-dot{fill:var(--chartlet-role-blue);stroke:none}#chartlet-f25b3b2537dd8272 .chartlet-arch-ball{fill:var(--chartlet-background);stroke:var(--chartlet-role-blue);stroke-width:1.5}#chartlet-f25b3b2537dd8272 .chartlet-arch-interface{font-size:11px;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272 .chartlet-arch-socket{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-linecap:round}#chartlet-f25b3b2537dd8272 .chartlet-arch-socket-main{stroke:var(--chartlet-accent)}#chartlet-f25b3b2537dd8272 .chartlet-flow-role-critical .chartlet-arch-socket{stroke:var(--chartlet-role-red)}#chartlet-f25b3b2537dd8272 .chartlet-flow-role-planned .chartlet-arch-socket{stroke:var(--chartlet-role-violet)}#chartlet-f25b3b2537dd8272 .chartlet-flow-role-deprecated .chartlet-arch-socket{stroke:var(--chartlet-role-gray)}</style><rect x="200.27" y="272" width="559.73" height="368" class="chartlet-flow-group"/><text x="208.27" y="285" text-anchor="start" class="chartlet-flow-group-label">Shop platform</text><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="472,76 472,132" class="chartlet-flow-edge chartlet-flow-main"><title>Shopper → Web shop: buys</title></polyline><polyline points="468.5,132 472,140 475.5,132 468.5,132" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="472,188 472,292" class="chartlet-flow-edge chartlet-flow-main"><title>Web shop → Checkout: submits [HTTPS]</title></polyline><polyline points="468.5,292 472,300 475.5,292 468.5,292" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><polyline points="448,340 448,389.901 284,389.901 284,414" class="chartlet-flow-edge"><title>Checkout → Orders API: places</title></polyline><polyline points="274,424 274.341,421.412 275.34,419 276.929,416.929 279,415.34 281.412,414.341 284,414 286.588,414.341 289,415.34 291.071,416.929 292.66,419 293.659,421.412 294,424" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><polyline points="472,340 472,414" class="chartlet-flow-edge chartlet-flow-main"><title>Checkout → Payments API: charges</title></polyline><polyline points="462,424 462.341,421.412 463.34,419 464.929,416.929 467,415.34 469.412,414.341 472,414 474.588,414.341 477,415.34 479.071,416.929 480.66,419 481.659,421.412 482,424" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><polyline points="696,340 696,389.901 668,389.901 668,414" class="chartlet-flow-edge"><title>Support → Refunds API: refunds</title></polyline><polyline points="658,424 658.341,421.412 659.34,419 660.929,416.929 663,415.34 665.412,414.341 668,414 670.588,414.341 673,415.34 675.071,416.929 676.66,419 677.659,421.412 678,424" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><polyline points="472,516 472,670" class="chartlet-flow-edge chartlet-flow-main"><title>Payments → Card API: [HTTPS]</title></polyline><polyline points="462,680 462.341,677.412 463.34,675 464.929,672.929 467,671.34 469.412,670.341 472,670 474.588,670.341 477,671.34 479.071,672.929 480.66,675 481.659,677.412 482,680" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><polyline points="312,516 312,572" class="chartlet-flow-edge"><title>Orders → Order store: [SQL]</title></polyline><polyline points="308.5,572 312,580 315.5,572 308.5,572" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-8"><polyline points="284,430 284,447.525 312,447.525 312,476" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-9"><polyline points="472,430 472,476" class="chartlet-flow-edge chartlet-flow-main"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-10"><polyline points="668,430 668,447.525 496,447.525 496,476" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-7 chartlet-f-11"><polyline points="472,686 472,716" 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="476" y="81" width="36.88" height="21" class="chartlet-diagram-chip"/><text x="481" y="95" text-anchor="start" class="chartlet-diagram-chip-text">buys</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><rect x="476" y="193" width="63.64" height="36" class="chartlet-diagram-chip"/><text x="481" y="207" text-anchor="start" class="chartlet-diagram-chip-text">submits</text><text x="481" y="222" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><rect x="396.8" y="345" width="47.2" height="21" class="chartlet-diagram-chip"/><text x="439" y="359" text-anchor="end" class="chartlet-diagram-chip-text">places</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><rect x="476" y="345" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="481" y="359" text-anchor="start" class="chartlet-diagram-chip-text">charges</text></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><rect x="700" y="345" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="705" y="359" text-anchor="start" class="chartlet-diagram-chip-text">refunds</text></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><rect x="476" y="521" width="63.64" height="21" class="chartlet-diagram-chip"/><text x="481" y="535" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><rect x="316" y="521" width="47.56" height="21" class="chartlet-diagram-chip"/><text x="321" y="535" 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="420" y="22.5" width="104" height="56" class="chartlet-diagram-shadow"/><rect x="420" y="20" width="104" height="56" class="chartlet-flow-node chartlet-role-violet"><title>Shopper</title></rect><circle cx="472" cy="31" r="6" class="chartlet-arch-head"/><text x="472" y="60.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="420" y="142.5" width="104" height="48" class="chartlet-diagram-shadow"/><rect x="420" y="140" width="104" height="48" class="chartlet-flow-node chartlet-role-blue"><title>Web shop</title></rect><line x1="420" y1="152" x2="524" y2="152" class="chartlet-flow-inner"/><circle cx="428" cy="146" r="1.8" class="chartlet-arch-dot"/><circle cx="434" cy="146" r="1.8" class="chartlet-arch-dot"/><circle cx="440" cy="146" r="1.8" class="chartlet-arch-dot"/><text x="472" y="174.5" 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="420" y="302.5" width="104" height="40" class="chartlet-diagram-shadow"/><rect x="420" y="300" width="104" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Checkout</title></rect><text x="472" y="324.5" 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="644" y="302.5" width="104" height="40" class="chartlet-diagram-shadow"/><rect x="644" y="300" width="104" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Support</title></rect><text x="696" y="324.5" 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" y="478.5" width="104" height="40" class="chartlet-diagram-shadow"/><rect x="260" y="476" width="104" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Orders</title></rect><text x="312" y="500.5" 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="420" y="478.5" width="104" height="40" class="chartlet-diagram-shadow"/><rect x="420" y="476" width="104" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Payments</title></rect><text x="472" y="500.5" 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,587.5 260,625.5 261.772,626.794 266.967,628 275.23,629.036 286,629.83 298.541,630.33 312,630.5 325.459,630.33 338,629.83 348.77,629.036 357.033,628 362.228,626.794 364,625.5 364,587.5 362.228,586.206 357.033,585 348.77,583.964 338,583.17 325.459,582.67 312,582.5 298.541,582.67 286,583.17 275.23,583.964 266.967,585 261.772,586.206 260,587.5 260,587.5" class="chartlet-diagram-shadow"/><polyline points="260,585 260,623 261.772,624.294 266.967,625.5 275.23,626.536 286,627.33 298.541,627.83 312,628 325.459,627.83 338,627.33 348.77,626.536 357.033,625.5 362.228,624.294 364,623 364,585 362.228,583.706 357.033,582.5 348.77,581.464 338,580.67 325.459,580.17 312,580 298.541,580.17 286,580.67 275.23,581.464 266.967,582.5 261.772,583.706 260,585 260,585" class="chartlet-flow-node chartlet-role-teal"><title>Order store</title></polyline><polyline points="260,585 261.772,586.294 266.967,587.5 275.23,588.536 286,589.33 298.541,589.83 312,590 325.459,589.83 338,589.33 348.77,588.536 357.033,587.5 362.228,586.294 364,585" class="chartlet-diagram-rim"/><text x="312" y="611.5" 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="408" y="718.5" width="128" height="40" class="chartlet-diagram-shadow"/><rect x="408" y="716" width="128" height="40" class="chartlet-flow-node chartlet-flow-external chartlet-role-gray"><title>Card processor</title></rect><text x="472" y="740.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="284" cy="424" r="6" class="chartlet-arch-ball"><title>Orders API</title></circle><text x="296" y="428" 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="472" cy="424" r="6" class="chartlet-arch-ball"><title>Payments API</title></circle><text x="484" y="428" 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="668" cy="424" r="6" class="chartlet-arch-ball"><title>Refunds API</title></circle><text x="680" y="428" 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="472" cy="680" r="6" class="chartlet-arch-ball"><title>Card API</title></circle><text x="484" y="684" text-anchor="start" class="chartlet-arch-interface">Card API</text></g></svg><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-0" for="chartlet-f25b3b2537dd8272-focus-0"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-1" for="chartlet-f25b3b2537dd8272-focus-1"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-2" for="chartlet-f25b3b2537dd8272-focus-2"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-3" for="chartlet-f25b3b2537dd8272-focus-3"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-4" for="chartlet-f25b3b2537dd8272-focus-4"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-5" for="chartlet-f25b3b2537dd8272-focus-5"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-6" for="chartlet-f25b3b2537dd8272-focus-6"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-7" for="chartlet-f25b3b2537dd8272-focus-7"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-8" for="chartlet-f25b3b2537dd8272-focus-8"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-9" for="chartlet-f25b3b2537dd8272-focus-9"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-10" for="chartlet-f25b3b2537dd8272-focus-10"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-hs-11" for="chartlet-f25b3b2537dd8272-focus-11"></label></div></div><div class="chartlet-variant-mobile"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="372" height="1000" viewBox="0 0 372 1000" id="chartlet-f25b3b2537dd8272-m" role="img" aria-labelledby="chartlet-f25b3b2537dd8272-m-title chartlet-f25b3b2537dd8272-m-description" class="chartlet-root"><title id="chartlet-f25b3b2537dd8272-m-title">Checkout and the interfaces it relies on</title><desc id="chartlet-f25b3b2537dd8272-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-f25b3b2537dd8272-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272-m .chartlet-label,#chartlet-f25b3b2537dd8272-m .chartlet-tick,#chartlet-f25b3b2537dd8272-m .chartlet-value,#chartlet-f25b3b2537dd8272-m .chartlet-value-inverse,#chartlet-f25b3b2537dd8272-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-f25b3b2537dd8272-m .chartlet-value,#chartlet-f25b3b2537dd8272-m .chartlet-value-inverse{font-weight:600}#chartlet-f25b3b2537dd8272-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-f25b3b2537dd8272-m .chartlet-axis-title{font-weight:600}#chartlet-f25b3b2537dd8272-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-f25b3b2537dd8272-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-f25b3b2537dd8272-m .chartlet-bar,#chartlet-f25b3b2537dd8272-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-f25b3b2537dd8272-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-f25b3b2537dd8272-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-f25b3b2537dd8272-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-f25b3b2537dd8272-m .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-f25b3b2537dd8272-m .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-f25b3b2537dd8272-m .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-f25b3b2537dd8272-m .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-f25b3b2537dd8272-m .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-f25b3b2537dd8272-m .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-f25b3b2537dd8272-m .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-f25b3b2537dd8272-m .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-f25b3b2537dd8272-m .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-f25b3b2537dd8272-m .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-f25b3b2537dd8272-m .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272-m .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-f25b3b2537dd8272-m .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-f25b3b2537dd8272-m .chartlet-flow-start{stroke-width:2}#chartlet-f25b3b2537dd8272-m .chartlet-flow-end{stroke-width:3}#chartlet-f25b3b2537dd8272-m .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-f25b3b2537dd8272-m .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-f25b3b2537dd8272-m .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-f25b3b2537dd8272-m .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-f25b3b2537dd8272-m .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-f25b3b2537dd8272-m .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-f25b3b2537dd8272-m .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-f25b3b2537dd8272-m .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-f25b3b2537dd8272-m .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-f25b3b2537dd8272-m .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-f25b3b2537dd8272-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-f25b3b2537dd8272-m .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}#chartlet-f25b3b2537dd8272-m .chartlet-arch-head{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet);stroke-width:1.5}#chartlet-f25b3b2537dd8272-m .chartlet-arch-dot{fill:var(--chartlet-role-blue);stroke:none}#chartlet-f25b3b2537dd8272-m .chartlet-arch-ball{fill:var(--chartlet-background);stroke:var(--chartlet-role-blue);stroke-width:1.5}#chartlet-f25b3b2537dd8272-m .chartlet-arch-interface{font-size:11px;fill:var(--chartlet-text)}#chartlet-f25b3b2537dd8272-m .chartlet-arch-socket{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-linecap:round}#chartlet-f25b3b2537dd8272-m .chartlet-arch-socket-main{stroke:var(--chartlet-accent)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-role-critical .chartlet-arch-socket{stroke:var(--chartlet-role-red)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-role-planned .chartlet-arch-socket{stroke:var(--chartlet-role-violet)}#chartlet-f25b3b2537dd8272-m .chartlet-flow-role-deprecated .chartlet-arch-socket{stroke:var(--chartlet-role-gray)}</style><rect x="12" y="320" width="344" height="472" class="chartlet-flow-group"/><text x="20" y="333" text-anchor="start" class="chartlet-flow-group-label">Shop platform</text><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="204,76 204,148" class="chartlet-flow-edge chartlet-flow-main"><title>Shopper → Web shop: buys</title></polyline><polyline points="200.5,148 204,156 207.5,148 200.5,148" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="204,204 204,340" class="chartlet-flow-edge chartlet-flow-main"><title>Web shop → Checkout: submits [HTTPS]</title></polyline><polyline points="200.5,340 204,348 207.5,340 200.5,340" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><polyline points="180,388 180,450.822 120,450.822 120,514" class="chartlet-flow-edge"><title>Checkout → Orders API: places</title></polyline><polyline points="110,524 110.341,521.412 111.34,519 112.929,516.929 115,515.34 117.412,514.341 120,514 122.588,514.341 125,515.34 127.071,516.929 128.66,519 129.659,521.412 130,524" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><polyline points="204,388 204,514" class="chartlet-flow-edge chartlet-flow-main"><title>Checkout → Payments API: charges</title></polyline><polyline points="194,524 194.341,521.412 195.34,519 196.929,516.929 199,515.34 201.412,514.341 204,514 206.588,514.341 209,515.34 211.071,516.929 212.66,519 213.659,521.412 214,524" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><polyline points="304,388 304,450.822 280,450.822 280,514" class="chartlet-flow-edge"><title>Support → Refunds API: refunds</title></polyline><polyline points="270,524 270.341,521.412 271.34,519 272.929,516.929 275,515.34 277.412,514.341 280,514 282.588,514.341 285,515.34 287.071,516.929 288.66,519 289.659,521.412 290,524" class="chartlet-arch-socket"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><polyline points="204,652 204,846" class="chartlet-flow-edge chartlet-flow-main"><title>Payments → Card API: [HTTPS]</title></polyline><polyline points="194,856 194.341,853.412 195.34,851 196.929,848.929 199,847.34 201.412,846.341 204,846 206.588,846.341 209,847.34 211.071,848.929 212.66,851 213.659,853.412 214,856" class="chartlet-arch-socket chartlet-arch-socket-main"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><polyline points="76,652 76,724" class="chartlet-flow-edge"><title>Orders → Order store: [SQL]</title></polyline><polyline points="72.5,724 76,732 79.5,724 72.5,724" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-8"><polyline points="120,530 120,579.545 76,579.545 76,612" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-9"><polyline points="204,530 204,612" class="chartlet-flow-edge chartlet-flow-main"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-10"><polyline points="280,530 280,579.545 228,579.545 228,612" class="chartlet-flow-edge"/></g><g class="chartlet-f chartlet-f-7 chartlet-f-11"><polyline points="204,862 204,916" 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="208" y="81" width="36.88" height="21" class="chartlet-diagram-chip"/><text x="213" y="95" text-anchor="start" class="chartlet-diagram-chip-text">buys</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><rect x="208" y="209" width="63.64" height="36" class="chartlet-diagram-chip"/><text x="213" y="223" text-anchor="start" class="chartlet-diagram-chip-text">submits</text><text x="213" y="238" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-8"><rect x="128.8" y="393" width="47.2" height="21" class="chartlet-diagram-chip"/><text x="171" y="407" text-anchor="end" class="chartlet-diagram-chip-text">places</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-9"><rect x="208" y="393" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="213" y="407" text-anchor="start" class="chartlet-diagram-chip-text">charges</text></g><g class="chartlet-f chartlet-f-3 chartlet-f-10"><rect x="308" y="393" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="313" y="407" text-anchor="start" class="chartlet-diagram-chip-text">refunds</text></g><g class="chartlet-f chartlet-f-5 chartlet-f-11"><rect x="208" y="657" width="63.64" height="21" class="chartlet-diagram-chip"/><text x="213" y="671" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><rect x="80" y="657" width="47.56" height="21" class="chartlet-diagram-chip"/><text x="85" y="671" 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="164" y="22.5" width="80" height="56" class="chartlet-diagram-shadow"/><rect x="164" y="20" width="80" height="56" class="chartlet-flow-node chartlet-role-violet"><title>Shopper</title></rect><circle cx="204" cy="31" r="6" class="chartlet-arch-head"/><text x="204" y="60.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="160" y="158.5" width="88" height="48" class="chartlet-diagram-shadow"/><rect x="160" y="156" width="88" height="48" class="chartlet-flow-node chartlet-role-blue"><title>Web shop</title></rect><line x1="160" y1="168" x2="248" y2="168" class="chartlet-flow-inner"/><circle cx="168" cy="162" r="1.8" class="chartlet-arch-dot"/><circle cx="174" cy="162" r="1.8" class="chartlet-arch-dot"/><circle cx="180" cy="162" r="1.8" class="chartlet-arch-dot"/><text x="204" y="190.5" 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="160" y="350.5" width="88" height="40" class="chartlet-diagram-shadow"/><rect x="160" y="348" width="88" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Checkout</title></rect><text x="204" y="372.5" 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="264" y="350.5" width="80" height="40" class="chartlet-diagram-shadow"/><rect x="264" y="348" width="80" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Support</title></rect><text x="304" y="372.5" 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="40" y="614.5" width="72" height="40" class="chartlet-diagram-shadow"/><rect x="40" y="612" width="72" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Orders</title></rect><text x="76" y="636.5" 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="156" y="614.5" width="96" height="40" class="chartlet-diagram-shadow"/><rect x="156" y="612" width="96" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Payments</title></rect><text x="204" y="636.5" 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="24,739.5 24,777.5 25.772,778.794 30.967,780 39.23,781.036 50,781.83 62.541,782.33 76,782.5 89.459,782.33 102,781.83 112.77,781.036 121.033,780 126.228,778.794 128,777.5 128,739.5 126.228,738.206 121.033,737 112.77,735.964 102,735.17 89.459,734.67 76,734.5 62.541,734.67 50,735.17 39.23,735.964 30.967,737 25.772,738.206 24,739.5 24,739.5" class="chartlet-diagram-shadow"/><polyline points="24,737 24,775 25.772,776.294 30.967,777.5 39.23,778.536 50,779.33 62.541,779.83 76,780 89.459,779.83 102,779.33 112.77,778.536 121.033,777.5 126.228,776.294 128,775 128,737 126.228,735.706 121.033,734.5 112.77,733.464 102,732.67 89.459,732.17 76,732 62.541,732.17 50,732.67 39.23,733.464 30.967,734.5 25.772,735.706 24,737 24,737" class="chartlet-flow-node chartlet-role-teal"><title>Order store</title></polyline><polyline points="24,737 25.772,738.294 30.967,739.5 39.23,740.536 50,741.33 62.541,741.83 76,742 89.459,741.83 102,741.33 112.77,740.536 121.033,739.5 126.228,738.294 128,737" class="chartlet-diagram-rim"/><text x="76" y="763.5" 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="156" y="918.5" width="96" height="56" class="chartlet-diagram-shadow"/><rect x="156" y="916" width="96" height="56" class="chartlet-flow-node chartlet-flow-external chartlet-role-gray"><title>Card processor</title></rect><text x="204" y="940.5" text-anchor="middle" class="chartlet-flow-label">Card</text><text x="204" y="956.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="120" cy="524" r="6" class="chartlet-arch-ball"><title>Orders API</title></circle><rect x="86.135" y="532" width="67.73" height="17" class="chartlet-diagram-chip"/><text x="120" y="543" 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="204" cy="524" r="6" class="chartlet-arch-ball"><title>Payments API</title></circle><rect x="172.885" y="532" width="62.23" height="30" class="chartlet-diagram-chip"/><text x="204" y="543" text-anchor="middle" class="chartlet-arch-interface">Payments</text><text x="204" y="556" 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="280" cy="524" r="6" class="chartlet-arch-ball"><title>Refunds API</title></circle><rect x="253.835" y="532" width="52.33" height="30" class="chartlet-diagram-chip"/><text x="280" y="543" text-anchor="middle" class="chartlet-arch-interface">Refunds</text><text x="280" y="556" 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="204" cy="856" r="6" class="chartlet-arch-ball"><title>Card API</title></circle><rect x="176.295" y="864" width="55.41" height="17" class="chartlet-diagram-chip"/><text x="204" y="875" text-anchor="middle" class="chartlet-arch-interface">Card API</text></g></svg><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-0" for="chartlet-f25b3b2537dd8272-focus-0"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-1" for="chartlet-f25b3b2537dd8272-focus-1"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-2" for="chartlet-f25b3b2537dd8272-focus-2"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-3" for="chartlet-f25b3b2537dd8272-focus-3"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-4" for="chartlet-f25b3b2537dd8272-focus-4"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-5" for="chartlet-f25b3b2537dd8272-focus-5"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-6" for="chartlet-f25b3b2537dd8272-focus-6"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-7" for="chartlet-f25b3b2537dd8272-focus-7"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-8" for="chartlet-f25b3b2537dd8272-focus-8"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-9" for="chartlet-f25b3b2537dd8272-focus-9"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-10" for="chartlet-f25b3b2537dd8272-focus-10"></label><label class="chartlet-hotspot" id="chartlet-f25b3b2537dd8272-m-hs-11" for="chartlet-f25b3b2537dd8272-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>