Apple pay button svg

Apple Pay Buttons in CSS

You don’t have to design your own buttons for Apple Pay. In fact, Apple literally tells you that you can’t. So, what are you to do on the web? Thankfully, Apple has provided a way. It’s kinda weird and involves a bunch of proprietary CSS properties and values, but whattyagonnado.

They have documentation for all of this but I’ll port it here so you can see actual demos.

Here’s the exact code they offer:

Works fine in Safari, but Chrome and Firefox are properly confused.

Not terribly surprising, as it uses backgrounds like -webkit-named-image(apple-pay-logo-white); in the @supports not (-webkit-appearance: -apple-pay-button) scenario, which I can’t imagine anyone but Apple implementing.

Plus… they are suggesting an empty

We can flop them over to a without too much trouble. Just had to add border: 0; for Firefox.

I’d like to make them more like…

But then we get:

But we can text-indent: -9999px; that away then make sure we set the color properly so we have acceptable semantic buttons.

But more likely… I’d suspect to see:

As in, why show that area at all if you’re in a browser that doesn’t support that payment method.

Their other demos have similar problems. For example, the “Buy With” button gives you:

Which 1) is not a button and 2) doesn’t have complete text in it to say what’s going on.

Just a heads up. I wouldn’t say don’t use it, but I would say take a minute to clean up the HTML and get the styling right so it’s cross-browser compatible.

Источник

Apple Pay Buttons — A Code Review

Apple Pay is a mobile payment service by Apple Inc. It allows users to pay at merchant outlets who support contactless payments and also perform checkout on e-commerce websites & iOS apps. It uses a combination of biometric and code-based authentication methods as part of its two-factor authentication protocols.

Launched initially as a mobile-only service, it eventually went on to include support for newer Apple devices like MacBook Pro and MacBook with Touch ID. Apple Pay integration can be done in apps as well as in websites. With Apple Card launching this summer, it is more likely that customers will want to stick with the Apple ecosystem for e-commerce payments. This scenario will make Apple Pay integration even more vital for e-commerce websites.

Apple Pay buttons

Apple Pay payment or checkout is invoked using the Apple Pay buttons. In this article, we are going to focus only on the website integration on the front-end side.

Assuming all setup work is done for your website, you should get to the Human Interface Guidelines as part of your work. The setup work must include provisioning of an Apple developer account, a public URL, and general compliance for integrating with Apple Pay.

Here you will see all the different types of Apple Pay buttons you can display on your website. Going further into the documentation, you will find the code that you need to embed to render the Apple Pay buttons on your website.

Here are a few things you need to know:

1. Apple Pay only works in Safari.
2. Apple Pay only works on devices with Touch ID; for some older iPads and MacBooks without Touch ID, you need an Apple Watch and/or iPhone with Touch ID.

Apple Pay button HTML code

With the above code in your website, it should magically render an Apple Pay button, provided you also add the respective button CSS given by Apple (an example is shared below).

Let’s analyze the HTML code:

The HTML semantically doesn’t shout button at all. In fact the

One good thing here is that Apple has not hardcoded the

Apple Pay button CSS

First, let us see how the Apple Pay button looks on both Chrome and Safari, respectively. This is the same URL and code rendered in Chrome and Safari. You can see the button by default is rendered very crudely in Chrome.

Let’s analyze the CSS code:

The CSS code uses the @supports directive in CSS to add the respective CSS in supporting browsers i.e. Safari. While this is great for Safari, as a developer, you are left with a broken-looking button on all other browsers.

The reason being all the CSS styles are tied up with Safari only vendor properties like -apple-pay-button-type: buy; -webkit-appearance: -apple-pay-button; -apple-pay-button-style: black;

The fact that the broken button reads “Buy With” without any Apple Pay logo and looks like a CTA doesn’t help.

The part that bugged me the most is that Apple provided all styles for Safari, which is understandable as that is the supported platform. But why did they do a half-baked job of styling for non-supporting browsers?

Something like below as part of the SDK CSS could have handled this. I would recommend you add the below snippet as part of your project.

My observations

HTML

• Let us all agree; the HTML code for the Apple Pay buttons could have been better.
• Class names for text and logo divs inside the main button wrapper are very generic. Apple could have followed the same convention and named it apple-pay-button-text and apple-pay-button-logo.
• A separate HTML tag for adding the Apple Pay logo also seems a bit unnecessary. If we have created all vendor-specific tags, why couldn’t we create one more attribute that adds the logo as a ::before/::after pseudo-elements.
• Apple could have easily managed all of this had they just created an HTML5 web component which that only works in Safari, encapsulating all CSS and HTML inside. Something like
• This would also have opened a way for Apple to push updates as part of Safari browser updates.

CSS

• The CSS also has plenty of room for improvement.
• As this button is of no use in any browser other than Safari, the CSS for hiding it should have been included as well.
• The mischievous part about showing a broken button in all non-supporting browsers makes very little sense. Either it should have been hidden if not supported or styled the same and left to the developer’s discretion.
• Maybe developers could have shown an alert or disclaimer to the customer if they click on the button in Chrome, for example. But having it broken leaves them with only one option: to hide it.
• Which brings us back to—this could have been very well implemented as a vendor-specific (Safari) web component, encapsulating all HTML and CSS.

Conclusion

• You need to add HTML and CSS provided by Apple to display Apple Pay buttons on your website.
• Designers and artists, you are not allowed as per usage guidelines to change any aspect of the Apple Pay buttons. Check Usage Guidelines. You can change width as long as the button is of the same width as other CTAs on the site.
• Apple Pay on the web only works in Safari and that too on Apple devices with Touch ID.
• You will need additional JS/CSS to hide the Apple Pay button and payment option from non-supporting browsers. Apple’s SDK does not handle it. It does provide you with checks in CSS as well as JS.
• Using such a check-in CSS, this snippet can help you hide the button for non-supporting browsers.
• While not explicitly stated by Apple anywhere in the docs, using tag instead of

Swarad Mokal, PHP/Drupal Staff Engineer

Big time Manchester United fan, avid gamer, web series binge watcher, and handy auto mechanic.

Источник

Apple pay button svg

You have no collections yet

All collections displayed here

What can I do with my collections?

Click on any icon you’d like to add to the collection.

Organize your collections by projects, add, remove, edit, and rename icons.

Use the «Paint collection» feature and change the color of the whole collection or do it icon by icon.

Download your collections in the code format compatible with all browsers, and use icons on your website.

Save a backup copy of your collections or share them with others- with just one click!

You have reached your collections limit. Upgrade to get unlimited collections

Register and create new collections

Are you sure you want to delete this collection?

We are sorry you canceled your Premium subscription

You can still enjoy Flaticon Collections with the following limits:

• You can choose only 3 collections to keep
• You can only add up to 100 icons per collection
• You cannot add Premium icons to your collection

The advantages of your collections changed

• You can choose only 3 collections to keep
• You can only add up to 100 icons per collection
• You cannot add Premium icons to your collection

Keep making the most of your icons and collections

Get 20% OFF our
Annual Premium Plan

Источник

Apple pay button svg

The system provides several Apple Pay button types and styles you can use in your app or website. In contrast to the Apple Pay buttons, you use the Apple Pay mark to communicate the availability of Apple Pay as a payment option.

Don’t create your own Apple Pay button design or attempt to mimic the system-provided button designs.

Button Types

Apple provides several types of buttons so that you can choose the button type that fits best with the terminology and flow of your purchase or payment experience.

Use the Apple-provided APIs to create Apple Pay buttons. When you use the system-provided APIs, you get:

• A button that is guaranteed to use an Apple-approved caption, font, color, and style
• Assurance that the button’s contents maintain ideal proportions as you change its size
• Automatic translation of the button’s caption into the language that’s set for the device
• Support for configuring the button’s corner radius to match the style of your UI
• A system-provided alternative text label that lets VoiceOver describe the button

Payment button type	Example usage
	An area in an app or website where people can make a purchase, such as a product detail page or shopping cart page.
	An app or website that lets people pay bills or invoices, such as those for a utility — like cable or electricity — or a service — like plumbing or car repair.
	An app or website offering a shopping cart or purchase experience that includes other payment buttons that start with the text Check out.
	An app or website offering a shopping cart or purchase experience that includes other payment buttons that start with the text Continue with.
	An app or website that helps people book flights, trips, or other experiences.
	An app or website for an approved nonprofit that lets people make donations.
	An app or website that lets people purchase a subscription, such as a gym membership or a meal-kit delivery service.
	An app or website that uses the term reload to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan.
	An app or website that uses the term add money to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan.
	An app or website that uses the term top up to help people add money to a card, account, or payment system associated with a service, such as transit or a prepaid phone plan.
	An app or website that lets people place orders for items like meals or flowers.
	An app or website that lets people rent items like cars or scooters.
	An app or website that uses the term support to help people give money to projects, causes, organizations, and other entities.
	An app or website that uses the term contribute to help people give money to projects, causes, organizations, and other entities.
	An app or website that lets people tip for goods or services.
	An app or website that has stylistic reasons to use a button that can have a smaller minimum width or that doesn’t specify a call to action. If you choose a payment button type that isn’t supported on the version of the operating system your app or website is running in, the system may replace it with this button.

When a device supports Apple Pay, but it hasn’t been set up yet, you can use the Set up Apple Pay button to show that Apple Pay is accepted and to give people an explicit opportunity to set it up.

You can display the Set up Apple Pay button on pages such as a Settings page, a user profile screen, or an interstitial page. Tapping the button in any of these locations should initiate the process of adding a card.

Button Styles

Beginning in iOS 14 and macOS 11, you can use the automatic style to let the current system appearance determine the appearance of the Apple Pay buttons in your app (for developer guidance, see PKPaymentButtonStyle.automatic). If you want to control the button appearance yourself, you can use one of the following options. For web developer guidance, see ApplePayButtonStyle.

Black

Use on white or light-color backgrounds that provide sufficient contrast. Don’t use on black or dark backgrounds.

Источник

Apple pay button svg

Apple provides several Sign in with Apple buttons you can use to let people set up an account and sign in. If necessary, you can create a custom button to offer Sign in with Apple; for guidelines, see Creating a Custom Sign in with Apple Button.

Prominently display a Sign in with Apple button. Make a Sign in with Apple button no smaller than other sign-in buttons, and avoid making people scroll to see the button.

Using the System-Provided Buttons

When you use the system-provided APIs to create a Sign in with Apple button, you get the following advantages.

• A button that’s guaranteed to use an Apple-approved appearance
• Assurance that the button’s contents maintain ideal proportions as you change its style
• Automatic translation of the button’s title into the language specified by the device
• Support for configuring the button’s corner radius to match the style of your UI (iOS, macOS, and web)
• A system-provided alternative text label that lets VoiceOver describe the button

For developer guidance, see ASAuthorizationAppleIDButton (iOS, macOS, and tvOS), WKInterfaceAuthorizationAppleIDButton (watchOS), and Displaying and Configuring Sign in with Apple Buttons (web). You can also visit Sign in with Apple Button to view and adjust live previews of web-based buttons and get the code.

The system provides several variants of the button title. Depending on the platform on which your content runs, choose the variant that fits the terminology of your sign-in experience and use it consistently throughout your interfaces.

The following button titles are available for iOS, macOS, tvOS, and the web:

For watchOS, the system provides one title:  Sign in.

Depending on the platform, the system provides up to three options for the appearance of the Sign in with Apple button: white, white with an outline, and black. Choose the appearance that works best with the background on which the button displays.

White

The white style is available on all platforms and the web. Use this style on dark backgrounds that provide sufficient contrast.

White with Outline

The white outlined style is available in iOS, macOS, and the web. Use this style on white or light-color backgrounds that don’t provide sufficient contrast with the white button fill. Avoid using this style on a dark or saturated background, because the black outline can add visual clutter; instead, use the white style to contrast with a dark background.

Black

The black style is available on all platforms and the web. Use this style on white or light-color backgrounds that provide sufficient contrast; don’t use it on black or dark backgrounds.

Unlike the black Sign in with Apple button for other platforms, the watchOS button uses a fill color that’s not fully black. To contrast with the pure black background of Apple Watch, the watchOS button uses the system-defined dark gray appearance.

Button Size and Corner Radius

Adjust the corner radius to match the appearance of other buttons in your app. By default, the Sign in with Apple button has rounded corners. In iOS, macOS, and the web, you can change the corner radius to produce a button with square corners or a pill-shaped button. For developer guidance, see cornerRadius (iOS and macOS) and Displaying and Configuring Sign in with Apple Buttons (web).

Minimum corner radius

Default corner radius

Maximum corner radius

Maintain the minimum button size and margin around the button in iOS, macOS, and the web. Be mindful that the button title may vary in length depending on the locale. Use the following values for guidance.

Minimum width	Minimum height	Minimum margin
140pt (140px @1x, 280px @2x)	30pt (30px @1x, 60px @2x)	1/10 of the button’s height

Creating a Custom Sign in with Apple Button

If your interface requires it, you can create a custom Sign in with Apple button for iOS, macOS, or the web. For example, you may want to align logos across multiple sign-in buttons, use buttons that display only a logo, or adjust the button’s font, bezel, or background appearance to coordinate with your UI.

Always make sure that people can instantly identify your custom button as a Sign in with Apple button. If your custom button differs too much from the standard one, people may not feel comfortable using it to set up an account or sign in. App Review evaluates all custom Sign in with Apple buttons.

Apple Design Resources provides downloadable Apple logo artwork you can use to create custom Sign in with Apple buttons that display either a logo only or a logo and text. The logo files are available in PNG, SVG, and PDF formats, and the artwork for both types of buttons includes both black and white versions. Here are examples of the black and white logo-only art files, each with a background added for visibility.

All downloadable logo files include padding that simplifies positioning the logo in a button. Logo-only logo files include horizontal and vertical padding that ensures the correct proportion of the logo relative to the button. In addition to padding that keeps the logo and button correctly proportioned, logo files for buttons with text also include horizontal padding that provides a minimum margin between the logo and the button’s leading edge and title.

Use only the logo artwork downloaded from Apple Design Resources; never create a custom Apple logo. As you create a custom Sign in with Apple button, follow these guidelines for using the downloadable logo file:

• Use the logo file to position the Apple logo in a button; never use the Apple logo as a button.
• Match the height of the logo file to the height of the button.
• Don’t crop the logo file.
• Don’t add vertical padding.

To make sure that your custom button is visually consistent with the system-provided Sign in with Apple button, don’t change the following attributes.

• Titles. Use only Sign in with Apple, Sign up with Apple, or Continue with Apple.
• General shape. Buttons that combine the logo with text are always rectangular; logo-only buttons can be circular or rectangular.
• Logo and title colors. Within a button, both items must be either black or white; don’t use custom colors.

To coordinate with your app design, you can change:

• Title font. You can also adjust the font’s weight and size.
• Title case. You can capitalize every letter in the title.
• Background appearance. The overall color should remain black or white. If necessary, you can include a subtle texture or gradient to help the button harmonize with your interface.
• Button corner radius. You can use a corner radius value that matches the other buttons in your UI.
• Button bezel and shadow. For example, you can use a stroke to emphasize the button bezel or add a drop shadow.

Custom Buttons with a Logo and Text

Choose the format of the logo file based on the height of your button. Because SVG and PDF are vector-based formats, you can use these files in buttons of any height. Use the PNG files only in buttons that are 44 points tall, which is the default (and recommended) button height in iOS. Logos are available in small, medium, and large sizes, so you can match logo sizes in all the sign-up buttons you display.

Prefer the system font for the title — that is, Sign in with Apple, Sign up with Apple, or Continue with Apple. Regardless of the font you choose, the title and button height of your custom button should use the same proportions that the system uses. Using the system font for example, the title’s font size should be 43% of the button’s height — in other words, the button’s height should be 233% of the title’s font size, rounded to the nearest integer. Here are two examples that show these proportions using different sizes of the system font.

In general, preserve the capitalization style of the title. By default, all variants of the button title capitalize the first word — that is, Sign or Continue — and Apple; all other letters are lowercase. Avoid changing this style unless your interface uses only uppercase.

Keep the title and logo vertically aligned within the button. To do this, vertically align the title to the middle of the button, then add the logo image, making sure its height matches the height of the button. Because the logo image includes top and bottom padding, vertically aligning the title in the button ensures that the title, the logo, and the button stay properly aligned.

Inset the logo if necessary. If you need to horizontally align the Apple logo with other authentication logos, you can adjust the space between the logo and the button’s leading edge.

Maintain a minimum margin between the title and the right edge of the button. The margin should measure at least 8% of the button’s width.

Maintain the minimum button size and margin around the button. Be mindful that the button title may vary in length depending on the locale. Use the following values for guidance.

Minimum width	Minimum height	Minimum margin
140pt (140px @1x, 280px @2x)	30pt (30px @1x, 60px @2x)	1/10 of the button’s height

Custom Logo-Only Buttons

Choose the format of the logo file based on the size of your button. The downloadable artwork for logo-only buttons is available in SVG, PDF, and PNG formats. Use the vector-based SVG and PDF formats for buttons of any size; use the PNG format only in buttons that measure 44×44 pt.

Don’t add horizontal padding to a logo-only image. A logo-only Sign in with Apple button always has a 1:1 aspect ratio, and the artwork already includes the correct padding on all sides.

Use a mask to change the default square shape of the logo-only image. For example, you might want to use a circular or rounded rectangular shape to present all logo-only sign-in buttons. Never crop the Apple-provided artwork to decrease its built-in padding or use the logo by itself, and avoid including additional padding.

Источник