NAV Navbar
Logo
Web

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 and activate Apple Pay for your Payload account. For a live preview, see the demo below:

View a Demo

Supported Payment Methods

* Payload currently only operates in the US and Canada

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 a 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

Account Activation

To activate your account for Apple Pay, your domain must be validated. To activate Apple Pay for your domain, reach out to help@payload.co.