Add ApplePay & Payment Cards to Epic CTA's

[paul-daniel-dempsey]

What does this change?

As part of the “one-click payment” exploration, we decided to build in the apple logo button and direct users to checkout to monitor click through rates (only). 2-step checkout test will be live at the same time, so no directing readers to any specific page of checkout required for now.

[Trello] https://trello.com/c/EFtKKTMB/1589-adding-apple-pay-logo-on-to-epics-development

ApplePay Setup Documentation (associated PR's)

Apple needs to authorise the guardian to display an Apple Pay logo button inside our Epic's on http://www.theguardian.com/ and https://m.code.dev-theguardian.com - a MerchantId file has been authorised and generated for use. Two (different pre-generated static) Apple merchantId files need to be located at the following paths:-
https://m.code.dev-theguardian.com/.well-known/apple-developer-merchantid-domain-association.txt
https://www.theguardian.com/.well-known/apple-developer-merchantid-domain-association.txt
Platform
Frontend

Setup	Notes
ApplePay Check	https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability
ApplePay MerchantId	merchant.uk.co.guardian.contributions
ApplePay MerchantId Domain SetUp	https://docs.subscribepro.com/integrations/magento-1/apple-pay/domain-verification/

Design

• Triggered by any epic variant labeled 'V1-APPLE-PAY' AND ApplePay enabled in Safari
• Storybook epics variant labeled 'V1-APPLE-PAY' AND 'forceApplePay' flag will force ApplePay display
• Display ApplePay and Other Payments CTA's containing SVG's
• Tablet and below breakpoint display extra Reminder CTA
• Ophan logging (view and click)

Mobile	Desktop

How to test

1. Storybook

• All browsers regardless of ApplePay settings (ApplePay button displayed - for testing purposes)

3. RRCP Dev/Code

• Non-Safari Browser (original)
• Safari Browser without ApplePay setup (original)
• Safari Browser WITH ApplePay (ApplePay button displayed)

Accessibility test checklist

• Tested with screen reader
• Navigable with keyboard

[GHaberis]

Nice, looks good to me 👍