24/7 Support: 800.608.6482

How To Guides

Due to Hurricane Milton, Miva’s technical support team will be operating at reduced capacity this week, which may cause delays. Miva store operations are unaffected.
Try our new AI assistant by clicking the chat icon in the lower right corner.

How To Guides

How to Setup Apple Pay on your Miva Store

1. Prerequisites

2. How to Enable Apple Pay

3. Page Template Changes

4. Apple Pay Button Options

5. Implementation Guide & Best Practices

6. Enable Apple Pay on your Payment Gateway

7. Authorize.net

8. Error Validation

Prerequisites

Learn More about Braintree Here

Learn More about Authorize.net Here

Enable Apple Pay

Under Payment click Add/Remove Modules and install the Apple Pay Module. Once installed there will be a new Tab Group under Payment -> Settings where you can map the Apple Pay payment methods to one of supported payment gateways in Miva. The default value will be "Automatic". This setting will automatically choose the first gateway you have installed which supports Apple Pay.

Apple Pay Payments

You can override the Automatic setting to explicitly map a payment gateway. This is useful in the case where you have more than one Apple Pay supported gateway setup in your store and you want to use one vs another. Currently only Authorize.net and Braintree payment gateways in Miva support Apple Pay. You will need to have one of these gateways installed in your store to setup Apple Pay.

Apple Pay Payments

Adding Apple Pay to Your Page Templates

Note: The Apple Pay button can only be displayed on a secure page (https). If you want to use the Apple Pay button on your basket or product page you need to make sure those pages are being served over https. To learn more about making your site all https click here.

Please see the Implementation Guide and Best Practices below for explicitly Apple Pay button placement.

It is recommended for best conversion results using Apple Pay, the Apple Pay button is placed on the following locations:

Each page you want to place the Apple Pay button, it requires 3 steps

  1. Assign ApplePay Item to page
  2. Add Head Tag ApplePay Item
  3. Add Button Tag Item

Items:

Head Tag Item:

Product Page Tag:

Basket/Checkout Tag:

Note: The Apple Pay button on the product page (with the param="product" above) allows the customer to quickly purchase just the item they are viewing. Any additional items in their cart are ignored. All other Apple Pay buttons will purchase the entire cart.

Button Settings

Apple Pay buttons have a few configuration options which allow you to customize: type, style as well as button height and width.

Apple Pay Button

Type Choices:

  1. Plain
  2. Buy With Apple Pay

Style Choices:

  1. Black
  2. White
  3. White with Outline

Customizing the Apple Pay Button

Apple recommends that the width and height of the Apple Pay button match existing buttons on your website. Apple Pay payment buttons can be equal to or larger than similar payment or checkout buttons. Do not specify a size that is smaller than other buttons.

The buttons height and width can be set via the Miva admin. This height and width are set on a per page basis. For additional style guidelines please see Apple's style guidelines here

Apple Pay Button Color Options

Buy with Apple Pay White with Outline

Apple PayWhite with Black Text


Buy with Apple Pay White

Apple Pay White with Black Outline


Buy with Apple Pay Black

Apple Pay Black with White Text


Apple Pay Plain White

Apple Pay Plain White with Outline


Apple Pay Plain White with Outline

Apple Pay Plain with Black Text


Apple Pay Plain Black

Apple Pay Plain Black with White Text


Implementation Guide & Best Practices

Apple Pay on Product Display Page

Apple Pay Buy



Apple Pay on Basket Page

Apple Pay Contents

Apple Pay on Mini Basket Page

Apple Pay Mini Basket

Apple Pay on Bill To Ship To Page
It is recommended the button be placed at the very top of the page to avoid confusion with the other fields on the page

Apple Pay OCST

Apple Pay Sheet

Apple Pay Card

Note: A locked “sticky bar” at the bottom of the screen helps increase conversions (especially on mobile).

Mobile

Enable Apple Pay on your Payment Gateway

Before you can use Apple Pay you need to allow your payment gateway to accept Apple Pay.

  1. Log in to Braintree
  2. Go to Settings -> Processing
  3. Apple Pay Card

  4. Under Accept Apple Pay click "Enable"
  5. Apple Pay Card

    You need to do the domain verification. Here is the screen and steps:

    Specify Domain

Authorize.net

No settings are needed for Authorize.net

Currently, Authorize.net supports Apple Pay on the following Merchant Processors:

Error Validation

As of Miva 9.12 Apple Pay now supports error validation. This means that missing required address fields will now be validated before the order is allowed to be placed. Miva will use the required fields you have configured within Miva to determine which fields are set to be required.

Apple Pay Error

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.