Bạn không phải thiết kế các nút của riêng mình cho Apple Pay. Trên thực tế, Apple nói với bạn rằng bạn không thể. Vì vậy, bạn phải làm gì trên web? Rất may, Apple đã cung cấp một cách. Nó hơi kỳ lạ và liên quan đến một loạt các thuộc tính và giá trị CSS độc quyền, nhưng điều gì sẽ xảy ra.
Họ có tài liệu cho tất cả những điều này nhưng tôi sẽ chuyển nó ở đây để bạn có thể xem các bản demo thực tế.
Đây là mã chính xác mà họ cung cấp:
Xem nút Pen
Apple Pay của Chris Coyier (@chriscoyier)
trên CodePen.
Hoạt động tốt trong Safari, nhưng Chrome và Firefox bị nhầm lẫn.
Không quá ngạc nhiên, vì nó sử dụng nền giống như -webkit-named-image(apple-pay-logo-white);trong @supports not (-webkit-appearance: -apple-pay-button)kịch bản, mà tôi không thể tưởng tượng được bất kỳ ai ngoài Apple thực hiện.
Thêm nữa… họ đang đề xuất một sản phẩm trống , điều đó không tuyệt vời.
Chúng ta có thể lật đổ chúng mà không gặp quá nhiều khó khăn. Chỉ cần thêm border: 0;cho Firefox.
Tôi muốn làm cho họ giống…
Apple Pay Nhưng sau đó chúng tôi nhận được:
Nhưng chúng ta có thể text-indent: -9999px;làm được điều đó sau đó đảm bảo rằng chúng ta đặt màu đúng cách để chúng ta có các nút ngữ nghĩa có thể chấp nhận được.
Xem nút Pen
Apple Pay của Chris Coyier (@chriscoyier)
trên CodePen.
Nhưng nhiều khả năng ... tôi nghi ngờ sẽ thấy:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Như trong, tại sao lại hiển thị khu vực đó nếu bạn đang sử dụng trình duyệt không hỗ trợ phương thức thanh toán đó.
Các bản demo khác của họ cũng gặp vấn đề tương tự. Ví dụ: nút "Mua bằng" cung cấp cho bạn:
Buy with Cái nào 1) không phải là nút và 2) không có nội dung hoàn chỉnh để nói điều gì đang xảy ra.
Chỉ cần một cái nhìn lên. Tôi sẽ không nói là không sử dụng nó, nhưng tôi sẽ nói rằng hãy dành một phút để làm sạch HTML và tạo kiểu phù hợp để nó tương thích với nhiều trình duyệt.