Pháp điển · IX

Biến nút mua thành của bạn

Cả nút mua lẫn cửa sổ thanh toán mà nó mở ra đều nhận màu sắc, phông chữ và hình dạng của bạn. Bạn đặt vài biến CSS; cả hai cùng đi theo. Mọi thứ bên dưới là một ví dụ thực tế bạn có thể nhấp vào, kèm đúng đoạn mã đã tạo ra nó ngay bên cạnh.

Không cái nào trong số này là giao diện dựng sẵn. Mỗi diện mạo được dựng từ đoạn CSS thuần hiển thị ngay bên cạnh. Sao chép bất kỳ cái nào làm điểm khởi đầu và thay đổi tùy thích.

Đây là các nút thực với nhà cung cấp giả lập và mã tham chiếu giả. Không có khoản thanh toán nào được thực hiện. Nhấp vào một nút để mở cửa sổ của nó, rồi đọc đoạn mã đã tạo kiểu cho nó.

Mặc định

Không CSS, không thuộc tính. Nút và cửa sổ của nó dùng chung một màu than trung tính ngay từ đầu. Đây là theme="dark", giá trị mặc định, nên viết ra cũng không thay đổi gì.

Buy now

Nhấp để mở cửa sổ

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="ebook"
  amount="29"
  currency="USD">
  Buy now
</coin-moebius-buy>

Giao diện sáng

Thêm theme="light" và cả nút lẫn cửa sổ chuyển sang màu trắng ngà dịu. Một thuộc tính, không CSS.

Get access

Nhấp để mở cửa sổ

<coin-moebius-buy
  project-id="proj_xxxx"
  product-id="membership"
  amount="99"
  currency="USD"
  theme="light">
  Get access
</coin-moebius-buy>

Ví dụ, không phải mẫu dựng sẵn

Mỗi cái dưới đây chỉ là đoạn CSS hiển thị bên cạnh nó, không gì hơn. Lấy bất kỳ cái nào, dán vào bảng định kiểu của bạn, và thay đổi các giá trị. Pha trộn tùy thích.

Màu thương hiệu

Một nút màu chàm với cửa sổ chàm tương xứng, đặt bằng một nhúm biến CSS. Thay đổi bất kỳ giá trị nào để đổi màu nó.

Buy the eBook

Nhấp để mở cửa sổ

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #4f46e5;
  --cm-button-color: #fff;
  --cm-button-radius: 9999px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #1e1b4b;
  --cm-color: #e0e7ff;
  --cm-modal-overlay: rgba(30, 27, 75, 0.6);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 9999px;
}

Terminal

Nền đen, chữ monospace màu xanh lá, góc vuông. Cửa sổ đi theo cùng diện mạo. Mọi giá trị ở đây đều thuộc về bạn để thay đổi.

> buy_license

Nhấp để mở cửa sổ

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #001b00;
  --cm-button-color: #39ff14;
  --cm-button-radius: 0;
  --cm-font: 'Courier New', monospace;
  /* the popup, styled to match */
  --cm-modal-bg: #000;
  --cm-color: #39ff14;
  --cm-modal-overlay: rgba(0, 20, 0, 0.8);
}
coin-moebius-buy::part(dialog) {
  border: 1px solid #39ff14;
  border-radius: 0;
}
coin-moebius-buy::part(provider) {
  border-radius: 0;
}

Dịu nhẹ

Một nút hồng ấm với cửa sổ hồng dịu tương xứng. Bo tròn góc nhiều hay ít bằng cách sửa một con số.

Add to cart

Nhấp để mở cửa sổ

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #ec4899;
  --cm-button-color: #fff;
  --cm-button-radius: 14px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff1f7;
  --cm-color: #831843;
  --cm-modal-overlay: rgba(131, 24, 67, 0.35);
}
coin-moebius-buy::part(dialog) {
  border-radius: 18px;
}
coin-moebius-buy::part(provider) {
  border-radius: 12px;
}

Chuyển sắc

Một mặt nút chuyển sắc, với cửa sổ được nhuộm tương xứng. Tô mặt nút tùy thích bạn.

Reserve a spot

Nhấp để mở cửa sổ

coin-moebius-buy::part(button) {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 2rem;
  font-weight: 700;
}
coin-moebius-buy {
  /* the popup, picking up the gradient's colors */
  --cm-modal-bg: #f5f3ff;
  --cm-color: #4c1d95;
  --cm-modal-overlay: rgba(76, 29, 149, 0.45);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
  border-top: 4px solid #764ba2;
}

Tối giản

Một viền mỏng, chữ nhạt, và một cửa sổ trắng sạch sẽ. Lược bỏ cho đến khi nó tối giản như bạn muốn.

Purchase

Nhấp để mở cửa sổ

coin-moebius-buy {
  /* the button */
  --cm-button-bg: transparent;
  --cm-button-color: #374151;
  --cm-button-radius: 6px;
  /* the popup, styled to match */
  --cm-modal-bg: #fff;
  --cm-color: #374151;
  --cm-modal-overlay: rgba(17, 24, 39, 0.25);
}
coin-moebius-buy::part(button) {
  border: 1px solid #d1d5db;
}
coin-moebius-buy::part(dialog) {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

Thêm một Hộp boa

Các ví dụ trên nằm trên nền trống. Đây là nó đặt trên một trang thực, lồng vào một thẻ, với chế độ nhập số tiền được bật để người mua tự chọn mức quyên góp. Nhấp vào và thử.

Thích nội dung này chứ?

Để lại một khoản boa. Nó giúp giữ đèn sáng và bài viết tiếp tục.

Leave a tip

coin-moebius-buy {
  /* the button */
  --cm-button-bg: #b45309;
  --cm-button-color: #fff;
  --cm-button-radius: 8px;
  --cm-font: Georgia, serif;
  /* the popup, styled to match */
  --cm-modal-bg: #fffaf3;
  --cm-color: #7c4a02;
  --cm-modal-overlay: rgba(124, 74, 2, 0.4);
}
coin-moebius-buy::part(dialog) {
  border-radius: 14px;
}

Cho phép người mua tự đặt số tiền

Thêm editable-amount="true" và cửa sổ hiện một ô số tiền để người mua điền vào, dành cho tiền boa, quyên góp, hay trả tùy tâm. Bỏ nó đi, đây là mặc định, thì amount bạn đặt sẽ cố định và không có ô nào xuất hiện. Dù theo cách nào, 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, nên người mua không thể thanh toán bằng không.

Tham chiếu tạo kiểu

Mọi bề mặt bạn có thể tạo kiểu. Đặt các biến trên nút; chạm tới phần còn lại bằng ::part().

Các thuộc tính tùy chỉnh CSS

Đặt các thuộc tính này trên phần tử coin-moebius-buy (hoặc bất kỳ tổ tiên nào của nó, vì các thuộc tính tùy chỉnh được kế thừa):

Thuộc tính	Mặc định	Nó điều khiển gì
`--cm-font`	`system-ui, -apple-system, BlinkMacSystemFont, sans-serif`	Họ phông chữ cho nhãn nút và mọi phần tử văn bản bên trong cửa sổ bộ chọn.
`--cm-color`	`#ededed` (`#1f1f1f` với theme="light")	Màu chữ cho cửa sổ và các hướng dẫn của nó.
`--cm-button-bg`	`#2b2b2b` (`#f5f5f5` với theme="light")	Màu nền của nút. Khớp với bề mặt cửa sổ theo mặc định.
`--cm-button-color`	`#ededed` (`#1f1f1f` với theme="light")	Màu chữ của nút.
`--cm-button-radius`	`6px`	Bán kính bo góc của nút. Dùng `999px` cho dạng viên thuốc, `0` cho góc vuông.
`--cm-modal-bg`	`#2b2b2b` (`#f5f5f5` với theme="light")	Nền của cửa sổ bộ chọn.
`--cm-modal-overlay`	`rgba(0, 0, 0, 0.45)`	Sắc nền phủ phía sau cửa sổ bộ chọn.

Các bộ chọn ::part()

Đối với bất cứ thứ gì ngoài các biến trên, hãy nhắm vào các phần được đặt tên của thành phần từ CSS của trang bạn. Cái nút phơi ra tám phần:

Phần	Phần tử
`button`	Bản thân nút mua.
`modal`	Khung phủ toàn màn hình phía sau bộ chọn.
`dialog`	Hộp cửa sổ bộ chọn ở giữa.
`provider`	Mỗi tùy chọn nhà cung cấp thanh toán bên trong bộ chọn.
`provider-icon`	Biểu tượng nhỏ bên cạnh tên một nhà cung cấp.
`provider-name`	Phần văn bản tên nhà cung cấp.
`close`	Nút "Hủy" ở dưới cùng của bộ chọn.
`instructions`	Bảng hướng dẫn hiển thị cho thanh toán qua bưu điện (địa chỉ thư tín + mã tham chiếu).

Sáng & tối

Cửa sổ tối theo mặc định. Để có một cửa sổ sáng, thêm theme="light" vào phần tử. Đó là toàn bộ công tắc, và nó không đi theo thiết lập thiết bị của khách truy cập, nên thứ bạn chọn là thứ mọi người mua thấy. Muốn một thứ cụ thể? Đặt bất kỳ biến nào ở trên đè lên một trong hai giao diện và giá trị của bạn thắng.

Những gì chưa thể tạo kiểu

Một vài thứ được cố ý mã hóa cứng trong v1: các chuyển động hover 120ms, z-index của cửa sổ, và phần lớn khoảng cách/đệm bên trong bộ chọn. Nếu một nhu cầu thương hiệu rơi vào một trong số này, cách khắc phục là chính bộ chọn ::part() đó với một ghi đè !important; cách sạch sẽ hơn là yêu cầu chúng tôi thêm một biến CSS cho nó. Trình theo dõi vấn đề của SDK là nơi phù hợp cho việc đó.

Phương thức thanh toán theo từng sản phẩm

Chọn phương thức nào hiện trong cửa sổ, đổi tên chúng, và đặt thứ tự cho từng sản phẩm ngay từ bảng điều khiển. Một gói hội viên có thể bỏ qua thanh toán qua bưu điện trong khi một tệp tải xuống vẫn giữ nó.

← Quay lại tài liệu

Tạo kiểu xong, rồi xuất bản

Sao chép bất kỳ ví dụ nào vào bảng định kiểu của bạn và bắt đầu nhận thanh toán. Bắt đầu miễn phí, không cần thẻ.

Xem bảng giá Đọc tài liệu