Apple Pay buttons now not showing

[lesliekirk]

This morning the Apple Pay buttons I had installed on a site where displaying (with the exception of the mini-basket). I went to work on adding the button to the OSCT screen as outlined in the docs. When I went to check it, the button wasn't there. I made sure the item was assigned to the screen, I added the head tag token to the OSCT page and the button token on the page. So I started my browsing over at the the storefront, went to a product to add it to the basket and that's when I discovered the missing Apple Pay button. It's now missing from the PROD page and the BASK page, in addition to the OSCT screen.

[Brennan]

Some things to check:

1. Are all the pages https?
2. Is the JS showing up in the head tag when you view source (This is what the head item does)
3. Is the button anywhere globally? I've seen this prevent the others from showing.

If those does not lead anywhere, send in a ticket and we can see what is going on.

[lesliekirk]

Some things to check:

1. Are all the pages https?

Yes

2. Is the JS showing up in the head tag when you view source (This is what the head item does)

Does the head item show up in all browsers? Or will it only trigger in Safari on Mac running Sierra?

3. Is the button anywhere globally? I've seen this prevent the others from showing.

Well yeah - the mini-basket is a global location.

[lesliekirk]

I removed the token from the mini-basket and it's back again.

So it would seem that trying to add the button to the mini-basket is a fail.

[William Davis]

Are there any setting that needs to be made within the Authorize.Net website admin?

If so, which ones?

How can I test if this is working if not all pages are https?

Where in the Levels ReadyThemes template do you place the code (I did not find video help when it came to this part, code was grayed-out and a demo mode plastered in the centered of the video made it impossible for me to determine where to place the code).

[lesliekirk]

There are no setting in the Auth.net (Gateway) website admin, BUT make sure your card processor accepts ApplePay.

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.

Product Page
<mvt:item name="applepay" param="head" /> - in the head tag

<mvt:item name="applepay" param="product" /> - this is the button item for the PROD page. Place it above your add to cart button

Basket Page
<mvt:item name="applepay" param="head" /> - in the head tag
<mvt:item name="applepay" /> - this is the button. Place it about your secure checkout button


Bill To / Ship To (OCST)
<mvt:item name="applepay" param="head" /> - in the head tag
<mvt:item name="applepay" /> - this is the button. Place it at before the Customer fields (or some place attention getting on the page)

And make sure you assign the ApplePay Item to the Page. And again, make sure your card processor accepts ApplePay. Auth.net and Braintree are only gateways to your card processor who must accept ApplePay.

Also for desktop testing purposes your Mac must be running Sierra with your iPhone handy (if you don't have the latest laptop with the touch bar).

[William Davis]

There are no setting in the Auth.net (Gateway) website admin, BUT make sure your card processor accepts ApplePay.



Product Page
<mvt:item name="applepay" param="head" /> - in the head tag

<mvt:item name="applepay" param="product" /> - this is the button item for the PROD page. Place it above your add to cart button

Basket Page
<mvt:item name="applepay" param="head" /> - in the head tag
<mvt:item name="applepay" /> - this is the button. Place it about your secure checkout button


Bill To / Ship To (OCST)
<mvt:item name="applepay" param="head" /> - in the head tag
<mvt:item name="applepay" /> - this is the button. Place it at before the Customer fields (or some place attention getting on the page)

And make sure you assign the ApplePay Item to the Page. And again, make sure your card processor accepts ApplePay. Auth.net and Braintree are only gateways to your card processor who must accept ApplePay.

Also for desktop testing purposes your Mac must be running Sierra with your iPhone handy (if you don't have the latest laptop with the touch bar).

Thanks Leslie, I understand the instructions without a problem. My problem is trying to figure out where within the actual code to paste "<mvt:item name="applepay" />" because I do not understand the code yet.

[lesliekirk]

For the BASK page I added it just above the Checkout button which is found in the Basket Contents field:

<mvt:item name="applepay" />
<div class="breaker small-all-hidden medium-all-shown large-all-hidden"></div>
            <a href="&mvte:urls:OINF:secure;" title="Proceed to Secure Checkout" class="button button-block button-square button-medium bg-green uppercase">Checkout</a>

        </div>

On the OCST screen, I added it just above the Ship To on the Customer Fields field (I put it in it's own div tag):

<div class="column whole">
<mvt:item name="applepay" />
</div>
<div style="clear:both;"></div>
<div class="column whole medium-half ship-to">
    <h4 class="fields-heading">
        <span class="controls-heading">Ship To:</span>

The PROD product button can be tricky as each ReadyTheme coding can be a little different. I place the ApplePay Product button "just" above the add to cart button but it took a "few"divs to make the layout work

<div class="row cornered add-to-cart-wrap bg-silver">
        <div class="column whole small-half medium-whole large-two-fifths x-large-three-tenths">
          <div class="row quantity-wrap align-center">
            <div class="column whole np"> <span id="js-decrease-quantity" class="bg-gray decrease-quantity" unselectable="on" data-rt-icon="&#x67;"></span>
              <input type="tel" name="Quantity" value="1" id="l-quantity" class="align-center" />
              <span id="js-increase-quantity" class="bg-gray increase-quantity" unselectable="on" data-rt-icon="&#x69;"></span> </div>
          </div>
 <div class="row align-center">
            <div class="column whole np">
              <div class="breaker small-all-hidden medium-all-shown large-all-hidden"></div>
              <mvt:item name="applepay" param="product" />
            </div>
          </div>
        </div>
        <div class="column whole small-half medium-whole large-three-fifths x-large-seven-tenths">
          <div class="breaker small-all-hidden medium-all-shown large-all-hidden"></div>
          <input type="submit" value="Add to Cart" id="js-add-to-cart" class="button button-block button-square uppercase add-to-cart bg-green bold" />
        </div>

I put the <mvt:item name="applepay" param="head" /> token in the head area of each page. I know that Miva has suggested putting it in the Global HEAD Tag but that caused issues for me.