Props

<Afterpay /> or <AfterpayButton />

buttonColor

Color of the button that initiates the Afterpay/Clearpay flow.

Possible values are: black or mint.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <Afterpay buttonColor="black" />
    </PaymentForm>
  );
}

Example

buttonType

The flavor of button to use for your Afterpay/Clearpay flow. This will modify the text.

Possible values are: checkout_with_afterpay, buy_now_with_afterpay or place_order_with_afterpay.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <Afterpay buttonType="buy_now_with_afterpay" />
    </PaymentForm>
  );
}

Example

finalCtaButtonType

The text for the completion button within the Afterpay/Clearpay CTA.

Possible values are: review_my_order or buy_now.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <Afterpay finalCtaButtonType="buy_now" />
    </PaymentForm>
  );
}

Button

Option to use a custom button, as opposed to the provided Afterpay/Clearpay buttons. If true this will ignore all the above options.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <Afterpay Button={() => <MyCustomButton />} />
    </PaymentForm>
  );
}

<AfterpayMessage />

badgeTheme

See Afterpay/Clearpay's Badge Themes documentation.

Possible values are: black-on-mint, black-on-white, mint-on-black or white-on-black.

import { AfterpayMessage, AfterpayProvider, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <AfterpayProvider>
        <AfterpayMessage badgeTheme="black-on-mint" />
      </AfterpayProvider>
    </PaymentForm>
  );
}

Example

modalLinkStyle

The style of the button used to display the information modal. See Afterpay/Clearpay's Customize Text documentation.

Possible values are: circled-info-icon, circled-question-icon, learn-more-text, more-info-text or none.

import { AfterpayMessage, AfterpayProvider, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <AfterpayProvider>
        <AfterpayMessage modalLinkStyle="circled-info-icon" />
      </AfterpayProvider>
    </PaymentForm>
  );
}

Example

modalTheme

Theme for the information modal. See Afterpay/Clearpay's Modal Themes documentation.

Possible values are: mint or white.

import { AfterpayMessage, AfterpayProvider, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <AfterpayProvider>
        <AfterpayMessage modalTheme="mint" />
      </AfterpayProvider>
    </PaymentForm>
  );
}

Example

tip

Click on the button to see the modal.

size

The size of the text.

Possible values are: xs, sm, md or lg.

import { AfterpayMessage, AfterpayProvider, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <AfterpayProvider>
        <AfterpayMessage size="xs" />
      </AfterpayProvider>
    </PaymentForm>
  );
}

<AfterpayProvider />

onShippingAddressChange()

Occurs when a buyer chooses a shipping address in Afterpay/Clearpay.

It is required for you to subscribe to this event if shipping if marked a required.

import { AfterpayButton, AfterpayProvider, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <AfterpayProvider
        onShippingAddressChange={(contact) => {
          return {
            shippingOptions: [
              {
                id: 'shippingOption1',
                label: 'Free Shipping',
                amount: '0.00',
                total: '27.50', // Line Items + Discounts + Taxes + Shipping
                taxLineItems: [
                  {
                    id: 'taxItem1',
                    label: 'Taxes',
                    amount: '2.50',
                  },
                ],
              },
              {
                id: 'shippingOption2',
                label: 'Express Shipping',
                amount: '10.00',
                total: '38.50', // Line Items + Discounts + Taxes + Shipping
                taxLineItems: [
                  {
                    id: 'taxItem1',
                    label: 'Taxes',
                    amount: '3.50',
                  },
                ],
              },
            ],
          };
        }}
      >
        <AfterpayButton />
      </AfterpayProvider>
    </PaymentForm>
  );
}

onShippingOptionChange()

Occurs when a buyer chooses a shipping option in Afterpay/Clearpay.

Subscribe to this event if you want to be alerted of shipping options changes. This event if informational only, and does not update the payment request.

import { AfterpayButton, AfterpayProvider, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <AfterpayProvider
        onShippingOptionChange={(option) => {
          console.info('Shipping option changed to', option);
        }}
      >
        <AfterpayButton />
      </AfterpayProvider>
    </PaymentForm>
  );
}

<AfterpayWidget />

includeBranding

Include the afterpay logo in the widget. Default false.

import { AfterpayProvider, AfterpayWidget, PaymentForm } from 'react-square-web-payments-sdk';

export default function MyApp() {
  return (
    <PaymentForm>
      <AfterpayProvider>
        <AfterpayWidget />
      </AfterpayProvider>
    </PaymentForm>
  );
}

Eample