Configuration

const pazeButton = pxpSdk.create('paze-button', {
  buttonRenderMode: 'static',
  emailAddress: 'customer@example.com'
});

const pazeButton = pxpSdk.create('paze-button', {
  buttonRenderMode: 'dynamic',
  emailAddress: 'customer@example.com',
  phoneNumber: '15551234567',
  paymentDescription: 'Order #12345',
  billingPreference: 'ALL',
  acceptedPaymentCardNetworks: ['VISA', 'MASTERCARD'],
  cobrand: [{ cobrandName: 'Rewards Plus', benefitsOffered: true }],
  performAVS: true,
  style: {
    color: 'pazeblue',
    shape: 'pill',
    label: 'check out with'
  },
  onInit: () => console.log('Paze initialised'),
  onPresentmentResolved: (isVisible) => console.log('Button visible:', isVisible),
  onCheckoutComplete: async (result) => true,
  onPreDecryption: async () => true,
  onPostDecryption: async (payload) => console.log(payload.fundingData.cardNetwork),
  onPostAuthorisation: async (data) => console.log(data.systemTransactionId)
});

const pazeButton = pxpSdk.create('paze-button', {
  enhancedTransactionData: {
    ecomData: {
      cartContainsGiftCard: false,
      orderForPickup: false,
      orderQuantity: '2',
      orderHighestCost: '49.99',
      finalShippingAddress: {
        line1: '123 Main St',
        city: 'New York',
        state: 'NY',
        zip: '10001',
        countryCode: 'US'
      }
    },
    processingNetwork: ['VISA', 'MASTERCARD']
  }
});

const config = {
  style: {
    color: 'pazeblue',
    shape: 'pill',
    label: 'check out with',
    disableMaxHeight: false
  }
};

const config = {
  onInit: () => { },
  onPresentmentResolved: (isVisible) => { },
  onPazeButtonClicked: (event) => { },
  onCheckoutComplete: async (result) => true,
  onCheckoutIncomplete: async (result) => { },
  onComplete: async (result) => { },
  onPreDecryption: async () => true,
  onPostDecryption: async (decryptedPayload) => { },
  onPreAuthorisation: async () => null,
  onPostAuthorisation: async (data) => { },
  onSubmitError: async (submitError) => { },
  onError: (error) => { }
};

const config = {
  onCheckoutComplete: async (result) => {
    // Approve checkout to proceed
    return true;
  },

  onPreDecryption: async () => {
    // Allow SDK to decrypt (this is the default if omitted)
    return true;
  },

  onPostDecryption: async (decryptedPayload) => {
    console.log('Card network:', decryptedPayload.fundingData.cardNetwork);
  },

  onPostAuthorisation: async (data) => {
    console.log('Transaction ID:', data.systemTransactionId);
    await verifyPaymentOnBackend(data.systemTransactionId);
  }
};

const config = {
  onCheckoutComplete: async (result) => true,

  onPreDecryption: async () => false,

  onComplete: async (result) => {
    const securedPayload = result.completeDecodedResponse?.securedPayload;

    // POST to your backend, which calls the PXP decrypt-token API
    await fetch('/api/paze/decrypt', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ securedPayload })
    });
  }
};

const pazeButton = pxpSdk.create('paze-button', {
  billingPreference: 'ALL',
  performAVS: true
});

const pxpSdk = PxpCheckout.initialize({
  environment: 'test',
  session: sessionData,
  kountDisabled: false, // Set to true to disable Kount
  // ...
});

const pazeButton = pxpSdk.create('paze-button', {
  onPreAuthorisation: async () => ({
    riskScreeningData: {
      performRiskScreening: true,
      userIp: '192.168.1.100',
      account: {
        id: 'shopper-123',
        creationDateTime: '2024-01-15T10:30:00.000Z'
      }
    }
  })
});

const pazeButton = pxpSdk.create('paze-button', config);
pazeButton.mount('paze-container');

pazeButton.unmount();

const pazeButton = pxpSdk.create('paze-button', {
  buttonRenderMode: 'static',
  emailAddress: 'customer@example.com',

  onCheckoutComplete: async () => true,

  onPostAuthorisation: async (data) => {
    await verifyPaymentOnBackend(data.systemTransactionId);
    window.location.href = '/order-confirmation';
  },

  onError: (error) => {
    console.error('Paze error:', error.ErrorCode, error.message);
    showError('Payment error. Please try again.');
  }
});

pazeButton.mount('paze-container');

const pazeButton = pxpSdk.create('paze-button', {
  buttonRenderMode: 'dynamic',
  emailAddress: customerEmail,
  phoneNumber: '15551234567',

  onPresentmentResolved: (isVisible) => {
    if (!isVisible) {
      showAlternativePaymentMethods();
    }
  },

  onCheckoutComplete: async () => true,
  onPostAuthorisation: async (data) => {
    await verifyPaymentOnBackend(data.systemTransactionId);
  }
});

const pazeButton = pxpSdk.create('paze-button', {
  buttonRenderMode: 'dynamic',
  emailAddress: 'customer@example.com',
  phoneNumber: '15551234567',
  billingPreference: 'ALL',
  acceptedPaymentCardNetworks: ['VISA', 'MASTERCARD'],
  performAVS: true,
  style: { color: 'pazeblue', shape: 'pill', label: 'check out with' },

  onCheckoutComplete: async (result) => {
    // Server-side order validation before proceeding
    return await validateOrderOnBackend(result);
  },

  onPreAuthorisation: async () => ({
    riskScreeningData: {
      performRiskScreening: true,
      userIp: '192.168.1.100',
      account: { id: 'shopper-123', creationDateTime: '2024-01-15T10:30:00.000Z' }
    }
  }),

  onPostAuthorisation: async (data) => {
    if (data.state === 'Authorised') {
      await verifyPaymentOnBackend(data.systemTransactionId);
      window.location.href = `/success?id=${data.merchantTransactionId}`;
    }
  },

  onSubmitError: async (submitError) => {
    console.error('Submit error:', submitError);
    showError('Payment failed. Please try again.');
  }
});

interface PazeButtonComponentConfig extends BaseComponentConfig {
  buttonRenderMode?: 'static' | 'dynamic';
  emailAddress?: string;
  phoneNumber?: string;
  paymentDescription?: string;
  billingPreference?: 'ALL' | 'ZIP_COUNTRY' | 'NONE';
  confirmLaunch?: boolean;
  sessionId?: string;
  acceptedShippingCountries?: string[];
  acceptedPaymentCardNetworks?: Array<'VISA' | 'MASTERCARD' | 'DISCOVER'>;
  cobrand?: PazeCobrandConfig[];
  enhancedTransactionData?: PazeEnhancedTransactionDataConfig;
  style?: PazeButtonStyleConfig;
  performAVS?: boolean;
  onInit?: () => void;
  onPresentmentResolved?: (isVisible: boolean) => void;
  onPazeButtonClicked?: (event: Event) => void | Promise<void>;
  onCheckoutComplete?: (result: PazeCheckoutResult) => boolean | Promise<boolean>;
  onCheckoutIncomplete?: (result: PazeCheckoutResult) => void | Promise<void>;
  onComplete?: (result: PazeCompleteResult) => void | Promise<void>;
  onCustomValidation?: () => Promise<boolean>;
  onPreDecryption?: () => boolean | Promise<boolean>;
  onPostDecryption?: (decryptedPayload: PazeDecryptTokenResponse) => void | Promise<void>;
  onPreAuthorisation?: () => boolean | PazeTransactionInitData | null | Promise<boolean | PazeTransactionInitData | null>;
  onPostAuthorisation?: (data: PazePostAuthorisationData) => void | Promise<void>;
  onSubmitError?: (submitError: BaseSubmitResult) => void | Promise<void>;
  onError?: (error: BaseSdkException) => void;
}

interface PazeButtonStyleConfig {
  color?: 'white' | 'whitewithoutline' | 'midnightblack' | 'pazeblue';
  shape?: 'default' | 'rectangle' | 'pill';
  label?: 'checkout' | 'check out with' | 'Donate with';
  disableMaxHeight?: boolean;
}

interface PazeCobrandConfig {
  cobrandName: string;
  benefitsOffered?: boolean;
}