@pay-com/js 1.1.16 → 1.2.1

package/lib/dts/types/index.d.ts

@@ -130,6 +130,12 @@ export interface UniversalToggles {
    */
   submitButton?: boolean
 
+  /**
+   * If false, the default suppoerted brands footer will not appear.
+   * @default true
+   */
+  withCardBrandsFooterLogos?: boolean
+
   /**
    * If true, displays the card bin as well as last 4.
    * @default false
@@ -146,6 +152,30 @@ export interface UniversalToggles {
    * A title to display above the Universal form.
    */
   title?: string
+
+  /**
+   * If true, only user's saved sources will displayed.
+   * @default false
+   */
+  allowOnlyExistingPaymentMethods?: boolean
+
+  /**
+   * If true, user will not be able the pay with saved source.
+   * @default false
+   */
+  newCardOnly?: boolean
+
+  /**
+   * If true, user will not be able to remove saved source.
+   * @default false
+   */
+  disablePaymentMethodDeletion?: boolean
+
+  /**
+   * If true, the submit button will be disabled while form invalid.
+   * @default false
+   */
+  disableSubmitUntilFormIsValid?: boolean
 }
 
 export type LanguageLocalizationOverride = {
@@ -201,6 +231,7 @@ export interface UniversalOpts {
   container: string
   cardForm?: Omit<RenderOpts, 'container' | 'style'>
   toggles?: UniversalToggles
+  selectedPaymentMethod?: string
   apmsOnClickValidation?: () => Promise<boolean>
   localizations?: {
     [language: string]: LanguageLocalizationOverride
@@ -238,8 +269,10 @@ export interface UniversalOpts {
         }
       }
     }
+    ctp?: CTPStyles
   }
   paymentMethods?: Array<string>
+  alternatives?: 'button' | 'radio'
 }
 
 export interface SubmitOpts {
@@ -335,7 +368,11 @@ export enum EVENT_TYPES {
   PAYMENT_PROCESSING = 'payment_processing',
   SETUP_PROCESSING = 'setup_processing',
   SESSION_EXPIRED = 'session_expired',
-  MAX_ATTEMPTS_REACHED = 'max_attempts_reached'
+  MAX_ATTEMPTS_REACHED = 'max_attempts_reached',
+  PAYMENT_PENDING_APPROVAL = 'payment_pending_approval',
+  SET_DISABLE_UI = 'set_disable_ui',
+  HEADLESS_READY = 'headless_ready',
+  FORM_VALIDATION_UPDATED = 'form_validation_update'
 }
 
 export type ListenerFn = (
@@ -415,6 +452,7 @@ export type UpdateTransactionDetailsOpts = {
   consumer?: {
     firstName?: string
     lastName?: string
+    name?: string
     email?: string
     phone?: string
   }
@@ -448,22 +486,161 @@ export type UpdateTransactionDetailsFn = (
   config: UpdateTransactionDetailsOpts
 ) => Promise<unknown>
 
+export type ResyncFn = () => Promise<void>
+
+export type AddressType = {
+  line1: string
+  line2?: string
+  city: string
+  state?: string
+  country: string
+  postalCode: string
+}
+
+export type HeadlessFn = (
+  method: string,
+  paymentMethodData?: unknown,
+  billingDetails?: AddressType
+) => Promise<unknown>
+
+export type CanMakePaymentsFn = () => Promise<unknown>
+
+export type InitHeadlessCtpParams = {
+  emailInputRef?: HTMLDivElement | string
+  email: string
+  containers: {
+    mainWidget: HTMLDivElement | string
+    linkNewCard: HTMLDivElement | string
+  }
+  style?: CTPStyles
+}
+
+export type CTPStyles = Partial<{
+  mainWidgetContainer: PayCssConfig
+  linkNewCardContainer: PayCssConfig
+}>
+
+export enum CTP_EVENTS {
+  VALIDATION_CHANGED = 'validation-changed',
+  AUTHENTICATED = 'authenticated'
+}
+
+export declare enum CtpCompletePaymentStatus {
+  success = 'SUCCESS',
+  declined = 'DECLINED'
+}
+
+export type CheckoutCTPBillingDetails = {
+  address: {
+    addressLine: string
+    addressLine2?: string
+    zip: string
+    city: string
+    state?: string
+    countryAlpha2: string
+  }
+  name: string
+  phone: string
+}
+
+export type HeadlessCtpObject = {
+  on: Listener<CTP_EVENTS>
+  once: Listener<CTP_EVENTS>
+  removeListener: Listener<CTP_EVENTS>
+  validate: () => Promise<{ valid: boolean }>
+  completePayment: (status: CtpCompletePaymentStatus) => Promise<void>
+  updateBillingDetails: (
+    params: Partial<CheckoutCTPBillingDetails>
+  ) => Promise<void>
+  STATUS_SUCCESS: CtpCompletePaymentStatus.success
+  STATUS_DECLINED: CtpCompletePaymentStatus.declined
+}
+
+export type CustomFieldType = 'input' | 'date' | 'checkbox' | 'radio' | 'select'
+
+export type CustomFieldsOptions = {
+  label: string
+  value: string
+}
+
+export type CustomField = {
+  id: string
+  placeholder?: string
+  label?: string
+  type?: CustomFieldType
+  inputType?: string
+  options?: CustomFieldsOptions[]
+  description?: string
+  validation?: CustomFieldsValidation
+}
+
+export type CustomFieldsValidation = {
+  required?: boolean
+  max?: number
+  min?: number
+  maxLength?: number
+  minLength?: number
+  pattern?: string
+}
+
+export type PaymentMethod = {
+  paymentMethodType: string
+  name: string
+  redirect?: boolean
+  fields?: CustomField[]
+}
+
+export type CardBrand =
+  | 'visa'
+  | 'mastercard'
+  | 'amex'
+  | 'discover'
+  | 'jcl'
+  | 'unionpay'
+
+export type ExistingCard = {
+  bin: string
+  brand: CardBrand
+  cardholderCurrency: string
+  country: string
+  issuerName: string
+  expMonth: string
+  expYear: string
+  last4: string
+  fingerprint: string
+  funding: 'prepaid' | 'debit' | 'credit' | 'charge'
+  network: CardBrand
+  payout: string
+}
+
+export type ExistingSource = {
+  id: string
+  type: string
+  card?: ExistingCard
+}
+
 export type CheckoutObject = {
   on: ListenerFn
   once: ListenerFn
   removeListener: ListenerFn
   EVENT_TYPES: typeof EVENT_TYPES
+  ELEMENT_TYPES: typeof ELEMENT_TYPES
   render: RenderFn
   paypal: PaypalFn
   universal: UniversalFn
+  blur: BlurFn
   update: UpdateFn
   updateTransactionDetails: UpdateTransactionDetailsFn
   submit: SubmitFn
-  blur: BlurFn
+  resync: ResyncFn
+  canMakePayments: CanMakePaymentsFn
   validate: ValidateFn
   reset: ResetFn
   pay: PayFn
-  // universalV2: UniversalFn
+  headless: HeadlessFn
+  ctp: (params: InitHeadlessCtpParams) => Promise<HeadlessCtpObject>
+  getPaymentMethods: () => Promise<PaymentMethod[]>
+  getExistingSources: () => Promise<ExistingSource[]>
 }
 
 export type CheckoutFunction = (opts: CheckoutOpts) => CheckoutObject

package/lib/index.d.ts

@@ -135,6 +135,12 @@ interface UniversalToggles {
    */
   submitButton?: boolean
 
+  /**
+   * If false, the default suppoerted brands footer will not appear.
+   * @default true
+   */
+  withCardBrandsFooterLogos?: boolean
+
   /**
    * If true, displays the card bin as well as last 4.
    * @default false
@@ -151,6 +157,30 @@ interface UniversalToggles {
    * A title to display above the Universal form.
    */
   title?: string
+
+  /**
+   * If true, only user's saved sources will displayed.
+   * @default false
+   */
+  allowOnlyExistingPaymentMethods?: boolean
+
+  /**
+   * If true, user will not be able the pay with saved source.
+   * @default false
+   */
+  newCardOnly?: boolean
+
+  /**
+   * If true, user will not be able to remove saved source.
+   * @default false
+   */
+  disablePaymentMethodDeletion?: boolean
+
+  /**
+   * If true, the submit button will be disabled while form invalid.
+   * @default false
+   */
+  disableSubmitUntilFormIsValid?: boolean
 }
 
 type LanguageLocalizationOverride = {
@@ -206,6 +236,7 @@ interface UniversalOpts {
   container: string
   cardForm?: Omit<RenderOpts, 'container' | 'style'>
   toggles?: UniversalToggles
+  selectedPaymentMethod?: string
   apmsOnClickValidation?: () => Promise<boolean>
   localizations?: {
     [language: string]: LanguageLocalizationOverride
@@ -243,8 +274,10 @@ interface UniversalOpts {
         }
       }
     }
+    ctp?: CTPStyles
   }
   paymentMethods?: Array<string>
+  alternatives?: 'button' | 'radio'
 }
 
 interface SubmitOpts {
@@ -334,7 +367,11 @@ enum EVENT_TYPES {
   PAYMENT_PROCESSING = 'payment_processing',
   SETUP_PROCESSING = 'setup_processing',
   SESSION_EXPIRED = 'session_expired',
-  MAX_ATTEMPTS_REACHED = 'max_attempts_reached'
+  MAX_ATTEMPTS_REACHED = 'max_attempts_reached',
+  PAYMENT_PENDING_APPROVAL = 'payment_pending_approval',
+  SET_DISABLE_UI = 'set_disable_ui',
+  HEADLESS_READY = 'headless_ready',
+  FORM_VALIDATION_UPDATED = 'form_validation_update'
 }
 
 type ListenerFn = (
@@ -414,6 +451,7 @@ type UpdateTransactionDetailsOpts = {
   consumer?: {
     firstName?: string
     lastName?: string
+    name?: string
     email?: string
     phone?: string
   }
@@ -447,22 +485,161 @@ type UpdateTransactionDetailsFn = (
   config: UpdateTransactionDetailsOpts
 ) => Promise<unknown>
 
+type ResyncFn = () => Promise<void>
+
+type AddressType = {
+  line1: string
+  line2?: string
+  city: string
+  state?: string
+  country: string
+  postalCode: string
+}
+
+type HeadlessFn = (
+  method: string,
+  paymentMethodData?: unknown,
+  billingDetails?: AddressType
+) => Promise<unknown>
+
+type CanMakePaymentsFn = () => Promise<unknown>
+
+type InitHeadlessCtpParams = {
+  emailInputRef?: HTMLDivElement | string
+  email: string
+  containers: {
+    mainWidget: HTMLDivElement | string
+    linkNewCard: HTMLDivElement | string
+  }
+  style?: CTPStyles
+}
+
+type CTPStyles = Partial<{
+  mainWidgetContainer: PayCssConfig
+  linkNewCardContainer: PayCssConfig
+}>
+
+enum CTP_EVENTS {
+  VALIDATION_CHANGED = 'validation-changed',
+  AUTHENTICATED = 'authenticated'
+}
+
+declare enum CtpCompletePaymentStatus {
+  success = 'SUCCESS',
+  declined = 'DECLINED'
+}
+
+type CheckoutCTPBillingDetails = {
+  address: {
+    addressLine: string
+    addressLine2?: string
+    zip: string
+    city: string
+    state?: string
+    countryAlpha2: string
+  }
+  name: string
+  phone: string
+}
+
+type HeadlessCtpObject = {
+  on: Listener<CTP_EVENTS>
+  once: Listener<CTP_EVENTS>
+  removeListener: Listener<CTP_EVENTS>
+  validate: () => Promise<{ valid: boolean }>
+  completePayment: (status: CtpCompletePaymentStatus) => Promise<void>
+  updateBillingDetails: (
+    params: Partial<CheckoutCTPBillingDetails>
+  ) => Promise<void>
+  STATUS_SUCCESS: CtpCompletePaymentStatus.success
+  STATUS_DECLINED: CtpCompletePaymentStatus.declined
+}
+
+type CustomFieldType = 'input' | 'date' | 'checkbox' | 'radio' | 'select'
+
+type CustomFieldsOptions = {
+  label: string
+  value: string
+}
+
+type CustomField = {
+  id: string
+  placeholder?: string
+  label?: string
+  type?: CustomFieldType
+  inputType?: string
+  options?: CustomFieldsOptions[]
+  description?: string
+  validation?: CustomFieldsValidation
+}
+
+type CustomFieldsValidation = {
+  required?: boolean
+  max?: number
+  min?: number
+  maxLength?: number
+  minLength?: number
+  pattern?: string
+}
+
+type PaymentMethod = {
+  paymentMethodType: string
+  name: string
+  redirect?: boolean
+  fields?: CustomField[]
+}
+
+type CardBrand =
+  | 'visa'
+  | 'mastercard'
+  | 'amex'
+  | 'discover'
+  | 'jcl'
+  | 'unionpay'
+
+type ExistingCard = {
+  bin: string
+  brand: CardBrand
+  cardholderCurrency: string
+  country: string
+  issuerName: string
+  expMonth: string
+  expYear: string
+  last4: string
+  fingerprint: string
+  funding: 'prepaid' | 'debit' | 'credit' | 'charge'
+  network: CardBrand
+  payout: string
+}
+
+type ExistingSource = {
+  id: string
+  type: string
+  card?: ExistingCard
+}
+
 type CheckoutObject = {
   on: ListenerFn
   once: ListenerFn
   removeListener: ListenerFn
   EVENT_TYPES: typeof EVENT_TYPES
+  ELEMENT_TYPES: typeof ELEMENT_TYPES
   render: RenderFn
   paypal: PaypalFn
   universal: UniversalFn
+  blur: BlurFn
   update: UpdateFn
   updateTransactionDetails: UpdateTransactionDetailsFn
   submit: SubmitFn
-  blur: BlurFn
+  resync: ResyncFn
+  canMakePayments: CanMakePaymentsFn
   validate: ValidateFn
   reset: ResetFn
   pay: PayFn
-  // universalV2: UniversalFn
+  headless: HeadlessFn
+  ctp: (params: InitHeadlessCtpParams) => Promise<HeadlessCtpObject>
+  getPaymentMethods: () => Promise<PaymentMethod[]>
+  getExistingSources: () => Promise<ExistingSource[]>
 }
 
 type CheckoutFunction = (opts: CheckoutOpts) => CheckoutObject

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pay-com/js",
-  "version": "1.1.16",
+  "version": "1.2.1",
   "description": "Pay.com JS loading utility",
   "keywords": [
     "Pay.com",
@@ -18,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/pay-com/js.git"
+    "url": "git+https://github.com/pay-com/js.git"
   },
   "files": [
     "lib/*.js",