Tam ve doğru anlamsal belirteçler, yerel doğrulama özellikleri, eksiksiz bir satıcı ürün düzenleyicisi ve resimli bir müşteri tarafı önizlemesi içeren Circuit kılavuzu.
SumUp Circuit Tasarım Sistemi Satıcı Düzenleyicisi Düzenlemesi
Satıcı girdisini müşteri sunumundan ayırın
Ürün düzenleyicisi ve makbuz benzeri önizleme, aynı durumun iki görünümünü sunar. Kısa formda ürün adı belirtilir, örnek bir tutar girilir ve müşteri notu alanının gösterilip gösterilmeyeceği seçilir. Önizleme, ödeme bilgisi istemeden ve ödeme akışı oluşturmadan yapılan değişikliklerin etkisini gösterir.
Özgün bir ürün çizimi kullanın
Geometrik baskı görseli, CSS tarafından oluşturulmuş ve erişilebilir bir açıklamayla sunulan özgün bir çalışmadır. Sahte bir satıcı fotoğrafı veya kopyalanmış bir SumUp ürün görseli kullanmak yerine, müşteri önizlemesinde tanınabilir bir nesne gösterir.
SumUp Circuit Tasarım Sistemi Anlamsal Tema ve Paket Kapsamı
Tam olarak sabitlenmiş temayı kullanın
Bu örnek @sumup/circuit-ui 8.15.0 ile @sumup/design-tokens 7.3.1'i kullanır. Referans tablosu bu paketin light.css dosyasından alınmıştır. Güncel üst kaynak belgeleri artık @sumup-oss ad alanını kullanıyor; bu, yinelenebilir ve sabitlenmiş bir entegrasyondur, eski ad alanının en yeni sürüm olduğu iddiası değildir.
Bileşen stillerini ve belirteç stillerini yükleyin
React giriş noktası hem bileşen stil sayfasını hem de açık tema belirteç dosyasını içe aktarır. CSS özel özellikleri tanımlanmamışsa bileşen sınıf adları tek başına yeterli olmaz. Kapsamı belirlenmiş koyu bir paletin ortak renk dışı değerleri sağlayabilmesi için tam bir temel temaya da ihtiyacı vardır.
SumUp Circuit Tasarım Sistemi Nötr Yüzeyler ve Eylem Kontrastı
Görsel odağı ürünün üzerinde tutun
Düzenleyicide beyaz yüzey ve koyu ön plan kullanılırken müşteri önizlemesi hafif nötr bir arka plan üzerinde yer alır. Özgün çizim, ürün görseline kontrollü renk katar; yerel birincil eylemin okunaklı ve kolay bulunur kalmasını sağlar.
Önizleme eyleminin etkileşimli olmadığını açıkça gösterin
Müşteri tarafındaki alt bilgi, neredeyse çalışır durumdaki bir ödeme akışı izlenimi veren devre dışı bir Pay düğmesi değil, yalnızca önizleme olduğunu belirten bir metin bloğudur. Gerçek gönderme eylemi yalnızca düzenleyicide bulunur ve yerel ürünü inceler. Böylece kullanıcılar örneğin gerçek etkileşim sınırını anlayabilir.
SumUp Circuit Tasarım Sistemi Tipografi ve Yedekler
Tema yığınını olduğu gibi belirtin
Yayımlanmış yazı tipi yığını Aktiv Grotesk ile başlar ve Helvetica, Arial ve sistem yedeklerini içerir. Bu çevrimdışı örnek ilk yazı tipini indirmez. Yerel Headline ve Body bileşenleri yine de amaçlanan hiyerarşiyi sunar; harf biçimlerini ise kullanılabilir yazı tipleri belirler.
Tutarı ve para birimini birlikte tutun
SumUp Circuit Tasarım Sistemi Aralıklar ve Yuvarlatılmış Yüzeyler
Adlandırılmış adım dizisini kullanın
Belirteç ölçeğinde bit, byte, kilo, mega ve daha büyük adlar kullanılır. Bunlar ikinin kuvvetlerini gösteren matematiksel değerler değil, tasarım etiketleridir. Tablo, geliştiricilerin adlandırma benzetmesinden hareketle yeni bir ölçek uydurmaması için kesin piksel değerlerini korur.
Formda tutarlı bir dikey aralık ve tam genişlikte birincil eylem kullanılır. Önizlemede daha büyük, yuvarlatılmış bir dış yüzey ve daha küçük bir makbuz iç yüzeyi bulunur. Telefonda önizleme formun ardından gelir; denetimler sıkıştırılmadan önce iç boşluk azaltılır.
SumUp Circuit Tasarım Sistemi Ürün Doğrulama ve Taslak Durumu
Biçimlendirmeden önce dizgenin tamamını doğrulayın
Uygulama, pozitif bir sayısal değer için bir ila beş tam sayı basamağına ve en fazla iki ondalık basamağa izin verir. Bu, örnek için belirlenmiş bir kuraldır. parseFloat işlevinin 24abc gibi kısmi bir dizgeyi kabul etmesini önler ve gönderimden sonra geçersiz ilk yerel Input alanına odaklanır.
Düzenlemede eski inceleme sonucunu temizle
Adın, tutarın veya notun görünürlüğünün değiştirilmesi önceki anlık görüntüyü geçersiz kılar. Başarılı durum, incelenen ürün adını ve tutarını içerdiğinden belirli bir taslağa bağlıdır. Kod bu sonucu bir arka uçta saklamaz veya ödeme isteği oluşturmaz.
SumUp Circuit Tasarım Sistemi Input Hata Kurtarma ve Önizleme Anlamı
Her iki alan hatasını da deneyin
Ürün adı ve fiyat alanlarında yerel required etiketleri, geçersiz durum ve validationHint kullanılır. Kaynak kodu, başarısız olan ilk alana yeniden odaklanmak için input referanslarını saklar. Gerçek müşteri veya kart bilgileri girilmeden hata kurtarma denenebilir.
İlk alan hatasını görmek için adı silip gönderin.
24abc veya sıfır deneyin, ardından tutarı 24.50 olarak düzeltin.
Yerel olarak inceleyin, ardından eski anlık görüntüyü kapatmak için bir alanı düzenleyin.
Çizimi ve statik önizlemeyi doğru biçimde etiketleyin
Görsel için kısa bir rol açıklaması vardır. Müşteri notu alanı, açıkça etiketlenmiş bir önizlemenin içindeki açıklayıcı bir yer tutucudur; sahte, düzenlenebilir bir giriş alanı değildir. Not ayarı için kullanılan gerçek onay kutusu satıcı formunda kalır ve önizleme alanının görünüp görünmeyeceğini denetler.
SumUp Circuit Tasarım Sistemi React ve CSS Entegrasyonu
Genel eş bağımlılıkları ve her iki stil sayfasını ekleyin
Giriş noktası, paket gereksinimleriyle uyumlu belirteç, simge, uluslararasılaştırma ve Emotion eş bağımlılıklarıyla birlikte React 18'i ve sabitlenmiş Circuit bileşenlerini kullanır. Kod, light.css ve styles.css dosyalarını açıkça içe aktarır. Belgelenmemiş bir sağlayıcıya veya proje düzeyinde gizli bir tema kurulumuna dayanmaz.
@sumup/circuit-ui 8.15.0 bileşen stilleri.
@sumup/design-tokens 7.3.1 tam açık tema.
React 18 ve bileşen paketinin bildirdiği eş bağımlılıklar.
Ödeme hizmetlerini yalnızca gerçek bir uygulamada ekleyin
SumUp Circuit Tasarım Sistemi Bileşen Örnekleri
main.jsx — eksiksiz çalışan örnek
Bir ürünü düzenleyin ve müşteri tarafındaki önizlemesini inceleyin. Aşağıdaki kaynak kod, tüm durumları ve doğrulamayı içeren eksiksiz React girişidir.
jsx
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import { Input, Checkbox, Button, Headline, Body } from "@sumup/circuit-ui";
import "@sumup/design-tokens/light.css";
import "@sumup/circuit-ui/styles.css";
import "./circuit.css";
function App() {
const [name, setName] = useState("Studio print"),
[price, setPrice] = useState("24.00"),
[note, setNote] = useState(true),
[errors, setErrors] = useState({}),
[review, setReview] = useState(null);
const nameRef = useRef(),
priceRef = useRef();
const valid = /^\d{1,5}(\.\d{1,2})?$/.test(price) && Number(price) > 0;
const amount = valid
? new Intl.NumberFormat("en-IE", {
style: "currency",
currency: "EUR",
}).format(Number(price))
: "—";
function change(fn) {
fn();
setReview(null);
setErrors({});
}
function submit(e) {
e.preventDefault();
const next = {};
if (!name.trim()) next.name = "Enter an item name.";
if (!valid)
next.price = "Use a positive amount with up to two decimal places.";
setErrors(next);
if (next.name) {
nameRef.current.focus();
return;
}
if (next.price) {
priceRef.current.focus();
return;
}
setReview({ name: name.trim(), amount, note });
}
return (
<main className="circuit-example">
<header>
<p className="eyebrow">MERCHANT TOOLS / LOCAL SPECIMEN</p>
<Headline as="h1">Prepare a simple item</Headline>
<Body>
Review how an item could appear to a customer. This example never
creates a payment link.
</Body>
</header>
<div className="circuit-grid">
<form onSubmit={submit} noValidate>
<h2>Item details</h2>
<Input
ref={nameRef}
label="Item name"
required
value={name}
maxLength={80}
invalid={!!errors.name}
validationHint={
errors.name || "Use a short name the customer can recognize."
}
onChange={(e) => change(() => setName(e.target.value))}
/>
<Input
ref={priceRef}
label="Price in EUR"
required
inputMode="decimal"
value={price}
invalid={!!errors.price}
validationHint={
errors.price || "Example amount only; no charge will be made."
}
onChange={(e) => change(() => setPrice(e.target.value))}
/>
<Checkbox
label="Show a customer note field"
checked={note}
onChange={(e) => change(() => setNote(e.target.checked))}
/>
<Button variant="primary" type="submit" stretch>
Review item locally
</Button>
{review && (
<div className="review" role="status">
<strong>Item reviewed</strong>
<p>
{review.name} · {review.amount}
</p>
<small>
Local snapshot only. No payment link or charge created.
</small>
</div>
)}
</form>
<section className="preview-surface" aria-labelledby="preview-heading">
<h2 id="preview-heading">Customer-side preview</h2>
<div className="receipt">
<div className="shop-mark" aria-hidden="true">
N
</div>
<p className="shop-name">Northstar Studio</p>
<div
className="print-art"
role="img"
aria-label="Original geometric print illustration"
>
<i></i>
<b></b>
<span></span>
</div>
<h3>{name.trim() || "Your item name"}</h3>
<p className="receipt-price">{amount}</p>
{note && (
<div className="note-placeholder">
<span>Customer note</span>
<p>A note field would appear here.</p>
</div>
)}
<div className="preview-action">
Preview only · checkout unavailable
</div>
</div>
</section>
</div>
<footer>
Native Circuit UI 8.15.0 components and design tokens 7.3.1. Original
item editor and illustration by OpenDesign.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
main.jsx dosyasının yanına kaydedin. Bu özel düzen kuralları, kitaplığın belirteç başvurusundan ayrı tutulmuştur.
04
SumUp Circuit Tasarım Sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Sabitlenmiş yerel örnek pakete alındı ve tarayıcıda yerel olarak kontrol edildi. Örnek yalnızca yerel uygulama durumunu kullanır.
sh
npm create vite@latest circuit-item -- --template react
cd circuit-item
npm install
npm install [email protected][email protected] @sumup/[email protected] @sumup/[email protected] @sumup/icons @sumup/intl@1 @emotion/react @emotion/styled @emotion/is-prop-valid
# Replace src/main.jsx and add src/circuit.css.
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Sabitlenmiş yerel kontrolleri ve gerekli iki stil sayfasını kullanarak bir Circuit ürün düzenleyicisi oluşturun. Tutar dizgelerinin tamamını doğrulayın, para birimi biçimlendirmesini koruyun, düzenlemelerden sonra eski yerel inceleme sonucunu temizleyin ve müşteri tarafındaki önizlemeyi gerçek bir ödeme sayfasından ayrı tutun. Özgün çizimi ve anlamsal belirteç rollerini aynen kullanın.
05
SumUp Circuit Tasarım Sistemi Kaynakları ve Kapsamı
OpenDesign uygulama kılavuzunun sabitlenmiş bir Circuit paket sürümüne uyarlanmış hâli. Çizim, tutar ve ürün örnek amaçlıdır. Bu yerel düzenleyici ödeme bağlantısı oluşturmaz, ücret tahsil etmez veya SumUp hesabında işlem yapmaz; güncel üst akış paketleri daha yeni @sumup-oss ad alanını kullanır.
