@pay-com/js 1.2.1 → 1.2.3

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

@@ -107,9 +107,29 @@ export interface CheckoutToggles {
   withCvvTooltip?: boolean
 }
 
+/**
+ * [Styling options](https://developer.paypal.com/docs/business/checkout/reference/style-guide/#customize-the-payment-buttons) for customizing the button appearance.
+ */
+type PaypalButtonStyle = {
+  color?: 'gold' | 'blue' | 'silver' | 'white' | 'black'
+  height?: number
+  label?:
+    | 'paypal'
+    | 'checkout'
+    | 'buynow'
+    | 'pay'
+    | 'installment'
+    | 'subscribe'
+    | 'donate'
+  layout?: 'vertical' | 'horizontal'
+  shape?: 'rect' | 'pill'
+  tagline?: boolean
+}
+
 export interface PaypalOpts {
   container: string
-  onClickValidation: () => Promise<boolean>
+  onClickValidation?: () => Promise<boolean>
+  style?: PaypalButtonStyle
 }
 
 export interface RenderOpts {
@@ -227,6 +247,28 @@ export interface ApmStyle {
   input?: PayCssConfig
 }
 
+type JssObject = {
+  [K in keyof PayCssConfig]?: PayCssConfig[K]
+} & {
+  [selector: `& ${string}`]: JssObject | string | number | undefined
+}
+
+type CheckboxStyleOverrides = {
+  ':selected'?: CSS.Properties
+} & CSS.Properties
+
+export type DynamicFieldStyles = {
+  label?: CSS.Properties
+  input?: CSS.Properties
+  date?: CSS.Properties
+  select?: JssObject
+  radio?: {
+    color?: CSS.Properties['color']
+    label?: CSS.Properties
+  }
+  checkbox?: CheckboxStyleOverrides
+}
+
 export interface UniversalOpts {
   container: string
   cardForm?: Omit<RenderOpts, 'container' | 'style'>
@@ -270,6 +312,7 @@ export interface UniversalOpts {
       }
     }
     ctp?: CTPStyles
+    paymentMethodFields?: DynamicFieldStyles
   }
   paymentMethods?: Array<string>
   alternatives?: 'button' | 'radio'
@@ -497,10 +540,16 @@ export type AddressType = {
   postalCode: string
 }
 
+export type HeadlessPaymentOptions = {
+  saveSourceForFutureUse?: boolean
+  onValidateSession?: () => Promise<boolean>
+}
+
 export type HeadlessFn = (
   method: string,
   paymentMethodData?: unknown,
-  billingDetails?: AddressType
+  billingDetails?: AddressType,
+  options?: HeadlessPaymentOptions
 ) => Promise<unknown>
 
 export type CanMakePaymentsFn = () => Promise<unknown>
@@ -583,13 +632,6 @@ export type CustomFieldsValidation = {
   pattern?: string
 }
 
-export type PaymentMethod = {
-  paymentMethodType: string
-  name: string
-  redirect?: boolean
-  fields?: CustomField[]
-}
-
 export type CardBrand =
   | 'visa'
   | 'mastercard'
@@ -598,6 +640,14 @@ export type CardBrand =
   | 'jcl'
   | 'unionpay'
 
+export type PaymentMethod = {
+  paymentMethodType: string
+  name: string
+  redirect?: boolean
+  fields?: CustomField[]
+  supportedCardBrands?: CardBrand[]
+}
+
 export type ExistingCard = {
   bin: string
   brand: CardBrand

package/lib/index.d.ts

@@ -112,9 +112,29 @@ interface CheckoutToggles {
   withCvvTooltip?: boolean
 }
 
+/**
+ * [Styling options](https://developer.paypal.com/docs/business/checkout/reference/style-guide/#customize-the-payment-buttons) for customizing the button appearance.
+ */
+type PaypalButtonStyle = {
+  color?: 'gold' | 'blue' | 'silver' | 'white' | 'black'
+  height?: number
+  label?:
+    | 'paypal'
+    | 'checkout'
+    | 'buynow'
+    | 'pay'
+    | 'installment'
+    | 'subscribe'
+    | 'donate'
+  layout?: 'vertical' | 'horizontal'
+  shape?: 'rect' | 'pill'
+  tagline?: boolean
+}
+
 interface PaypalOpts {
   container: string
-  onClickValidation: () => Promise<boolean>
+  onClickValidation?: () => Promise<boolean>
+  style?: PaypalButtonStyle
 }
 
 interface RenderOpts {
@@ -232,6 +252,28 @@ interface ApmStyle {
   input?: PayCssConfig
 }
 
+type JssObject = {
+  [K in keyof PayCssConfig]?: PayCssConfig[K]
+} & {
+  [selector: `& ${string}`]: JssObject | string | number | undefined
+}
+
+type CheckboxStyleOverrides = {
+  ':selected'?: CSS.Properties
+} & CSS.Properties
+
+type DynamicFieldStyles = {
+  label?: CSS.Properties
+  input?: CSS.Properties
+  date?: CSS.Properties
+  select?: JssObject
+  radio?: {
+    color?: CSS.Properties['color']
+    label?: CSS.Properties
+  }
+  checkbox?: CheckboxStyleOverrides
+}
+
 interface UniversalOpts {
   container: string
   cardForm?: Omit<RenderOpts, 'container' | 'style'>
@@ -275,6 +317,7 @@ interface UniversalOpts {
       }
     }
     ctp?: CTPStyles
+    paymentMethodFields?: DynamicFieldStyles
   }
   paymentMethods?: Array<string>
   alternatives?: 'button' | 'radio'
@@ -496,10 +539,16 @@ type AddressType = {
   postalCode: string
 }
 
+type HeadlessPaymentOptions = {
+  saveSourceForFutureUse?: boolean
+  onValidateSession?: () => Promise<boolean>
+}
+
 type HeadlessFn = (
   method: string,
   paymentMethodData?: unknown,
-  billingDetails?: AddressType
+  billingDetails?: AddressType,
+  options?: HeadlessPaymentOptions
 ) => Promise<unknown>
 
 type CanMakePaymentsFn = () => Promise<unknown>
@@ -582,13 +631,6 @@ type CustomFieldsValidation = {
   pattern?: string
 }
 
-type PaymentMethod = {
-  paymentMethodType: string
-  name: string
-  redirect?: boolean
-  fields?: CustomField[]
-}
-
 type CardBrand =
   | 'visa'
   | 'mastercard'
@@ -597,6 +639,14 @@ type CardBrand =
   | 'jcl'
   | 'unionpay'
 
+type PaymentMethod = {
+  paymentMethodType: string
+  name: string
+  redirect?: boolean
+  fields?: CustomField[]
+  supportedCardBrands?: CardBrand[]
+}
+
 type ExistingCard = {
   bin: string
   brand: CardBrand

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pay-com/js",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Pay.com JS loading utility",
   "keywords": [
     "Pay.com",