Apple Pay

Take an Apple Pay payment

Usage

index.html
HTML

<!-- Renders the Apple Pay button -->

<form>

  <button id="apple-pay-button"></button>

</form>

<!-- Configure the WebSDK -->

<script type="text/javascript">

  async function main() {

    const payments = Square.payments(APPLICATION_ID, LOCATION_ID);



    const paymentRequest = payments.paymentRequest({

      countryCode: 'US',

      currencyCode: 'USD',

      total: {

        amount: '1.00',

        label: 'Total',

      },

    });



    const applePay = await payments.applePay(paymentRequest);



    async function eventHandler(event) {

      event.preventDefault();



      try {

        const result = await applePay.tokenize();

        if (result.status === 'OK') {

          console.log(`Payment token is ${result.token}`);

        }

      } catch (e) {

        console.error(e);

      }

    };



    const applePayButtonTarget = document.getElementById('apple-pay-button');

    applePayButtonTarget.addEventListener('click', eventHandler);

  }



  main();

</script>

Payments

Returned by Square.payments(appId, locationId).

Use this object to instantiate Payment methods. Learn more on the Payments page.

Methods

JS
JavaScript

const payments = Square.payments(appId, locationId);

ApplePay

The ApplePay Payment Method.

Requests a payment nonce for a payment card stored in an Apple Pay digital wallet.

Methods

JS
JavaScript

// Create a request to pay 1.00 USD

const paymentRequest = payments.paymentRequest({

  total: {

    amount: 100,

    currencyCode: 'USD'

  }

});



// Get a new Apple Pay method

const applePay = await payments.applePay(paymentRequest);



const applePayButtonTarget = document.getElementById('applePay');

applePayButtonTarget.onclick = async () => {

  //Start the Apple Pay flow and await the secure token result

  const tokenResult = await applePay.tokenize();



  // Pass the TokenResult to your server to complete the payment

}