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

curl -X POST "https://api.payload.co/access_tokens" \
  -u secret_key_3bW9JMZtPVDOfFNzwRdfE: \
  -H 'Content-Type: application/json'
  -d '{
    "intent": {
      "payment_form": {
        "payemnt": {
          "amount": 100,
          "description": "Test Payment"
        }
      }
    }
  }'

import payload
pl = payload.Session('secret_key_3bW9JMZtPVDOfFNzwRdfE')

@app.route('/form-token', method='post')
def checkout_redirect():

  client_token = pl.ClientToken.create(
    intent=dict(
      payment_form=dict(
        payment=dict(
          amount=100,
          description='Test Payment'
        )
      )
    )
  )

  return jsonify({'client_token': client_token['id']})

require 'payload'
pl = Payload::Session.new('secret_key_3bW9JMZtPVDOfFNzwRdfE')

get '/form-token/' do

  client_token = Payload::ClientToken.create(
    intent: {
      payment_form: {
        payment: {
          amount: 100,
          description: 'Test Payment'
        }
      }
    }
  )

  json({ client_token: client_token['id'] })
end

<?php

$pl_transaction_id = $_GET['pl_transaction_id'];


$clientToken = Payload\ClientToken::create([
  "intent"=>[
    "payment_form"=>[
      "payment": [
        "amount"=>100,
        "description"=>"Test Payment"
      ]
    ]
  ]
]);

header('Content-Type: application/json; charset=utf-8');
echo json_encode(["client_token": $clientToken->id]);
?>

import payload from 'payload-api'
const pl = payload.Session('secret_key_3bW9JMZtPVDOfFNzwRdfE');

app.get('/form-token', (req, res) => {
  const clientToken = pl.ClientToken.create({
    intent: {
      payment_form: {
        payment: {
          amount: 100,
          description: 'Test Payment'
        }
      }
    }
  });

  res.json({ client_token: clientToken.id });
})

using Payload;

[Route("form-token")]
public IHttpActionResult CheckoutRedirect() {
  var pl = new Payload.Session("secret_key_3bW9JMZtPVDOfFNzwRdfE");

  var client_token = await new pl.ClientToken.create(new {
    intent=new {
      payment_form=new {
        payment=new {
          new {
            amount=100,
            description="Test Payment"
          }
        }
      }
    }
  });

  return Json(new { client_token = client_token.id });
}

Step 1) Create an Intent

To use Apple Pay in a form you need to generate payment_form or payment_method_form intent. To create an intent, create a ClientToken with a nested payment_form or payment_method_form intent object. For more information, see the Authentication section for a full list of available parameters.

Once the client token is generated, return the id value to the client and pass that to the Payload function. Now you can initialize the form as shown in Step 2.

Step 2) Create a Checkout Form

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

<script>
Payload('generated_client_token')

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

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 3) 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 4) 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