Basic usage

Take an Afterpay/Clearpay payment

import { Afterpay, AfterpayButton, AfterpayMessage, AfterpayWidget, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm
      createPaymentRequest={() => ({
        // ...
        // pickupContact information is required for Afterpay
        pickupContact: {
          addressLines: ['123 Main St'],
          city: 'San Francisco',
          countryCode: 'US',
          email: 'john@doe.com',
          familyName: 'Doe',
          givenName: 'John',
          phone: '4155555555',
          postalCode: '94107',
          state: 'CA',
        },
        // ...
      })}
    >
      <AfterpayProvider>
        <AfterpayButton />
        <AfterpayMessage />
        <AfterpayWidget />
      </AfterpayProvider>

      {/* or simply */}

      <Afterpay />
    </PaymentForm>
  );
}

Test

We will never store your afterpay data. But please use dummy data for testing.

info

After you hit the Buy now with afterpay button you can see the output on the console.

This is how will looks like with the three elements: