Apple Pay is a new easier way to pay on the web. Unlike paying with a physical card, using Apple Pay in stores happens in seconds with your iPhone and Apple watch. All your clients have to do is hold their iPhone near your reader with their finger on touch ID, or double click on the side button on their Apple watch and their payment process happens with just a touch. This will also work on any device that supports Touch ID, including the new Macbook Pro as well as any future devices that Apple releases. It’s quicker, easier and more secure than ever. Apple Pay has certain requirements you should review before installing into your store.
The documentation for Apple Pay that we’ll be going over today can be found on our website at http://docs.miva.com/. Simply come over to “How to Guides,” click on the icon and you'll see the very first link under 9.6 resources will be Apple Pay. We’ll also list the link down below to install Apple Pay. You can simply click on the Payment Icon in your Admin, or you can go up to Menu, scroll down to “Payments,” click on “Add/Remove Modules” and look for the Apple Pay module under “Available Modules.”
Before you install Apple Pay, Apple Pay does have some limitations to sites that can use their software. If you follow the link to their guidelines you'll see that there are certain sites that may not incorporate Apple Pay into their website. This includes any websites that offer transactions involving:
If your site does not offer any of these then you can switch back over to your admin and go ahead and click the install button. Once you've installed Apple Pay you'll see the screen refresh and a message that Payment Settings have been updated. You'll see that there's a new Settings tab under the Payment Settings section. If you scroll down to the bottom of the page, you'll see a new tab called Apple Pay Payment Networks. Apple Pay accepts the following cards: American Express, Discover, Mastercard and Visa. By default, the Payment Gateway settings are set to automatic, however, if you wanted to you could map to a different Payment Gateway. It's important to remember that currently Apple Pay only supports two payment gateways; Authorize.net and Braintree, so you need to be using one of these two gateways to use Apple Pay. If you don't have one of these payment gateways, nothing would show up here and you just see a message saying “Not supported on our store.” We’re using Braintree and it automatically mapped it for us. If we also had Authorize.net and we wanted to select that, we could manually map it here. However, most people will only have one Payment Gateway, so leaving the settings to Automatic should work for most. That's how to configure Apple Pay through the Admin.
Now that I have Apple Pay configured through the admin, I need to install the item tags where I want the Apple Pay button to show up. Apple Pay provides best practices. Ideally you want to put the button on the product page, the basket page, the mini card page and the first step of check out that Apple's recommended best practices for highest conversion rate. In this example here, I'm just going to show you where to place the button on the product page. Apple recommends you place their button above the add to cart button for best-practice. So there are two item tags we need to place on our product page. There's the head tag, this goes in the head of the website that outputs JavaScript that is required for Apple Pay to work. So I'm going to copy this, go back to my admin and search for my product page and I'm going to paste the item tag right above the closing head tag. I'm going to click update. In addition to placing the Apple Pay, head tag I need to assign the Apple Pay item to the page. Click on the “Items” tab, search for Apple Pay and click on the button to assign it to the page. Now I'll go back over to the Apple docs which provide the item tags for us and grab the tag for the button. Now there's two versions of the button; there's a generic Apple Pay button, which is used for any page that's not the product page, so on the basket page the checkout page, etc. Then there's the Apple Pay Product button. This should only be used on the actual product page. It's important to note that there's a difference in how these work. The Apple Pay product button will only buy the product that you're currently looking at. Even if you have 10 items in your cart, this button will only buy the product you're currently on. Whereas the generic button on the other pages will buy your entire cart. So there's a distinction of how these two item tags work. So go ahead and copy the item for the product tab. I'll go back over to the admin, click on the page icon and I'll scroll down to the product display layout. I'm going to do a quick search for my “Add to Cart” button. I want to place my item tag right above the “Add to Cart” button. Now that I've pasted the item tag I'm going to put a break tag just for styling. I'm going to hit the update button. Now let's go see how the button looks in our store. Okay here's our but now we want to get our button to match the Add to Cart button as far as the height and width go. To do that we can jump back over to the Miva Admin. Now because I have the Apple Pay item assigned to this page I now have this new tab for the Apple Pay button this section controls the layout of the button on that particular page. So in this case, the product page. You can change what the button says on it. It can either be plain with just the Apple Pay and the word “Pay” next to it, or you can change it to say “Buy with Apple Pay.” You can change the style to either black, white or white with outline. I'm going to change this to the black version and then hit update. If I go back over to Safari and hit refresh the button is now the black version with just the words “Pay” next to the Apple. So now I want to change the height and width of this button to match the Add to Cart button I have below it. Now if I knew the dimensions of the button, I could just type it into match. However, on this site, it is responsive and it changes. So whatever CSS is applied to this button style, you want to use it for your Apple Pay button. This way the two buttons will be consistent. For this example though we're just going to go ahead and make the change in our Admin. We’ll change the button size to be 260 pixels wide, we’ll click the update button, go back over to Safari and click the refresh button. There's the Apple Pay button. I've changed the type, the style and I've change the width and height to match my other buttons. Now,if I select the Apple Pay button without selecting the attributes for this product, it will try and process the order, but it will give me an error message. Once I go back and select the attributes for the product and then click “Buy with Apple Pay,” it brings up the payment sheet and because I have an Apple Watch, it's detecting my watch. I can confirm the order on my watch. I can change the card info, the shipping address if I wanted to and if I have more than one shipping method I could change it all right here. All of these items could be updated by clicking on the icons right here on the right hand side column. Okay, I'm going to leave the settings as is, confirm on my Apple watch, and you'll see my Apple Pay processing my payment. AFter it’s done it will take me straight to my invoice. So there you have it, I just made a real purchase using Apple Pay on my Miva Merchant store.