Nút mua
Nút mua là vài dòng HTML bạn dán lên bất kỳ trang nào. Không framework, không bước cài đặt ở phía bạn. Cái nút hiển thị ở lần vẽ đầu tiên; bộ chọn nhà cung cấp và các SDK của nhà cung cấp thanh toán được tải theo nhu cầu lần đầu một người mua nhấp vào. Nó hoạt động trong bất kỳ trang web hay framework nào hiển thị HTML, kể cả các trình tạo trang không cần code cho phép bạn dán nhúng HTML.
Đã xác nhận hoạt động với: Angular, Hugo, Jekyll, HTML thuần, Webflow (nhúng Custom Code), Carrd (phần tử Embed), Framer (nhúng HTML), Squarespace (Code Block), WordPress (khối Custom HTML), Ghost, trang Notion (widget nhúng HTML). Nếu trang web cho phép bạn dán HTML vào một trang, nút mua hoạt động ở đó.
Tham chiếu thuộc tính
| Thuộc tính | Bắt buộc | Nó chấp nhận gì | Ghi chú |
|---|---|---|---|
endpoint | Không | Chuỗi URL | Gần như luôn bỏ qua cái này. Cái nút tự dò địa chỉ API cơ sở của nó: https://api.coinmoebius.com trong môi trường sản xuất, http://localhost:8787 trên localhost. Chỉ đặt nó như một ghi đè cho một thiết lập bất thường (ví dụ một proxy tự lưu trữ đứng trước API). |
project-id | Có | Chuỗi, có tiền tố proj_ | Từ trang dự án của bạn trong bảng điều khiển. An toàn để công khai, nó là một định danh, không phải thông tin xác thực. |
product-id | Có (ở chế độ nghiêm ngặt) / Khuyến nghị (ở chế độ linh hoạt) | Chuỗi, theo bất kỳ định dạng nào bạn chọn | Định danh sản phẩm nội bộ của bạn. Ở chế độ nghiêm ngặt (mặc định), đây là cách worker tra giá từ catalog của bạn. Ở chế độ linh hoạt, nó vẫn được truyền đến các webhook của bạn trong metadata.productId để bạn có thể ánh xạ giao dịch về tồn kho. Xem mục Chế độ nghiêm ngặt và chế độ linh hoạt bên dưới. |
amount | Chỉ ở chế độ linh hoạt | Số thập phân dưới dạng chuỗi | Giá theo đơn vị lớn (ví dụ đô la, không phải xu). Phải dương. Bỏ qua cái này ở chế độ nghiêm ngặt. Worker đọc giá chuẩn từ catalog của bạn và bỏ qua bất kỳ giá trị nào trong HTML. Chỉ bắt buộc khi dự án ở chế độ linh hoạt và product-id không có trong catalog. |
currency | Chỉ ở chế độ linh hoạt | Mã ISO 4217 ba chữ cái hoặc tên đơn vị của riêng bạn | USD, EUR, v.v. cho các phương thức thẻ / tiền điện tử. Nhà cung cấp thanh toán qua bưu điện chấp nhận bất kỳ chuỗi nào (ví dụ GBK) vì người bán là người giải quyết giao dịch. Cùng quy tắc như amount: bỏ qua ở chế độ nghiêm ngặt, bắt buộc ở chế độ linh hoạt cho các sản phẩm không có trong catalog. |
label | Không | Chuỗi | Văn bản trên nút. Mặc định là Buy. Dùng cái này để phân biệt các nút trên cùng một trang. |
customer-ref | Không | Chuỗi, theo bất kỳ định dạng nào bạn chọn | Một định danh không rõ nghĩa cho người mua trong hệ thống của riêng bạn, như một id người dùng đã đăng nhập. Cái nút chuyển tiếp nó đến worker dưới dạng metadata.customerRef, và worker gắn nhãn giao dịch với nó. Về sau bạn có thể hỏi "người dùng nào của tôi đã trả tiền?" bằng id của riêng bạn, mà chúng tôi không giữ bất kỳ dữ liệu khách hàng thực nào. Bỏ qua cho các giao dịch ẩn danh. |
theme | Không | dark hoặc light | Chọn bảng màu dựng sẵn cho cả nút và cửa sổ. Mặc định là dark. Đặt theme="light" cho bảng màu sáng. Các biến CSS của bạn ghi đè lên cả hai. Xem hướng dẫn tạo kiểu. |
editable-amount | Không | true hoặc false | Khi true, cửa sổ hiện một ô số tiền để người mua điền vào (tiền boa, quyên góp, trả tùy tâm). Mặc định là false, khi đó amount bạn đặt là cố định và không có ô nào xuất hiện. Các nút thanh toán vẫn bị vô hiệu hóa cho đến khi số tiền là một số dương. |
Nhiều nút trên một trang
Script đăng ký cái nút một lần, rồi bất kỳ số lượng phiên bản nào cũng có thể hiển thị trên một trang. Mỗi phiên bản độc lập. Ví dụ dưới đây dùng chế độ nghiêm ngặt (mặc định): không có amount hay currency trong HTML, vì worker tra giá từ mỗi sản phẩm trong catalog của bạn.
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="t-shirt-medium"
label="T-shirt (medium)">
</coin-moebius-buy>
<coin-moebius-buy
project-id="proj_YOUR_ID"
product-id="mug-blue"
label="Blue mug">
</coin-moebius-buy>Nếu dự án của bạn ở chế độ linh hoạt (widget quyên góp, hộp boa), mỗi nút cũng bao gồm amount và currency. Xem Chế độ nghiêm ngặt và chế độ linh hoạt để có bức tranh đầy đủ.
Tạo kiểu cho nút
Nút mua hiển thị bên trong một Shadow DOM, nghĩa là không CSS hiện có nào của trang bạn vươn vào được. Đó là có chủ đích: nó giữ cho cái nút trông giống nhau trên mọi trang, và ngăn một quy tắc * { box-sizing: ... } lạc lõng làm hỏng cửa sổ bộ chọn. Bạn tạo kiểu cho nó qua hai bề mặt từ bảng định kiểu của riêng bạn: các thuộc tính tùy chỉnh CSS cho màu sắc, phông chữ, và hình dạng, và các bộ chọn ::part() cho mọi thứ khác. Không cần JavaScript.
Mọi biến và phần đều được ghi lại trong hướng dẫn tạo kiểu, với các ví dụ thực tế bạn có thể nhấp và sao chép:
Mở hướng dẫn tạo kiểu tương tác →
URL thành công và URL hủy
Khi bạn kết nối Stripe hoặc NOWPayments trong tab Nhà cung cấp của bảng điều khiển, bạn đặt hai URL:
- URL thành công, nơi người mua đáp xuống sau một khoản thanh toán thành công. Stripe và NOWPayments thêm một tham số truy vấn (
?session_id=...cho Stripe,?NP_id=...cho NOWPayments) để trang thành công của bạn có thể nhận diện giao dịch nào đã hoàn tất. Hầu hết các trang tĩnh chỉ hiện một thông báo chung "Cảm ơn, khoản thanh toán của bạn đang được xử lý" và dựa vào bảng điều khiển làm nguồn sự thật. - URL hủy, nơi người mua đáp xuống nếu họ rút lui trước khi trả tiền. Thường giống với trang giỏ hàng của bạn.
Cả hai URL được cấu hình theo từng nhà cung cấp trong bảng điều khiển, phần tử không cần biết về chúng.