styles?: React.CSSProperties

options?: StripeExpressCheckoutElementOptions

{
  emailRequired: true,
  phoneNumberRequired: true,
  shippingAddressRequired: true,
  paymentMethods: {
    applePay: 'always',
    googlePay: 'always',
    paypal: 'auto',
    link: 'auto',
    amazonPay: 'auto',
    klarna: 'auto',
  }
}

onClick?: (event: StripeExpressCheckoutElementClickEvent) => void

onConfirm?: (event: StripeExpressCheckoutElementConfirmEvent) => void

onOrderSubmit?: OnOrderSubmitCallback

onOrderCreated?: OnOrderCreatedCallback

onOrderSuccess?: OnOrderSuccessCallback

onOrderConfirmed?: OnOrderConfirmedCallback

import { ExpressButtons, CheckoutProvider, ClickarooProvider } from '@clickaroo/checkout-ui';
 
function CustomCheckout() {
  const cart = [
    {
      sku: "TEST001",
      offerPricePoint: "OPP-TEST001",
    }
  ];
 
  return (
    <ClickarooProvider>
      <CheckoutProvider
        baseUrl="https://api.clickaroo.io"
        cart={cart}
      >
        <ExpressButtons
          options={{
            layout: {
              maxColumns: 1,
              overflow: "never"
            },
          }}
          onClick={(event) => {
            console.log('Express button clicked', event.expressPaymentType);
            event.resolve?.();
          }}
          onConfirm={(event) => {
            console.log('Express payment confirmed', event);
          }}
        />
      </CheckoutProvider>
    </ClickarooProvider>
  );
}

export type ApplePayOption = {
  recurringPaymentRequest: {
    /**
    * The description of the payment that the customer will see in their Apple Pay wallet.
    */
    paymentDescription: string;
 
    /**
    * The URL to manage items related to the recurring payment on your website.
    */
    managementURL: string;
    regularBilling: ApplePayRegularBilling;
    trialBilling?: ApplePayRegularBilling;
 
    /**
    * The billing agreement label that is displayed to the customer in the Apple Pay payment interface.
    */
    billingAgreement?: string;
  };
  deferredPaymentRequest?: null;
  automaticReloadPaymentRequest?: null;
}

export type ButtonThemeOption = {
  applePay?: 'black' | 'white' | 'white-outline';
  googlePay?: 'black' | 'white';
  paypal?: 'gold' | 'blue' | 'silver' | 'white' | 'black';
};

export type ButtonTypeOption = {
  applePay?: 'add-money' | 'book' | 'buy' | 'check-out' | 'contribute' | 'donate' | 'order' | 'plain' | 'reload' | 'rent' | 'subscribe' | 'support' | 'tip' | 'top-up';
  googlePay?: 'book' | 'buy' | 'checkout' | 'donate' | 'order' | 'pay' | 'plain' | 'subscribe';
  paypal?: 'paypal' | 'buynow' | 'checkout' | 'pay';
};

export type LayoutOption = {
  maxColumns?: number;
  maxRows?: number;
  overflow?: 'auto' | 'never';
};

export type LineItem = {
  name: string;
  amount: number;
  quantity?: number;
  image?: string;
};

export type ShippingRate = {
  id: string;
  amount: number;
  displayName: string;
};

export type ExpressCheckoutPaymentMethodsOption = {
  applePay?: 'always' | 'auto' | 'never';
  googlePay?: 'always' | 'auto' | 'never';
  paypal?: 'always' | 'auto' | 'never';
  link?: 'always' | 'auto' | 'never';
  amazonPay?: 'always' | 'auto' | 'never';
  klarna?: 'always' | 'auto' | 'never';
};