<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-c86a48fd2fc734ff .chartlet-f{opacity:.18}#chartlet-c86a48fd2fc734ff-hs-0{left:51.667%;top:2.591%;width:14.444%;height:5.181%}#chartlet-c86a48fd2fc734ff-hs-1{left:49.444%;top:13.99%;width:18.889%;height:7.254%}#chartlet-c86a48fd2fc734ff-hs-2{left:48.889%;top:30.052%;width:20%;height:5.181%}#chartlet-c86a48fd2fc734ff-hs-3{left:48.333%;top:46.114%;width:21.111%;height:8.29%}#chartlet-c86a48fd2fc734ff-hs-4{left:50.556%;top:63.212%;width:16.667%;height:5.181%}#chartlet-c86a48fd2fc734ff-hs-5{left:32.778%;top:79.275%;width:14.444%;height:8.29%}#chartlet-c86a48fd2fc734ff-hs-6{left:51.667%;top:80.829%;width:14.444%;height:5.181%}#chartlet-c86a48fd2fc734ff-hs-7{left:51.667%;top:91.71%;width:14.444%;height:5.181%}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-0:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-0:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-0:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-1:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-1:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-1:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-2:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-2:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-2:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-3:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-3:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-3:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-4:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-4:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-4:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-5:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-5:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-5:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-6:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-6:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-6:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-7:checked) #chartlet-c86a48fd2fc734ff .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-7:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-7:checked) #chartlet-c86a48fd2fc734ff .chartlet-n-7 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(.chartlet-focus-node:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f{opacity:.18}#chartlet-c86a48fd2fc734ff-m-hs-0{left:50%;top:1.778%;width:26.667%;height:4.444%}#chartlet-c86a48fd2fc734ff-m-hs-1{left:46.667%;top:12.444%;width:33.333%;height:8%}#chartlet-c86a48fd2fc734ff-m-hs-2{left:51.111%;top:29.778%;width:24.444%;height:6.222%}#chartlet-c86a48fd2fc734ff-m-hs-3{left:47.778%;top:49.778%;width:31.111%;height:7.111%}#chartlet-c86a48fd2fc734ff-m-hs-4{left:46.667%;top:66.222%;width:33.333%;height:4.444%}#chartlet-c86a48fd2fc734ff-m-hs-5{left:23.333%;top:81.778%;width:22.222%;height:7.111%}#chartlet-c86a48fd2fc734ff-m-hs-6{left:50%;top:83.111%;width:26.667%;height:4.444%}#chartlet-c86a48fd2fc734ff-m-hs-7{left:51.111%;top:92.889%;width:24.444%;height:4.444%}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-0:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-0:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-0:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-1:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-1:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-1:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-2:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-2:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-2:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-3:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-3:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-3:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-4:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-4:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-4:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-5:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-5:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-5:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-6:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-6:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-6:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-7:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-7:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-c86a48fd2fc734ff-focus-7:checked) #chartlet-c86a48fd2fc734ff-m .chartlet-n-7 .chartlet-seq-box{stroke-width:3}</style><details class="chartlet-focus"><summary>Focus</summary><fieldset><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" checked> Show all</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-0"> Cart ready</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-1"> Take payment</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-2"> Payment provider</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-3"> Paid?</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-4"> Reserve stock</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-5"> Orders</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-6"> Ship parcel</label><label><input type="radio" name="chartlet-c86a48fd2fc734ff-focus" class="chartlet-focus-node" id="chartlet-c86a48fd2fc734ff-focus-7"> Delivered</label></fieldset></details><figure class="chartlet-figure" data-viz="chart"><figcaption>Checkout, from cart to parcel</figcaption><div class="chartlet-variant-desktop"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="720" height="772" viewBox="0 0 720 772" id="chartlet-c86a48fd2fc734ff" role="img" aria-labelledby="chartlet-c86a48fd2fc734ff-title chartlet-c86a48fd2fc734ff-description" class="chartlet-root chartlet-theme-dark chartlet-look-editorial"><title id="chartlet-c86a48fd2fc734ff-title">Checkout, from cart to parcel</title><desc id="chartlet-c86a48fd2fc734ff-description">Flow chart with 8 steps and 8 connections. Main path: Cart ready → Take payment → Payment provider → Paid? → Reserve stock → Ship parcel → Delivered. Most connected: Paid? and Reserve stock (3 connections each). Nothing leads out of Orders. Loop: Cart ready → Take payment → Payment provider → Paid? → Cart ready. Bottlenecks: Paid? and Reserve stock; without either the diagram falls apart. Cart ready (start): leads to Take payment. Take payment: leads to Payment provider (authorise). Payment provider (external): leads to Paid?. Paid? (decision): leads to Reserve stock (yes) and Cart ready (no, try another card). Reserve stock: leads to Orders (reserve) and Ship parcel. Orders (data store): no further step. Ship parcel: leads to Delivered. Delivered (end): no further step.</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-c86a48fd2fc734ff .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff .chartlet-label,#chartlet-c86a48fd2fc734ff .chartlet-tick,#chartlet-c86a48fd2fc734ff .chartlet-value,#chartlet-c86a48fd2fc734ff .chartlet-value-inverse,#chartlet-c86a48fd2fc734ff .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-c86a48fd2fc734ff .chartlet-value,#chartlet-c86a48fd2fc734ff .chartlet-value-inverse{font-weight:600}#chartlet-c86a48fd2fc734ff .chartlet-value{fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff .chartlet-axis-title{font-weight:600}#chartlet-c86a48fd2fc734ff .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-c86a48fd2fc734ff .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-c86a48fd2fc734ff .chartlet-bar,#chartlet-c86a48fd2fc734ff .chartlet-point{fill:var(--chartlet-accent)}#chartlet-c86a48fd2fc734ff .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-c86a48fd2fc734ff .chartlet-background{fill:var(--chartlet-background)}.chartlet-root.chartlet-theme-dark{--chartlet-text:#e8edf6;--chartlet-muted:#a9b4c7;--chartlet-grid:#2a3342;--chartlet-zero:#7b8697;--chartlet-accent:#7ea6ff;--chartlet-background:#0e131c;--chartlet-color-1:#7ea6ff;--chartlet-color-2:#ff9c72;--chartlet-color-3:#9aa7bd;--chartlet-color-4:#e2e8f4}.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-c86a48fd2fc734ff .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-c86a48fd2fc734ff .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-c86a48fd2fc734ff .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-c86a48fd2fc734ff .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-c86a48fd2fc734ff .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-c86a48fd2fc734ff .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-c86a48fd2fc734ff .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-c86a48fd2fc734ff .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-c86a48fd2fc734ff .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-c86a48fd2fc734ff .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-c86a48fd2fc734ff .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-c86a48fd2fc734ff .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-c86a48fd2fc734ff .chartlet-flow-start{stroke-width:2}#chartlet-c86a48fd2fc734ff .chartlet-flow-end{stroke-width:3}#chartlet-c86a48fd2fc734ff .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-c86a48fd2fc734ff .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-c86a48fd2fc734ff .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-c86a48fd2fc734ff .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-c86a48fd2fc734ff .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-c86a48fd2fc734ff .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-c86a48fd2fc734ff .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-c86a48fd2fc734ff .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-c86a48fd2fc734ff .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-c86a48fd2fc734ff .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-c86a48fd2fc734ff .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-c86a48fd2fc734ff .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-c86a48fd2fc734ff .chartlet-flow-group{fill:var(--chartlet-accent);fill-opacity:.04;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:4 3;rx:10px}#chartlet-c86a48fd2fc734ff .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}.chartlet-root.chartlet-look-editorial{--chartlet-text:#1d1c1a;--chartlet-muted:#4d4a44;--chartlet-grid:#d8d4ca;--chartlet-zero:#6b665c;--chartlet-accent:#0b6a88;--chartlet-background:#fcfbf8;--chartlet-color-1:#0b6a88;--chartlet-color-2:#a8431a;--chartlet-color-3:#6b665c;--chartlet-color-4:#1d1c1a;--chartlet-node:#f2efe8;--chartlet-lane:#fcfbf8;--chartlet-lane-head:#f2efe8;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#6b665c;--chartlet-role-blue-fill:#f2efe8;--chartlet-role-green:#6b665c;--chartlet-role-green-fill:#f2efe8;--chartlet-role-amber:#6b665c;--chartlet-role-amber-fill:#f2efe8;--chartlet-role-teal:#6b665c;--chartlet-role-teal-fill:#f2efe8;--chartlet-role-violet:#4d4a44;--chartlet-role-violet-fill:#f2efe8;--chartlet-role-gray:#6b665c;--chartlet-role-gray-fill:#f2efe8;--chartlet-role-red:#a8281c;--chartlet-role-red-fill:#fbefec}.chartlet-root.chartlet-look-editorial.chartlet-theme-dark:not(.chartlet-blueprint){--chartlet-text:#ece8df;--chartlet-muted:#b7b2a7;--chartlet-grid:#3a3840;--chartlet-zero:#8f8a80;--chartlet-accent:#62b8d4;--chartlet-background:#17161a;--chartlet-color-1:#62b8d4;--chartlet-color-2:#e0916a;--chartlet-color-3:#9a958a;--chartlet-color-4:#ece8df;--chartlet-node:#222127;--chartlet-lane:#17161a;--chartlet-lane-head:#222127;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#8f8a80;--chartlet-role-blue-fill:#222127;--chartlet-role-green:#8f8a80;--chartlet-role-green-fill:#222127;--chartlet-role-amber:#8f8a80;--chartlet-role-amber-fill:#222127;--chartlet-role-teal:#8f8a80;--chartlet-role-teal-fill:#222127;--chartlet-role-violet:#c9c4b8;--chartlet-role-violet-fill:#222127;--chartlet-role-gray:#8f8a80;--chartlet-role-gray-fill:#222127;--chartlet-role-red:#f08a7e;--chartlet-role-red-fill:#2d1f1e}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-role-blue,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-role-green,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-role-amber,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-role-teal,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-role-violet,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-role-gray,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-role-red{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-node{stroke-width:1;rx:6px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-start{stroke-width:1}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-end{stroke-width:2}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-inner{stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-edge{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-group{fill:none;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 3;rx:8px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-shadow{display:none}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:none;rx:2px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-badge{fill:var(--chartlet-text);stroke:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-badge-text{fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-tag{fill:var(--chartlet-background);stroke:var(--chartlet-zero);stroke-width:1;rx:3px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-tech{font-size:11px;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-tag-text{font-size:9px;font-weight:600;letter-spacing:.5px;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-seq-box{stroke-width:1;rx:6px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-seq-message{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-seq-activation{stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-seq-frame{rx:8px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-state{rx:8px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-state-inner{stroke:var(--chartlet-zero);rx:6px}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-arch-head{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-sublabel,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-group-label,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-flow-card,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-tag-text,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-diagram-tech,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-arch-interface,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-seq-sublabel,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-seq-tag,#chartlet-c86a48fd2fc734ff.chartlet-look-editorial .chartlet-seq-guard{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"JetBrains Mono","DejaVu Sans Mono",monospace}</style><rect class="chartlet-background" x="0" y="0" width="720" height="772"/><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="424,60 424,100" class="chartlet-flow-edge chartlet-flow-main"><title>Cart ready → Take payment</title></polyline><polyline points="420.5,100 424,108 427.5,100 420.5,100" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="424,164 424,224" class="chartlet-flow-edge chartlet-flow-main"><title>Take payment → Payment provider: authorise</title></polyline><polyline points="420.5,224 424,232 427.5,224 420.5,224" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-3"><polyline points="424,272 424,348" class="chartlet-flow-edge chartlet-flow-main"><title>Payment provider → Paid?</title></polyline><polyline points="420.5,348 424,356 427.5,348 420.5,348" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-4"><polyline points="424,420 424,480" class="chartlet-flow-edge chartlet-flow-main"><title>Paid? → Reserve stock: yes</title></polyline><polyline points="420.5,480 424,488 427.5,480 420.5,480" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-3"><polyline points="448,366.105 448,289.978 512,289.978 512,77.978 448,77.978 448,68" class="chartlet-flow-edge chartlet-flow-dashed"><title>Paid? → Cart ready: no, try another card</title></polyline><polyline points="451.5,68 448,60 444.5,68 451.5,68" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-5"><polyline points="400,528 400,580.809 288,580.809 288,604" class="chartlet-flow-edge chartlet-flow-dotted"><title>Reserve stock → Orders: reserve</title></polyline><polyline points="284.5,604 288,612 291.5,604 284.5,604" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><polyline points="424,528 424,616" class="chartlet-flow-edge chartlet-flow-main"><title>Reserve stock → Ship parcel</title></polyline><polyline points="420.5,616 424,624 427.5,616 420.5,616" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-6 chartlet-f-7"><polyline points="424,664 424,700" class="chartlet-flow-edge chartlet-flow-main"><title>Ship parcel → Delivered</title></polyline><polyline points="420.5,700 424,708 427.5,700 420.5,700" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-3"></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-3"></g><g class="chartlet-f chartlet-n-3 chartlet-f-0 chartlet-f-2 chartlet-f-3 chartlet-f-4"></g><g class="chartlet-f chartlet-n-4 chartlet-f-3 chartlet-f-4 chartlet-f-5 chartlet-f-6"></g><g class="chartlet-f chartlet-n-5 chartlet-f-4 chartlet-f-5"></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6 chartlet-f-7"></g><g class="chartlet-f chartlet-n-7 chartlet-f-6 chartlet-f-7"></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><rect x="432" y="169" width="67.36" height="21" class="chartlet-diagram-chip"/><text x="437" y="183" text-anchor="start" class="chartlet-diagram-chip-text">authorise</text></g><g class="chartlet-f chartlet-f-3 chartlet-f-4"><rect x="432" y="425" width="30.16" height="21" class="chartlet-diagram-chip"/><text x="437" y="439" text-anchor="start" class="chartlet-diagram-chip-text">yes</text></g><g class="chartlet-f chartlet-f-0 chartlet-f-3"><rect x="456" y="332" width="132.64" height="21" class="chartlet-diagram-chip"/><text x="461" y="346" text-anchor="start" class="chartlet-diagram-chip-text">no, try another card</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-5"><rect x="334.96" y="533" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="387" y="547" text-anchor="end" class="chartlet-diagram-chip-text">reserve</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-3"><polyline points="456,22.5 463.654,24.022 470.142,28.358 474.478,34.846 476,42.5 474.478,50.154 470.142,56.642 463.654,60.978 456,62.5 392,62.5 384.346,60.978 377.858,56.642 373.522,50.154 372,42.5 373.522,34.846 377.858,28.358 384.346,24.022 392,22.5 456,22.5" class="chartlet-diagram-shadow"/><polyline points="456,20 463.654,21.522 470.142,25.858 474.478,32.346 476,40 474.478,47.654 470.142,54.142 463.654,58.478 456,60 392,60 384.346,58.478 377.858,54.142 373.522,47.654 372,40 373.522,32.346 377.858,25.858 384.346,21.522 392,20 456,20" class="chartlet-flow-node chartlet-flow-start chartlet-role-green"><title>Cart ready</title></polyline><text x="424" y="44.5" text-anchor="middle" class="chartlet-flow-label">Cart ready</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="356" y="110.5" width="136" height="56" class="chartlet-diagram-shadow"/><rect x="356" y="108" width="136" height="56" class="chartlet-flow-node chartlet-role-blue"><title>Take payment – POST /v1/charges</title></rect><text x="424" y="133.5" text-anchor="middle" class="chartlet-flow-label">Take payment</text><text x="424" y="147.5" text-anchor="middle" class="chartlet-flow-sublabel">POST /v1/charges</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><rect x="352" y="234.5" width="144" height="40" class="chartlet-diagram-shadow"/><rect x="352" y="232" width="144" height="40" class="chartlet-flow-node chartlet-flow-external chartlet-role-gray"><title>Payment provider</title></rect><rect x="360" y="225" width="28" height="14" class="chartlet-diagram-tag"/><text x="374" y="235" text-anchor="middle" class="chartlet-diagram-tag-text">EXT</text><text x="424" y="256.5" text-anchor="middle" class="chartlet-flow-label">Payment provider</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-0 chartlet-f-2 chartlet-f-3 chartlet-f-4"><polyline points="424,358.5 500,390.5 424,422.5 348,390.5 424,358.5" class="chartlet-diagram-shadow"/><polyline points="424,356 500,388 424,420 348,388 424,356" class="chartlet-flow-node chartlet-role-amber"><title>Paid?</title></polyline><text x="424" y="392.5" text-anchor="middle" class="chartlet-flow-label">Paid?</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-3 chartlet-f-4 chartlet-f-5 chartlet-f-6"><rect x="364" y="490.5" width="120" height="40" class="chartlet-diagram-shadow"/><rect x="364" y="488" width="120" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Reserve stock</title></rect><text x="424" y="512.5" text-anchor="middle" class="chartlet-flow-label">Reserve stock</text></g><g class="chartlet-f chartlet-n-5 chartlet-f-4 chartlet-f-5"><polyline points="236,619.5 236,673.5 237.772,674.794 242.967,676 251.23,677.036 262,677.83 274.541,678.33 288,678.5 301.459,678.33 314,677.83 324.77,677.036 333.033,676 338.228,674.794 340,673.5 340,619.5 338.228,618.206 333.033,617 324.77,615.964 314,615.17 301.459,614.67 288,614.5 274.541,614.67 262,615.17 251.23,615.964 242.967,617 237.772,618.206 236,619.5 236,619.5" class="chartlet-diagram-shadow"/><polyline points="236,617 236,671 237.772,672.294 242.967,673.5 251.23,674.536 262,675.33 274.541,675.83 288,676 301.459,675.83 314,675.33 324.77,674.536 333.033,673.5 338.228,672.294 340,671 340,617 338.228,615.706 333.033,614.5 324.77,613.464 314,612.67 301.459,612.17 288,612 274.541,612.17 262,612.67 251.23,613.464 242.967,614.5 237.772,615.706 236,617 236,617" class="chartlet-flow-node chartlet-role-teal"><title>Orders – Postgres</title></polyline><polyline points="236,617 237.772,618.294 242.967,619.5 251.23,620.536 262,621.33 274.541,621.83 288,622 301.459,621.83 314,621.33 324.77,620.536 333.033,619.5 338.228,618.294 340,617" class="chartlet-diagram-rim"/><rect x="244" y="605" width="22" height="14" class="chartlet-diagram-tag"/><text x="255" y="615" text-anchor="middle" class="chartlet-diagram-tag-text">DB</text><text x="288" y="644.5" text-anchor="middle" class="chartlet-flow-label">Orders</text><text x="288" y="658.5" text-anchor="middle" class="chartlet-flow-sublabel">Postgres</text></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6 chartlet-f-7"><rect x="372" y="626.5" width="104" height="40" class="chartlet-diagram-shadow"/><rect x="372" y="624" width="104" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Ship parcel</title></rect><text x="424" y="648.5" text-anchor="middle" class="chartlet-flow-label">Ship parcel</text></g><g class="chartlet-f chartlet-n-7 chartlet-f-6 chartlet-f-7"><polyline points="456,710.5 463.654,712.022 470.142,716.358 474.478,722.846 476,730.5 474.478,738.154 470.142,744.642 463.654,748.978 456,750.5 392,750.5 384.346,748.978 377.858,744.642 373.522,738.154 372,730.5 373.522,722.846 377.858,716.358 384.346,712.022 392,710.5 456,710.5" class="chartlet-diagram-shadow"/><polyline points="456,708 463.654,709.522 470.142,713.858 474.478,720.346 476,728 474.478,735.654 470.142,742.142 463.654,746.478 456,748 392,748 384.346,746.478 377.858,742.142 373.522,735.654 372,728 373.522,720.346 377.858,713.858 384.346,709.522 392,708 456,708" class="chartlet-flow-node chartlet-flow-end chartlet-role-green"><title>Delivered</title></polyline><text x="424" y="732.5" text-anchor="middle" class="chartlet-flow-label">Delivered</text></g></svg><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-0" for="chartlet-c86a48fd2fc734ff-focus-0"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-1" for="chartlet-c86a48fd2fc734ff-focus-1"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-2" for="chartlet-c86a48fd2fc734ff-focus-2"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-3" for="chartlet-c86a48fd2fc734ff-focus-3"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-4" for="chartlet-c86a48fd2fc734ff-focus-4"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-5" for="chartlet-c86a48fd2fc734ff-focus-5"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-6" for="chartlet-c86a48fd2fc734ff-focus-6"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-hs-7" for="chartlet-c86a48fd2fc734ff-focus-7"></label></div></div><div class="chartlet-variant-mobile"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="360" height="900" viewBox="0 0 360 900" id="chartlet-c86a48fd2fc734ff-m" role="img" aria-labelledby="chartlet-c86a48fd2fc734ff-m-title chartlet-c86a48fd2fc734ff-m-description" class="chartlet-root chartlet-theme-dark chartlet-look-editorial"><title id="chartlet-c86a48fd2fc734ff-m-title">Checkout, from cart to parcel</title><desc id="chartlet-c86a48fd2fc734ff-m-description">Flow chart with 8 steps and 8 connections. Main path: Cart ready → Take payment → Payment provider → Paid? → Reserve stock → Ship parcel → Delivered. Most connected: Paid? and Reserve stock (3 connections each). Nothing leads out of Orders. Loop: Cart ready → Take payment → Payment provider → Paid? → Cart ready. Bottlenecks: Paid? and Reserve stock; without either the diagram falls apart. Cart ready (start): leads to Take payment. Take payment: leads to Payment provider (authorise). Payment provider (external): leads to Paid?. Paid? (decision): leads to Reserve stock (yes) and Cart ready (no, try another card). Reserve stock: leads to Orders (reserve) and Ship parcel. Orders (data store): no further step. Ship parcel: leads to Delivered. Delivered (end): no further step.</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-c86a48fd2fc734ff-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff-m .chartlet-label,#chartlet-c86a48fd2fc734ff-m .chartlet-tick,#chartlet-c86a48fd2fc734ff-m .chartlet-value,#chartlet-c86a48fd2fc734ff-m .chartlet-value-inverse,#chartlet-c86a48fd2fc734ff-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-c86a48fd2fc734ff-m .chartlet-value,#chartlet-c86a48fd2fc734ff-m .chartlet-value-inverse{font-weight:600}#chartlet-c86a48fd2fc734ff-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff-m .chartlet-axis-title{font-weight:600}#chartlet-c86a48fd2fc734ff-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-c86a48fd2fc734ff-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-c86a48fd2fc734ff-m .chartlet-bar,#chartlet-c86a48fd2fc734ff-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-c86a48fd2fc734ff-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-c86a48fd2fc734ff-m .chartlet-background{fill:var(--chartlet-background)}.chartlet-root.chartlet-theme-dark{--chartlet-text:#e8edf6;--chartlet-muted:#a9b4c7;--chartlet-grid:#2a3342;--chartlet-zero:#7b8697;--chartlet-accent:#7ea6ff;--chartlet-background:#0e131c;--chartlet-color-1:#7ea6ff;--chartlet-color-2:#ff9c72;--chartlet-color-3:#9aa7bd;--chartlet-color-4:#e2e8f4}#chartlet-c86a48fd2fc734ff-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-c86a48fd2fc734ff-m .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-c86a48fd2fc734ff-m .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-c86a48fd2fc734ff-m .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-c86a48fd2fc734ff-m .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-c86a48fd2fc734ff-m .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-c86a48fd2fc734ff-m .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-c86a48fd2fc734ff-m .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-c86a48fd2fc734ff-m .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-c86a48fd2fc734ff-m .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-c86a48fd2fc734ff-m .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-c86a48fd2fc734ff-m .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff-m .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-c86a48fd2fc734ff-m .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-start{stroke-width:2}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-end{stroke-width:3}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-c86a48fd2fc734ff-m .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-c86a48fd2fc734ff-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-c86a48fd2fc734ff-m .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}.chartlet-root.chartlet-look-editorial{--chartlet-text:#1d1c1a;--chartlet-muted:#4d4a44;--chartlet-grid:#d8d4ca;--chartlet-zero:#6b665c;--chartlet-accent:#0b6a88;--chartlet-background:#fcfbf8;--chartlet-color-1:#0b6a88;--chartlet-color-2:#a8431a;--chartlet-color-3:#6b665c;--chartlet-color-4:#1d1c1a;--chartlet-node:#f2efe8;--chartlet-lane:#fcfbf8;--chartlet-lane-head:#f2efe8;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#6b665c;--chartlet-role-blue-fill:#f2efe8;--chartlet-role-green:#6b665c;--chartlet-role-green-fill:#f2efe8;--chartlet-role-amber:#6b665c;--chartlet-role-amber-fill:#f2efe8;--chartlet-role-teal:#6b665c;--chartlet-role-teal-fill:#f2efe8;--chartlet-role-violet:#4d4a44;--chartlet-role-violet-fill:#f2efe8;--chartlet-role-gray:#6b665c;--chartlet-role-gray-fill:#f2efe8;--chartlet-role-red:#a8281c;--chartlet-role-red-fill:#fbefec}.chartlet-root.chartlet-look-editorial.chartlet-theme-dark:not(.chartlet-blueprint){--chartlet-text:#ece8df;--chartlet-muted:#b7b2a7;--chartlet-grid:#3a3840;--chartlet-zero:#8f8a80;--chartlet-accent:#62b8d4;--chartlet-background:#17161a;--chartlet-color-1:#62b8d4;--chartlet-color-2:#e0916a;--chartlet-color-3:#9a958a;--chartlet-color-4:#ece8df;--chartlet-node:#222127;--chartlet-lane:#17161a;--chartlet-lane-head:#222127;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#8f8a80;--chartlet-role-blue-fill:#222127;--chartlet-role-green:#8f8a80;--chartlet-role-green-fill:#222127;--chartlet-role-amber:#8f8a80;--chartlet-role-amber-fill:#222127;--chartlet-role-teal:#8f8a80;--chartlet-role-teal-fill:#222127;--chartlet-role-violet:#c9c4b8;--chartlet-role-violet-fill:#222127;--chartlet-role-gray:#8f8a80;--chartlet-role-gray-fill:#222127;--chartlet-role-red:#f08a7e;--chartlet-role-red-fill:#2d1f1e}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-role-blue,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-role-green,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-role-amber,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-role-teal,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-role-violet,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-role-gray,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-role-red{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-node{stroke-width:1;rx:6px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-start{stroke-width:1}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-end{stroke-width:2}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-inner{stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-edge{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-group{fill:none;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 3;rx:8px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-shadow{display:none}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:none;rx:2px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-badge{fill:var(--chartlet-text);stroke:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-badge-text{fill:var(--chartlet-background)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-tag{fill:var(--chartlet-background);stroke:var(--chartlet-zero);stroke-width:1;rx:3px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-tech{font-size:11px;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-tag-text{font-size:9px;font-weight:600;letter-spacing:.5px;fill:var(--chartlet-text)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-seq-box{stroke-width:1;rx:6px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-seq-message{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-seq-activation{stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-seq-frame{rx:8px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-state{rx:8px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-state-inner{stroke:var(--chartlet-zero);rx:6px}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-arch-head{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-sublabel,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-group-label,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-flow-card,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-tag-text,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-diagram-tech,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-arch-interface,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-seq-sublabel,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-seq-tag,#chartlet-c86a48fd2fc734ff-m.chartlet-look-editorial .chartlet-seq-guard{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"JetBrains Mono","DejaVu Sans Mono",monospace}</style><rect class="chartlet-background" x="0" y="0" width="360" height="900"/><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="228,56 228,104" class="chartlet-flow-edge chartlet-flow-main"><title>Cart ready → Take payment</title></polyline><polyline points="224.5,104 228,112 231.5,104 224.5,104" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="228,184 228,260" class="chartlet-flow-edge chartlet-flow-main"><title>Take payment → Payment provider: authorise</title></polyline><polyline points="224.5,260 228,268 231.5,260 224.5,260" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-2 chartlet-f-3"><polyline points="228,324 228,440" class="chartlet-flow-edge chartlet-flow-main"><title>Payment provider → Paid?</title></polyline><polyline points="224.5,440 228,448 231.5,440 224.5,440" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-4"><polyline points="228,512 228,588" class="chartlet-flow-edge chartlet-flow-main"><title>Paid? → Reserve stock: yes</title></polyline><polyline points="224.5,588 228,596 231.5,588 224.5,588" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-3"><polyline points="252,461.714 252,343.954 296,343.954 296,75.954 252,75.954 252,64" class="chartlet-flow-edge chartlet-flow-dashed"><title>Paid? → Cart ready: no, try another card</title></polyline><polyline points="255.5,64 252,56 248.5,64 255.5,64" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-5"><polyline points="204,636 204,700.138 124,700.138 124,728" class="chartlet-flow-edge chartlet-flow-dotted"><title>Reserve stock → Orders: reserve</title></polyline><polyline points="120.5,728 124,736 127.5,728 120.5,728" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><polyline points="228,636 228,740" class="chartlet-flow-edge chartlet-flow-main"><title>Reserve stock → Ship parcel</title></polyline><polyline points="224.5,740 228,748 231.5,740 224.5,740" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-f-6 chartlet-f-7"><polyline points="228,788 228,828" class="chartlet-flow-edge chartlet-flow-main"><title>Ship parcel → Delivered</title></polyline><polyline points="224.5,828 228,836 231.5,828 224.5,828" class="chartlet-flow-head chartlet-flow-main-head"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-3"></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-3"></g><g class="chartlet-f chartlet-n-3 chartlet-f-0 chartlet-f-2 chartlet-f-3 chartlet-f-4"></g><g class="chartlet-f chartlet-n-4 chartlet-f-3 chartlet-f-4 chartlet-f-5 chartlet-f-6"></g><g class="chartlet-f chartlet-n-5 chartlet-f-4 chartlet-f-5"></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6 chartlet-f-7"></g><g class="chartlet-f chartlet-n-7 chartlet-f-6 chartlet-f-7"></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><rect x="236" y="189" width="67.36" height="21" class="chartlet-diagram-chip"/><text x="241" y="203" text-anchor="start" class="chartlet-diagram-chip-text">authorise</text></g><g class="chartlet-f chartlet-f-3 chartlet-f-4"><rect x="236" y="517" width="30.16" height="21" class="chartlet-diagram-chip"/><text x="241" y="531" text-anchor="start" class="chartlet-diagram-chip-text">yes</text></g><g class="chartlet-f chartlet-f-0 chartlet-f-3"><rect x="142.08" y="409" width="101.92" height="36" class="chartlet-diagram-chip"/><text x="239" y="423" text-anchor="end" class="chartlet-diagram-chip-text">no, try another</text><text x="239" y="438" text-anchor="end" class="chartlet-diagram-chip-text">card</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-5"><rect x="138.96" y="641" width="57.04" height="21" class="chartlet-diagram-chip"/><text x="191" y="655" text-anchor="end" class="chartlet-diagram-chip-text">reserve</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-3"><polyline points="256,18.5 263.654,20.022 270.142,24.358 274.478,30.846 276,38.5 274.478,46.154 270.142,52.642 263.654,56.978 256,58.5 200,58.5 192.346,56.978 185.858,52.642 181.522,46.154 180,38.5 181.522,30.846 185.858,24.358 192.346,20.022 200,18.5 256,18.5" class="chartlet-diagram-shadow"/><polyline points="256,16 263.654,17.522 270.142,21.858 274.478,28.346 276,36 274.478,43.654 270.142,50.142 263.654,54.478 256,56 200,56 192.346,54.478 185.858,50.142 181.522,43.654 180,36 181.522,28.346 185.858,21.858 192.346,17.522 200,16 256,16" class="chartlet-flow-node chartlet-flow-start chartlet-role-green"><title>Cart ready</title></polyline><text x="228" y="40.5" text-anchor="middle" class="chartlet-flow-label">Cart ready</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="168" y="114.5" width="120" height="72" class="chartlet-diagram-shadow"/><rect x="168" y="112" width="120" height="72" class="chartlet-flow-node chartlet-role-blue"><title>Take payment – POST /v1/charges</title></rect><text x="228" y="138.5" text-anchor="middle" class="chartlet-flow-label">Take payment</text><text x="228" y="152.5" text-anchor="middle" class="chartlet-flow-sublabel">POST</text><text x="228" y="166.5" text-anchor="middle" class="chartlet-flow-sublabel">/v1/charges</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><rect x="184" y="270.5" width="88" height="56" class="chartlet-diagram-shadow"/><rect x="184" y="268" width="88" height="56" class="chartlet-flow-node chartlet-flow-external chartlet-role-gray"><title>Payment provider</title></rect><text x="228" y="292.5" text-anchor="middle" class="chartlet-flow-label">Payment</text><text x="228" y="308.5" text-anchor="middle" class="chartlet-flow-label">provider</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-0 chartlet-f-2 chartlet-f-3 chartlet-f-4"><polyline points="228,450.5 284,482.5 228,514.5 172,482.5 228,450.5" class="chartlet-diagram-shadow"/><polyline points="228,448 284,480 228,512 172,480 228,448" class="chartlet-flow-node chartlet-role-amber"><title>Paid?</title></polyline><text x="228" y="484.5" text-anchor="middle" class="chartlet-flow-label">Paid?</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-3 chartlet-f-4 chartlet-f-5 chartlet-f-6"><rect x="168" y="598.5" width="120" height="40" class="chartlet-diagram-shadow"/><rect x="168" y="596" width="120" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Reserve stock</title></rect><text x="228" y="620.5" text-anchor="middle" class="chartlet-flow-label">Reserve stock</text></g><g class="chartlet-f chartlet-n-5 chartlet-f-4 chartlet-f-5"><polyline points="84,743.5 84,797.5 85.363,798.794 89.359,800 95.716,801.036 104,801.83 113.647,802.33 124,802.5 134.353,802.33 144,801.83 152.284,801.036 158.641,800 162.637,798.794 164,797.5 164,743.5 162.637,742.206 158.641,741 152.284,739.964 144,739.17 134.353,738.67 124,738.5 113.647,738.67 104,739.17 95.716,739.964 89.359,741 85.363,742.206 84,743.5 84,743.5" class="chartlet-diagram-shadow"/><polyline points="84,741 84,795 85.363,796.294 89.359,797.5 95.716,798.536 104,799.33 113.647,799.83 124,800 134.353,799.83 144,799.33 152.284,798.536 158.641,797.5 162.637,796.294 164,795 164,741 162.637,739.706 158.641,738.5 152.284,737.464 144,736.67 134.353,736.17 124,736 113.647,736.17 104,736.67 95.716,737.464 89.359,738.5 85.363,739.706 84,741 84,741" class="chartlet-flow-node chartlet-role-teal"><title>Orders – Postgres</title></polyline><polyline points="84,741 85.363,742.294 89.359,743.5 95.716,744.536 104,745.33 113.647,745.83 124,746 134.353,745.83 144,745.33 152.284,744.536 158.641,743.5 162.637,742.294 164,741" class="chartlet-diagram-rim"/><text x="124" y="768.5" text-anchor="middle" class="chartlet-flow-label">Orders</text><text x="124" y="782.5" text-anchor="middle" class="chartlet-flow-sublabel">Postgres</text></g><g class="chartlet-f chartlet-n-6 chartlet-f-4 chartlet-f-6 chartlet-f-7"><rect x="180" y="750.5" width="96" height="40" class="chartlet-diagram-shadow"/><rect x="180" y="748" width="96" height="40" class="chartlet-flow-node chartlet-role-blue"><title>Ship parcel</title></rect><text x="228" y="772.5" text-anchor="middle" class="chartlet-flow-label">Ship parcel</text></g><g class="chartlet-f chartlet-n-7 chartlet-f-6 chartlet-f-7"><polyline points="252,838.5 259.654,840.022 266.142,844.358 270.478,850.846 272,858.5 270.478,866.154 266.142,872.642 259.654,876.978 252,878.5 204,878.5 196.346,876.978 189.858,872.642 185.522,866.154 184,858.5 185.522,850.846 189.858,844.358 196.346,840.022 204,838.5 252,838.5" class="chartlet-diagram-shadow"/><polyline points="252,836 259.654,837.522 266.142,841.858 270.478,848.346 272,856 270.478,863.654 266.142,870.142 259.654,874.478 252,876 204,876 196.346,874.478 189.858,870.142 185.522,863.654 184,856 185.522,848.346 189.858,841.858 196.346,837.522 204,836 252,836" class="chartlet-flow-node chartlet-flow-end chartlet-role-green"><title>Delivered</title></polyline><text x="228" y="860.5" text-anchor="middle" class="chartlet-flow-label">Delivered</text></g></svg><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-0" for="chartlet-c86a48fd2fc734ff-focus-0"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-1" for="chartlet-c86a48fd2fc734ff-focus-1"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-2" for="chartlet-c86a48fd2fc734ff-focus-2"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-3" for="chartlet-c86a48fd2fc734ff-focus-3"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-4" for="chartlet-c86a48fd2fc734ff-focus-4"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-5" for="chartlet-c86a48fd2fc734ff-focus-5"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-6" for="chartlet-c86a48fd2fc734ff-focus-6"></label><label class="chartlet-hotspot" id="chartlet-c86a48fd2fc734ff-m-hs-7" for="chartlet-c86a48fd2fc734ff-focus-7"></label></div></div><p class="chartlet-source">Source: Illustrative order process</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Checkout, from cart to parcel</caption><thead><tr><th scope="col">Step</th><th scope="col">Kind</th><th scope="col">Leads to</th></tr></thead><tbody><tr><th scope="row">Cart ready</th><td>start</td><td>Take payment</td></tr><tr><th scope="row">Take payment</th><td>step</td><td>Payment provider (authorise)</td></tr><tr><th scope="row">Payment provider</th><td>external</td><td>Paid?</td></tr><tr><th scope="row">Paid?</th><td>decision</td><td>Reserve stock (yes), Cart ready (no, try another card)</td></tr><tr><th scope="row">Reserve stock</th><td>step</td><td>Orders (reserve), Ship parcel</td></tr><tr><th scope="row">Orders</th><td>data store</td><td></td></tr><tr><th scope="row">Ship parcel</th><td>step</td><td>Delivered</td></tr><tr><th scope="row">Delivered</th><td>end</td><td></td></tr></tbody></table></details></figure></div>