Apple Pay ™

Integrating Apple Pay for the web using Payload is as simple as a line or two of JavaScript with a Payload.js secure inputs payment form.

Follow this guide to learn how to integrate Apple Pay for your Payload account. For a live preview, see the demo below. Please note, Apple Pay will only be available if you load the demo from Safari on an iOS device.

View a Demo

Integrate


<!-- Simple example of enabling Apple Pay -->
<script src="https://payload.co/Payload.js"></script>

<script>
Payload('test_client_key_3bcr16ohAy8aEcwK3Vffs')

const checkout = new Payload.Form({
        form: document.getElementById('checkout-form')
    })
    .applepay(document.getElementById('apple-pay-btn'))
    .on('processed', function(evt) {
        console.log(evt.transaction_id)
    })
</script>

Step 1) Create a Checkout Form

To begin using Apple Pay on the web, first you'll need to create a checkout form using Payload.js. For a full guide on creating a Payload enabled checkout form, see the full section on Secure Inputs.

Below is a simple example of how you can initiate a Payload enabled checkout form:

<script>
const checkout = new Payload.Form({
        form: document.getElementById('checkout-form')
    })
    .on('processed', function(evt) {
        console.log(evt.transaction_id)
    })
</script>

Step 2) Apple Pay Button

Once you have a Payload enabled checkout form, the next step is to add an Apple Pay button to your checkout. The best way to do this is to use Apple's javascript library, see the example below:

<div class="apple-pay-button-with-text apple-pay-button-white-with-text">
  <span class="text">Buy with</span>
  <span class="logo"></span>
</div>


For more information, see the Styling Buttons section for guidelines on how to style and incorporate the buttons appropriately.


Step 3) Activate Trigger

On the Payload.Form there is a applepay function. Use this to activate the buttons. Both functions also accept a callback function to determine if Apple Pay is active and supported by the device.

<script>
const btn = document.getElementById('google-pay')
checkout.applepay(btn, function(active) {
    if ( !active ) {
        // you could display a message or hide the button
    }
})
</script>


It's a good idea to use the callback to update the UI if Apple Pay cannot be activated on the device.

Alternate Trigger

If you want to control the trigger in a different way, instead of passing a button element into the applepay() function, you can just pass in the activation callback and setup a separate trigger using the "open" command.

<script>
checkout.applepay(function(active) {
    if ( active )
        btn.addEventListener('click', function() {
            checkout.applepay('open')
        })
})
</script>


Styling and Displaying Buttons

It's important to follow the guidelines outlined by Apple on how to display their buttons. Below is a link to their guidelines:

Apple Pay branding guidelines

Displaying Apple Pay Buttons using CSS