Вам не потрібно розробляти власні кнопки для Apple Pay. Насправді Apple буквально говорить вам, що ви не можете. Отже, що вам робити в Інтернеті? На щастя, Apple запропонувала спосіб. Це якось дивно і включає купу запатентованих властивостей і значень CSS, але що за те, що саме.
У них є документація на все це, але я перенесу її сюди, щоб ви могли побачити фактичні демонстрації.
Ось точний код, який вони пропонують:
Дивіться кнопку Pen
Apple Pay від Chris Coyier (@chriscoyier)
на CodePen.
Чудово працює в Safari, але Chrome і Firefox належним чином переплутали.
Не страшно дивно, оскільки він використовує фони, як -webkit-named-image(apple-pay-logo-white);у @supports not (-webkit-appearance: -apple-pay-button)сценарії, який я не можу собі уявити, крім Apple.
Плюс ... вони пропонують пусте , що не є чудовим.
Ми можемо перекинути їх без особливих проблем. Просто потрібно було додати border: 0;для Firefox.
Я хотів би зробити їх більш схожими на ...
Apple Pay Але тоді ми отримуємо:
Але ми можемо text-indent: -9999px;це зробити, тоді переконайтеся, що правильно встановили колір, щоб у нас були прийнятні семантичні кнопки.
Дивіться кнопку Pen
Apple Pay від Chris Coyier (@chriscoyier)
на CodePen.
Але швидше за все ... Я підозрюю побачити:
@supports not (-webkit-appearance: -apple-pay-button) ( .container-that-offers-apple-pay ( display: none; ) )Як і в тому, навіщо взагалі показувати цю область, якщо ви переглядаєте браузер, який не підтримує цей спосіб оплати.
Інші демо-версії мають подібні проблеми. Наприклад, кнопка "Купити за" дає вам:
Buy with Який 1) не є кнопкою і 2) не має повного тексту, щоб сказати, що відбувається.
Просто на голову. Я б не сказав, що не використовуйте його, але я б сказав, що витратьте хвилину, щоб очистити HTML і надати правильний стиль, щоб він був сумісним у різних браузерах.