Afterpay/Clearpay

Take an Afterpay/Clearpay payment

Usage

index.html
HTML

<!-- Renders the Afterpay/Clearpay button -->

<form>

<button id="afterpay-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',

      },

      requestShippingContact: true,

    });



    paymentRequest.addEventListener('afterpay_shippingaddresschanged', function (contact) {

      return {

        shippingOptions: [

          {

            id: 'FREE',

            amount: '0.00',

            label: 'Free',

            taxLineItems: [

              {

                id: 'taxItem1',

                label: 'Taxes',

                amount: '3.50',

              }

            ],

            total: {

              amount: '9.29',

              label: 'Total'

            }

          }

        ],

      }

    });



    const afterpayClearpay = await payments.afterpayClearpay(paymentRequest);



    async function eventHandler(event) {

      event.preventDefault();



      try {

        const result = await afterpayClearpay.tokenize();

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

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

        }

      } catch (e) {

        console.error(e);

      }

    };



  const afterpayClearpayButtonTarget = document.getElementById('afterpay-button');

  afterpayClearpayButtonTarget.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

payments.js
JS
JavaScript

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

AfterpayClearpay

Create an Afterpay/Clearpay payment method instance.

Methods

afterpayClearpay.js
JS
JavaScript

const paymentRequest = payments.paymentRequest({

  countryCode: 'US',

  currencyCode: 'USD',

  total: {

    amount: '5.79',

    label: 'Total'

  },

  requestShippingContact: true,

});



paymentRequest.addEventListener('afterpay_shippingaddresschanged', function (contact) {

  return {

    shippingOptions: [

      {

        id: 'FREE',

        amount: '0.00',

        label: 'Free',

        taxLineItems: [

          {

            id: 'taxItem1',

            label: 'Taxes',

            amount: '3.50',

          }

        ],

        total: {

          amount: '9.29',

          label: 'Total'

        }

      }

    ],

  }

});



const afterpayClearpay = await payments.afterpayCleapay(paymentRequest);

await afterpayClearpay.attach('#afterpay');





afterpayClearpayButton.onclick = async () => {

  const tokenResult = await afterpayClearpay.tokenize();



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

}