Props

callbacks

Adds an event listener to the CashAppPay instance. Currently only onTokenization() is supported.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <CashAppPay
        callbacks={{
          onTokenization: (event) => console.info(event),
        }}
      />
    </PaymentForm>
  );
}

redirectURL

It is the URL that the user will be redirected to after the payment is completed. Is only for mobile payments and is not used for desktop QR payments.

By default is window.location.href.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <CashAppPay redirectURL="https://example.com/thank-you" />
    </PaymentForm>
  );
}

referenceId

Payment identifier value for internal developer use. For example, you use a referenceId value to associate the payment with an internal resource.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <CashAppPay referenceId="123456" />
    </PaymentForm>
  );
}

shape

Sets the shape of the payment button.

Available values: round or semiround.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <CashAppPay shape="round" />
    </PaymentForm>
  );
}

size

Sets the size of the payment button.

Available values: medium or small.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <CashAppPay size="medium" />
    </PaymentForm>
  );
}

values

Sets the theme of the payment button.

Available values: dark or light.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <CashAppPay values="dark" />
    </PaymentForm>
  );
}

width

Sets the width of the payment button.

Available values: full or static.

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

export default function MyApp() {
  return (
    <PaymentForm>
      <CashAppPay width="static" />
    </PaymentForm>
  );
}