@primer-io/primer-js 0.5.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,15 +10,29 @@ export type CardNetworksContextType = {
10
10
  selectableCardNetworks: CardNetwork[];
11
11
  isLoading: boolean;
12
12
  } | null;
13
+ /**
14
+ * SDK state representation
15
+ */
13
16
  export type SdkState = {
14
17
  isSuccessful: boolean;
15
18
  isProcessing: boolean;
16
- error: Error | null;
19
+ /**
20
+ * SDK/component initialization errors.
21
+ * This represents errors from the Primer JS layer itself (e.g., configuration errors,
22
+ * component initialization failures), not payment processing errors.
23
+ */
24
+ primerJsError: Error | null;
17
25
  isLoading: boolean;
18
- failure: {
26
+ /**
27
+ * Payment processing failure information.
28
+ * Contains structured error details from failed payment attempts.
29
+ * Includes error code, message, diagnostics ID, and additional metadata.
30
+ */
31
+ paymentFailure: {
19
32
  code: string;
20
33
  message: string;
21
- details?: Record<string, unknown>;
34
+ diagnosticsId?: string | null;
35
+ data?: Record<string, unknown>;
22
36
  } | null;
23
37
  };
24
38
  export type SdkStateContextType = SdkState | null;
@@ -176,6 +190,214 @@ declare const PaymentMethodType: {
176
190
  readonly ALMA: "ALMA";
177
191
  };
178
192
  export type PaymentMethodType = (typeof PaymentMethodType)[keyof typeof PaymentMethodType];
193
+ declare const PaymentMethodType$1 = {
194
+ WORLDPAY_IDEAL: "WORLDPAY_IDEAL",
195
+ STRIPE_ACH: "STRIPE_ACH",
196
+ STRIPE_IDEAL: "STRIPE_IDEAL",
197
+ ADYEN_KLARNA: "ADYEN_KLARNA",
198
+ ADYEN_BANCONTACT_CARD: "ADYEN_BANCONTACT_CARD",
199
+ PAY_NL_KAARTDIRECT: "PAY_NL_KAARTDIRECT",
200
+ ADYEN_EPS: "ADYEN_EPS",
201
+ ADYEN_BANCONTACT_PAYCONIQ: "ADYEN_BANCONTACT_PAYCONIQ",
202
+ OMISE_PROMPTPAY: "OMISE_PROMPTPAY",
203
+ OMISE_TRUEMONEY: "OMISE_TRUEMONEY",
204
+ ADYEN_MULTIBANCO: "ADYEN_MULTIBANCO",
205
+ PACYPAY_WECHAT: "PACYPAY_WECHAT",
206
+ PACYPAY_ALIPAY: "PACYPAY_ALIPAY",
207
+ ADYEN_MBWAY: "ADYEN_MBWAY",
208
+ XENDIT_DANA: "XENDIT_DANA",
209
+ XENDIT_SHOPEEPAY: "XENDIT_SHOPEEPAY",
210
+ ADYEN_PAYSHOP: "ADYEN_PAYSHOP",
211
+ ADYEN_PAYTRAIL: "ADYEN_PAYTRAIL",
212
+ CLEARPAY: "CLEARPAY",
213
+ RAPYD_FAST: "RAPYD_FAST",
214
+ RAPYD_PROMPTPAY: "RAPYD_PROMPTPAY",
215
+ RAPYD_GCASH: "RAPYD_GCASH",
216
+ RAPYD_POLI: "RAPYD_POLI",
217
+ RAPYD_GRABPAY: "RAPYD_GRABPAY",
218
+ PRIMER_PAYPAL: "PRIMER_PAYPAL",
219
+ TWOC2P: "TWOC2P",
220
+ NETS: "NETS",
221
+ STRIPE_GIROPAY: "STRIPE_GIROPAY",
222
+ MOLLIE_GIROPAY: "MOLLIE_GIROPAY",
223
+ MOLLIE_EPS: "MOLLIE_EPS",
224
+ PAY_NL_EPS: "PAY_NL_EPS",
225
+ PAY_NL_P24: "PAY_NL_P24",
226
+ MOLLIE_P24: "MOLLIE_P24",
227
+ MOLLIE_SOFORT: "MOLLIE_SOFORT",
228
+ COINBASE: "COINBASE",
229
+ OPENNODE: "OPENNODE",
230
+ MOLLIE_GIFT_CARD: "MOLLIE_GIFTCARD",
231
+ XFERS_PAYNOW: "XFERS_PAYNOW",
232
+ PAYMENT_CARD: "PAYMENT_CARD",
233
+ APPLE_PAY: "APPLE_PAY",
234
+ GOOGLE_PAY: "GOOGLE_PAY",
235
+ PAYPAL: "PAYPAL",
236
+ GO_CARDLESS: "GOCARDLESS",
237
+ KLARNA: "KLARNA",
238
+ PAY_NL_IDEAL: "PAY_NL_IDEAL",
239
+ PAY_NL_SOFORT_BANKING: "PAY_NL_SOFORT_BANKING",
240
+ PAY_NL_BANCONTACT: "PAY_NL_BANCONTACT",
241
+ PAY_NL_PAYPAL: "PAY_NL_PAYPAL",
242
+ PAY_NL_CREDIT_TRANSFER: "PAY_NL_CREDIT_TRANSFER",
243
+ PAY_NL_DIRECT_DEBIT: "PAY_NL_DIRECT_DEBIT",
244
+ PAY_NL_GIROPAY: "PAY_NL_GIROPAY",
245
+ PAY_NL_PAYCONIQ: "PAY_NL_PAYCONIQ",
246
+ PAY_NL_RIVERTY: "PAY_NL_RIVERTY",
247
+ HOOLAH: "HOOLAH",
248
+ ADYEN_BLIK: "ADYEN_BLIK",
249
+ ADYEN_MOBILEPAY: "ADYEN_MOBILEPAY",
250
+ ADYEN_VIPPS: "ADYEN_VIPPS",
251
+ ADYEN_GIROPAY: "ADYEN_GIROPAY",
252
+ ADYEN_SOFORT: "ADYEN_SOFORT",
253
+ ADYEN_IDEAL: "ADYEN_IDEAL",
254
+ ADYEN_TRUSTLY: "ADYEN_TRUSTLY",
255
+ ADYEN_ALIPAY: "ADYEN_ALIPAY",
256
+ ADYEN_TWINT: "ADYEN_TWINT",
257
+ ADYEN_BANK_TRANSFER: "ADYEN_BANK_TRANSFER",
258
+ MOLLIE_BANCONTACT: "MOLLIE_BANCONTACT",
259
+ MOLLIE_IDEAL: "MOLLIE_IDEAL",
260
+ BUCKAROO_GIROPAY: "BUCKAROO_GIROPAY",
261
+ BUCKAROO_EPS: "BUCKAROO_EPS",
262
+ BUCKAROO_SOFORT: "BUCKAROO_SOFORT",
263
+ BUCKAROO_BANCONTACT: "BUCKAROO_BANCONTACT",
264
+ BUCKAROO_IDEAL: "BUCKAROO_IDEAL",
265
+ ATOME: "ATOME",
266
+ DLOCAL_PIX: "DLOCAL_PIX",
267
+ ALMA: "ALMA",
268
+ } as const;
269
+ type PaymentMethodType$1 = (typeof PaymentMethodType$1)[keyof typeof PaymentMethodType$1];
270
+ declare const PaymentInstrumentType$1 = {
271
+ WORLDPAY_IDEAL: "WORLDPAY_IDEAL",
272
+ AUTOMATED_CLEARING_HOUSE: "AUTOMATED_CLEARING_HOUSE",
273
+ ADYEN_KLARNA: "ADYEN_KLARNA",
274
+ ADYEN_BANCONTACT_CARD: "ADYEN_BANCONTACT_CARD",
275
+ PAY_NL_KAARTDIRECT: "PAY_NL_KAARTDIRECT",
276
+ ADYEN_EPS: "ADYEN_EPS",
277
+ ADYEN_BANCONTACT_PAYCONIQ: "ADYEN_BANCONTACT_PAYCONIQ",
278
+ OMISE_PROMPTPAY: "OMISE_PROMPTPAY",
279
+ OMISE_TRUEMONEY: "OMISE_TRUEMONEY",
280
+ ADYEN_MULTIBANCO: "ADYEN_MULTIBANCO",
281
+ PACYPAY_WECHAT: "PACYPAY_WECHAT",
282
+ PACYPAY_ALIPAY: "PACYPAY_ALIPAY",
283
+ ADYEN_MBWAY: "ADYEN_MBWAY",
284
+ XENDIT_DANA: "XENDIT_DANA",
285
+ XENDIT_SHOPEEPAY: "XENDIT_SHOPEEPAY",
286
+ ADYEN_PAYSHOP: "ADYEN_PAYSHOP",
287
+ ADYEN_PAYTRAIL: "ADYEN_PAYTRAIL",
288
+ CLEARPAY: "CLEARPAY",
289
+ RAPYD_FAST: "RAPYD_FAST",
290
+ RAPYD_PROMPTPAY: "RAPYD_PROMPTPAY",
291
+ RAPYD_GCASH: "RAPYD_GCASH",
292
+ RAPYD_POLI: "RAPYD_POLI",
293
+ RAPYD_GRABPAY: "RAPYD_GRABPAY",
294
+ PRIMER_PAYPAL: "PRIMER_PAYPAL",
295
+ TWOC2P: "TWOC2P",
296
+ NETS: "NETS",
297
+ STRIPE_ACH: "STRIPE_ACH",
298
+ STRIPE_GIROPAY: "STRIPE_GIROPAY",
299
+ MOLLIE_GIROPAY: "MOLLIE_GIROPAY",
300
+ MOLLIE_EPS: "MOLLIE_EPS",
301
+ PAY_NL_EPS: "PAY_NL_EPS",
302
+ PAY_NL_P24: "PAY_NL_P24",
303
+ MOLLIE_P24: "MOLLIE_P24",
304
+ MOLLIE_SOFORT: "MOLLIE_SOFORT",
305
+ COINBASE: "COINBASE",
306
+ OPENNODE: "OPENNODE",
307
+ MOLLIE_GIFT_CARD: "MOLLIE_GIFTCARD",
308
+ XFERS_PAYNOW: "XFERS_PAYNOW",
309
+ CARD: "PAYMENT_CARD",
310
+ APPLE_PAY: "APPLE_PAY",
311
+ GOOGLE_PAY: "GOOGLE_PAY",
312
+ PAYPAL: "PAYPAL_ORDER",
313
+ PAYPAL_VAULTED: "PAYPAL_BILLING_AGREEMENT",
314
+ GO_CARDLESS: "GOCARDLESS",
315
+ PAY_NL_IDEAL: "PAY_NL_IDEAL",
316
+ PAY_NL_SOFORT_BANKING: "PAY_NL_SOFORT_BANKING",
317
+ PAY_NL_BANCONTACT: "PAY_NL_BANCONTACT",
318
+ PAY_NL_PAYPAL: "PAY_NL_PAYPAL",
319
+ PAY_NL_CREDIT_TRANSFER: "PAY_NL_CREDIT_TRANSFER",
320
+ PAY_NL_DIRECT_DEBIT: "PAY_NL_DIRECT_DEBIT",
321
+ PAY_NL_GIROPAY: "PAY_NL_GIROPAY",
322
+ PAY_NL_PAYCONIQ: "PAY_NL_PAYCONIQ",
323
+ PAY_NL_RIVERTY: "PAY_NL_RIVERTY",
324
+ HOOLAH: "HOOLAH",
325
+ ADYEN_BLIK: "ADYEN_BLIK",
326
+ ADYEN_VIPPS: "ADYEN_VIPPS",
327
+ ADYEN_GIROPAY: "ADYEN_GIROPAY",
328
+ ADYEN_SOFORT: "ADYEN_SOFORT",
329
+ ADYEN_IDEAL: "ADYEN_IDEAL",
330
+ ADYEN_TRUSTLY: "ADYEN_TRUSTLY",
331
+ ADYEN_ALIPAY: "ADYEN_ALIPAY",
332
+ ADYEN_TWINT: "ADYEN_TWINT",
333
+ ADYEN_MOBILEPAY: "ADYEN_MOBILEPAY",
334
+ MOLLIE_BANCONTACT: "MOLLIE_BANCONTACT",
335
+ MOLLIE_IDEAL: "MOLLIE_IDEAL",
336
+ BUCKAROO_GIROPAY: "BUCKAROO_GIROPAY",
337
+ BUCKAROO_EPS: "BUCKAROO_EPS",
338
+ BUCKAROO_SOFORT: "BUCKAROO_SOFORT",
339
+ BUCKAROO_BANCONTACT: "BUCKAROO_BANCONTACT",
340
+ BUCKAROO_IDEAL: "BUCKAROO_IDEAL",
341
+ ATOME: "ATOME",
342
+ KLARNA_CUSTOMER_TOKEN: "KLARNA_CUSTOMER_TOKEN",
343
+ DLOCAL_PIX: "DLOCAL_PIX",
344
+ ALMA: "ALMA",
345
+ } as const;
346
+ type PaymentInstrumentType$1 = (typeof PaymentInstrumentType$1)[keyof typeof PaymentInstrumentType$1];
347
+ /**
348
+ * Minimal payment summary with reduced PII exposure.
349
+ * Used in events for public data delivery.
350
+ */
351
+ export interface PaymentSummary {
352
+ /** Payment ID from Primer API */
353
+ id: string;
354
+ /** Order ID/reference from merchant */
355
+ orderId: string;
356
+ /** Payment method data with whitelisted fields */
357
+ paymentMethodData?: {
358
+ /** Payment method type (e.g., "PAYMENT_CARD", "PAYPAL") */
359
+ paymentMethodType?: string;
360
+ /** Last 4 digits of card (cards only) */
361
+ last4Digits?: string;
362
+ /** Card network (e.g., "VISA", "MASTERCARD") - cards only */
363
+ network?: string;
364
+ /** Last 4 digits of account number (ACH only) */
365
+ accountNumberLastFourDigits?: string;
366
+ /** Bank name (ACH only) */
367
+ bankName?: string;
368
+ };
369
+ }
370
+ /**
371
+ * Minimal vaulted payment method summary with reduced PII exposure.
372
+ * Used for vault events and callbacks to expose vaulted payment methods safely.
373
+ */
374
+ export interface VaultedPaymentMethodSummary {
375
+ /** Payment instrument ID */
376
+ id: string;
377
+ /** Analytics tracking ID */
378
+ analyticsId: string;
379
+ /** Payment method type (e.g., "PAYMENT_CARD", "PAYPAL") */
380
+ paymentMethodType: PaymentMethodType$1;
381
+ /** Payment instrument type (e.g., "CARD", "PAYPAL_BILLING_AGREEMENT") */
382
+ paymentInstrumentType: PaymentInstrumentType$1;
383
+ /** Payment instrument data with whitelisted safe fields only */
384
+ paymentInstrumentData?: {
385
+ /** Last 4 digits of card (cards only) */
386
+ last4Digits?: string;
387
+ /** Card network (e.g., "VISA", "MASTERCARD") - cards only */
388
+ network?: string;
389
+ /** Last 4 digits of account number (ACH only) */
390
+ accountNumberLastFourDigits?: string;
391
+ /** Bank name (ACH only) */
392
+ bankName?: string;
393
+ /** Account type (ACH only) */
394
+ accountType?: string;
395
+ /** Email for wallet payment methods */
396
+ email?: string;
397
+ };
398
+ /** Optional user-provided description for the payment method */
399
+ userDescription?: string;
400
+ }
179
401
  export type APIVersionOption = "legacy" | "2.4";
180
402
  declare enum HeadlessManagerType {
181
403
  CARD = "CARD",
@@ -1339,7 +1561,7 @@ export interface PrimerCheckoutOptions {
1339
1561
  * ]
1340
1562
  * ```
1341
1563
  */
1342
- enabledPaymentMethods?: typeof PaymentMethodType.PAYMENT_CARD | (typeof PaymentMethodType.ADYEN_BLIK)[];
1564
+ enabledPaymentMethods?: typeof PaymentMethodType.PAYMENT_CARD | typeof PaymentMethodType.PAYPAL | (typeof PaymentMethodType.ADYEN_BLIK)[];
1343
1565
  }
1344
1566
  export type InitializedManager = {
1345
1567
  type: typeof PaymentMethodType.STRIPE_ACH;
@@ -1437,17 +1659,116 @@ export declare class InitializedPayments {
1437
1659
  toArray(): InitializedPaymentMethod[];
1438
1660
  size(): number;
1439
1661
  }
1662
+ /**
1663
+ * Map of vaulted payment method ID to vaulted payment method summary
1664
+ */
1665
+ export type VaultedPaymentMethodsMap = Map<string, VaultedPaymentMethodSummary>;
1666
+ /**
1667
+ * Wrapper class for vaulted payment methods that provides type-safe access
1668
+ * to filtered vaulted payment method data.
1669
+ *
1670
+ * This class mirrors the structure of InitializedPayments but for vault data,
1671
+ * providing a consistent API for merchants to access vaulted payment methods
1672
+ * through events and callbacks.
1673
+ *
1674
+ * @example
1675
+ * ```typescript
1676
+ * // Access via callback
1677
+ * primerJS.onVaultedMethodsUpdate = (data) => {
1678
+ * console.log('Vault size:', data.size());
1679
+ *
1680
+ * // Get specific method by ID
1681
+ * const method = data.get('pm_abc123');
1682
+ * if (method) {
1683
+ * console.log('Last 4:', method.paymentInstrumentData?.last4Digits);
1684
+ * }
1685
+ *
1686
+ * // Get all methods
1687
+ * const allMethods = data.toArray();
1688
+ * allMethods.forEach(method => {
1689
+ * console.log(method.paymentMethodType);
1690
+ * });
1691
+ * };
1692
+ * ```
1693
+ */
1694
+ export declare class InitializedVaultedPayments {
1695
+ private readonly _methods;
1696
+ /**
1697
+ * @param map - Map of vaulted payment method IDs to summaries
1698
+ */
1699
+ constructor(map: VaultedPaymentMethodsMap);
1700
+ /**
1701
+ * Get a vaulted payment method by its ID
1702
+ *
1703
+ * @param id - Payment method ID
1704
+ * @returns Vaulted payment method summary if found, undefined otherwise
1705
+ */
1706
+ get(id: string): VaultedPaymentMethodSummary | undefined;
1707
+ /**
1708
+ * Get all vaulted payment methods as an array
1709
+ *
1710
+ * @returns Array of all vaulted payment method summaries
1711
+ */
1712
+ toArray(): VaultedPaymentMethodSummary[];
1713
+ /**
1714
+ * Get the count of vaulted payment methods
1715
+ *
1716
+ * @returns Number of vaulted payment methods
1717
+ */
1718
+ size(): number;
1719
+ }
1720
+ /**
1721
+ * Payment prepare callback data.
1722
+ * Includes payment method type for validation or abort control flow.
1723
+ */
1440
1724
  export interface PaymentData {
1441
- paymentMethodType: string;
1725
+ /** Payment method type (e.g., "PAYMENT_CARD", "PAYPAL") */
1726
+ paymentMethodType: PaymentMethodType;
1442
1727
  }
1443
1728
  export interface PrepareHandler {
1444
1729
  continuePaymentCreation: () => void;
1445
1730
  abortPaymentCreation: () => void;
1446
1731
  }
1447
- export interface PaymentCompleteData {
1448
- payment: Payment | null;
1449
- status: "success" | "pending" | "error";
1450
- error?: PrimerClientError;
1732
+ /**
1733
+ * Payment success callback data.
1734
+ * Includes minimal payment summary with reduced PII exposure.
1735
+ */
1736
+ export interface PaymentSuccessData {
1737
+ /** Minimal payment summary (ID, orderId, last4, brand) - reduced PII exposure */
1738
+ payment: PaymentSummary;
1739
+ /** Payment method type (e.g., "PAYMENT_CARD", "PAYPAL") */
1740
+ paymentMethodType: string;
1741
+ /** Unix timestamp in seconds */
1742
+ timestamp: number;
1743
+ }
1744
+ /**
1745
+ * Payment failure callback data.
1746
+ * Includes error details and optional payment summary if created before failure.
1747
+ */
1748
+ export interface PaymentFailureData {
1749
+ /** Error details */
1750
+ error: {
1751
+ code: string;
1752
+ message: string;
1753
+ diagnosticsId?: string;
1754
+ data?: Record<string, unknown>;
1755
+ };
1756
+ /** Optional minimal payment summary if payment was created before failure */
1757
+ payment?: PaymentSummary;
1758
+ /** Payment method type (e.g., "PAYMENT_CARD", "PAYPAL") */
1759
+ paymentMethodType: string;
1760
+ /** Unix timestamp in seconds */
1761
+ timestamp: number;
1762
+ }
1763
+ /**
1764
+ * Vault methods update callback data.
1765
+ * Includes filtered vaulted payment methods with minimal PII exposure.
1766
+ */
1767
+ export interface VaultedMethodsUpdateData {
1768
+ /** Wrapper containing filtered vaulted payment methods */
1769
+ vaultedPayments: InitializedVaultedPayments;
1770
+ /** Unix timestamp in seconds */
1771
+ timestamp: number;
1451
1772
  }
1452
1773
  /**
1453
1774
  * PrimerJS is a wrapper class that provides a stable API for interfacing with the Primer SDK
@@ -1456,9 +1777,124 @@ export interface PaymentCompleteData {
1456
1777
  export declare class PrimerJS {
1457
1778
  private headlessInstance;
1458
1779
  private paymentMethods;
1780
+ /**
1781
+ * Called when payment flow begins.
1782
+ * Use for analytics tracking or UI updates (e.g., disable form).
1783
+ *
1784
+ * @example
1785
+ * ```typescript
1786
+ * primerJS.onPaymentStart = () => {
1787
+ * analytics.track('payment_started');
1788
+ * disablePaymentForm();
1789
+ * };
1790
+ * ```
1791
+ */
1459
1792
  onPaymentStart?: () => void;
1793
+ /**
1794
+ * Called before payment creation for validation or abort control flow.
1795
+ * Use for last-chance validation or conditional payment creation.
1796
+ *
1797
+ * @param data - Payment method information
1798
+ * @param handler - Control flow handler (continue or abort)
1799
+ *
1800
+ * @example
1801
+ * ```typescript
1802
+ * primerJS.onPaymentPrepare = (data, handler) => {
1803
+ * if (!validateBusinessRules(data.paymentMethodType)) {
1804
+ * handler.abortPaymentCreation();
1805
+ * return;
1806
+ * }
1807
+ * handler.continuePaymentCreation();
1808
+ * };
1809
+ * ```
1810
+ */
1460
1811
  onPaymentPrepare?: (data: PaymentData, handler: PrepareHandler) => void;
1461
- onPaymentComplete?: (data: PaymentCompleteData) => void;
1812
+ /**
1813
+ * Called when payment completes successfully.
1814
+ * Receives minimal payment summary with reduced PII exposure.
1815
+ *
1816
+ * Use for:
1817
+ * - Order confirmation and backend sync
1818
+ * - Receipt generation
1819
+ * - Payment processing with minimal PII exposure
1820
+ *
1821
+ * @param data - Payment success data with PaymentSummary (ID, orderId, last4, brand)
1822
+ *
1823
+ * @example
1824
+ * ```typescript
1825
+ * primerJS.onPaymentSuccess = async ({ payment, paymentMethodType }) => {
1826
+ * // Update backend
1827
+ * await fetch(`/api/orders/${payment.orderId}/complete`, {
1828
+ * method: 'POST',
1829
+ * body: JSON.stringify({ paymentId: payment.id }),
1830
+ * });
1831
+ *
1832
+ * // Redirect to success page
1833
+ * window.location.href = `/order-success?id=${payment.orderId}`;
1834
+ * };
1835
+ * ```
1836
+ */
1837
+ onPaymentSuccess?: (data: PaymentSuccessData) => void;
1838
+ /**
1839
+ * Called when payment fails or is declined.
1840
+ * Receives error details and optional payment summary if created before failure.
1841
+ *
1842
+ * Use for:
1843
+ * - Error handling and user messaging
1844
+ * - Support ticket creation with diagnosticsId
1845
+ * - Retry logic for specific error types
1846
+ *
1847
+ * @param data - Payment failure data with error details and optional PaymentSummary
1848
+ *
1849
+ * @example
1850
+ * ```typescript
1851
+ * primerJS.onPaymentFailure = ({ error, payment }) => {
1852
+ * console.error('Payment failed:', error.code, error.message);
1853
+ *
1854
+ * // Log to error tracking
1855
+ * Sentry.captureException(new Error(error.message), {
1856
+ * extra: {
1857
+ * diagnosticsId: error.diagnosticsId,
1858
+ * paymentId: payment?.id,
1859
+ * },
1860
+ * });
1861
+ *
1862
+ * // Show user-friendly message
1863
+ * showErrorMessage(error.message);
1864
+ * };
1865
+ * ```
1866
+ */
1867
+ onPaymentFailure?: (data: PaymentFailureData) => void;
1868
+ /**
1869
+ * Called when vaulted payment methods are loaded or updated.
1870
+ * Receives filtered vaulted payment method data with minimal PII exposure.
1871
+ *
1872
+ * Use for:
1873
+ * - Building custom vault UI
1874
+ * - Analytics tracking for vault usage
1875
+ * - Syncing vault state with backend
1876
+ *
1877
+ * @param data - Vault methods update data with filtered payment methods
1878
+ *
1879
+ * @example
1880
+ * ```typescript
1881
+ * primerJS.onVaultedMethodsUpdate = ({ vaultedPayments }) => {
1882
+ * console.log(`Vault contains ${vaultedPayments.size()} methods`);
1883
+ *
1884
+ * // Display in custom UI
1885
+ * const methods = vaultedPayments.toArray();
1886
+ * methods.forEach(method => {
1887
+ * displayVaultedMethod({
1888
+ * id: method.id,
1889
+ * type: method.paymentMethodType,
1890
+ * last4: method.paymentInstrumentData?.last4Digits,
1891
+ * network: method.paymentInstrumentData?.network,
1892
+ * });
1893
+ * });
1894
+ * };
1895
+ * ```
1896
+ */
1897
+ onVaultedMethodsUpdate?: (data: VaultedMethodsUpdateData) => void;
1462
1898
  constructor(headlessInstance: PrimerHeadlessCheckout);
1463
1899
  /**
1464
1900
  * Set the initialized payment methods
@@ -1482,20 +1918,17 @@ export declare class PrimerJS {
1482
1918
  * Internal method to handle the onBeforePaymentCreate callback and transform it to onPaymentPrepare
1483
1919
  * @internal - This is only used internally by the SDK
1484
1920
  */
1485
- handleBeforePaymentCreate(data: PaymentData, originalHandler: {
1921
+ handleBeforePaymentCreate(data: {
1922
+ paymentMethodType: PaymentMethodType;
1923
+ }, originalHandler: {
1486
1924
  continuePaymentCreation: () => void;
1487
1925
  abortPaymentCreation: () => void;
1488
1926
  }): void;
1489
1927
  /**
1490
- * Internal method to handle payment completion (success)
1928
+ * Internal method to handle the onVaultedMethodsUpdate callback
1491
1929
  * @internal - This is only used internally by the SDK
1492
1930
  */
1493
- handlePaymentComplete(payment: Payment | null): void;
1494
- /**
1495
- * Internal method to handle payment failure
1496
- * @internal - This is only used internally by the SDK
1497
- */
1498
- handlePaymentFailure(error: PrimerClientError, payment?: Payment): void;
1931
+ handleVaultedMethodsUpdate(vaultedPayments: InitializedVaultedPayments): void;
1499
1932
  }
1500
1933
  export interface CardSubmitResult {
1501
1934
  success?: boolean;
@@ -1528,6 +1961,27 @@ export interface PrimerEvents {
1528
1961
  "primer-ach-bank-details-collected": CustomEvent;
1529
1962
  "primer-ach-mandate-confirmed": CustomEvent;
1530
1963
  "primer-ach-mandate-declined": CustomEvent;
1964
+ "primer:payment-start": CustomEvent<undefined>;
1965
+ "primer:payment-success": CustomEvent<{
1966
+ paymentSummary: PaymentSummary;
1967
+ paymentMethodType: string;
1968
+ timestamp: number;
1969
+ }>;
1970
+ "primer:payment-failure": CustomEvent<{
1971
+ error: {
1972
+ code: string;
1973
+ message: string;
1974
+ diagnosticsId?: string;
1975
+ data?: Record<string, unknown>;
1976
+ };
1977
+ paymentSummary?: PaymentSummary;
1978
+ paymentMethodType: string;
1979
+ timestamp: number;
1980
+ }>;
1981
+ "primer:vault:methods-update": CustomEvent<{
1982
+ vaultedPayments: InitializedVaultedPayments;
1983
+ timestamp: number;
1984
+ }>;
1531
1985
  }
1532
1986
  declare class PrimerEventsController implements ReactiveController {
1533
1987
  host: ReactiveControllerHost & LitElement;
@@ -1556,6 +2010,33 @@ declare class PrimerEventsController implements ReactiveController {
1556
2010
  * @param eventDetails - The event details to forward, including source information
1557
2011
  */
1558
2012
  handleExternalCardSubmit(eventDetails: CardSubmitPayload): void;
2013
+ /**
2014
+ * Dispatch payment start event.
2015
+ * Called when payment flow begins.
2016
+ */
2017
+ dispatchPaymentStart(): void;
2018
+ /**
2019
+ * Dispatch payment success event with minimal payment summary.
2020
+ * Called when payment completes successfully.
2021
+ */
2022
+ dispatchPaymentSuccess(payment: Payment, paymentMethodType: string): void;
2023
+ /**
2024
+ * Dispatch payment failure event.
2025
+ * Called when payment fails or is declined.
2026
+ */
2027
+ dispatchPaymentFailure(error: {
2028
+ code: string;
2029
+ message: string;
2030
+ diagnosticsId?: string;
2031
+ data?: Record<string, unknown>;
2032
+ }, paymentMethodType: string, payment?: Payment): void;
2033
+ /**
2034
+ * Dispatch vault methods update event.
2035
+ * Called when vaulted payment methods are loaded or updated.
2036
+ *
2037
+ * @param vaultedPayments - Wrapper containing filtered vaulted payment methods
2038
+ */
2039
+ dispatchVaultMethodsUpdate(vaultedPayments: InitializedVaultedPayments): void;
1559
2040
  }
1560
2041
  export type AnalyticsContextType = AnalyticsUtils | null;
1561
2042
  export type EventsContextType = PrimerEventsController | null;
@@ -1655,6 +2136,25 @@ declare class VaultManagerController extends CompositeStateController<PrimerChec
1655
2136
  * Lifecycle method called when the host disconnects
1656
2137
  */
1657
2138
  hostDisconnected(): void;
2139
+ /**
2140
+ * Transform raw vault data into filtered, event-ready format.
2141
+ * Applies PII filtering to all vaulted payment methods.
2142
+ *
2143
+ * @param vaultedPaymentMethods - Raw vaulted payment methods from API
2144
+ * @returns InitializedVaultedPayments wrapper with filtered data
2145
+ */
2146
+ private createVaultedPaymentsWrapper;
2147
+ /**
2148
+ * Update vaulted payment methods and dispatch events/callbacks.
2149
+ * This method:
2150
+ * 1. Updates internal state via core controller
2151
+ * 2. Creates filtered wrapper for external APIs
2152
+ * 3. Dispatches event to listeners
2153
+ * 4. Invokes callback if defined
2154
+ *
2155
+ * @param methods - Raw vaulted payment methods from API
2156
+ */
2157
+ private updatePaymentMethodsWithEvents;
1658
2158
  /**
1659
2159
  * Fetch vaulted payment methods from the server
1660
2160
  */
@@ -1739,40 +2239,48 @@ declare class SDKContextController implements ReactiveController {
1739
2239
  setEventsController(value: EventsContextType): void;
1740
2240
  }
1741
2241
  export type SdkStateAction = {
1742
- type: "START_PROCESSING";
2242
+ type: "SET_LOADING";
2243
+ payload: boolean;
1743
2244
  } | {
1744
- type: "START_LOADING";
1745
- } | {
1746
- type: "COMPLETE_PROCESSING";
2245
+ type: "SET_PROCESSING";
2246
+ payload: boolean;
1747
2247
  } | {
1748
- type: "STOP_PROCESSING";
2248
+ type: "SET_SUCCESS";
2249
+ payload: boolean;
1749
2250
  } | {
1750
- type: "SET_ERROR";
1751
- payload: Error;
2251
+ type: "SET_PRIMER_JS_ERROR";
2252
+ payload: Error | null;
1752
2253
  } | {
1753
- type: "SET_FAILURE";
2254
+ type: "SET_PAYMENT_FAILURE";
1754
2255
  payload: {
1755
2256
  code: string;
1756
2257
  message: string;
1757
- details?: Record<string, unknown>;
1758
- };
2258
+ diagnosticsId?: string | null;
2259
+ data?: Record<string, unknown>;
2260
+ } | null;
1759
2261
  } | {
1760
- type: "COMPLETE_LOADING";
2262
+ type: "COMPLETE_PROCESSING";
1761
2263
  } | {
1762
2264
  type: "RESET";
1763
- } | {
1764
- type: "RESET_ERROR";
1765
2265
  };
1766
2266
  declare class SdkStateController extends ReactiveStateController<PrimerCheckoutType, SdkState, SdkStateAction, null> {
1767
2267
  constructor(host: PrimerCheckoutType);
2268
+ setLoading(loading: boolean): void;
2269
+ setProcessing(processing: boolean): void;
2270
+ setSuccess(success: boolean): void;
2271
+ setPrimerJsError(error: Error | null): void;
2272
+ setPaymentFailure(failure: {
2273
+ code: string;
2274
+ message: string;
2275
+ diagnosticsId?: string | null;
2276
+ data?: Record<string, unknown>;
2277
+ } | null): void;
2278
+ completeProcessing(): void;
2279
+ reset(): void;
1768
2280
  startLoading(): void;
2281
+ completeLoading(): void;
1769
2282
  startProcessing(): void;
1770
2283
  stopProcessing(): void;
1771
- completeProcessing(): void;
1772
- completeLoading(): void;
1773
- setError(error: Error): void;
1774
- setFailure(code: string, message: string, details?: Record<string, unknown>): void;
1775
- reset(): void;
1776
2284
  resetError(): void;
1777
2285
  forceCompleteLoading(): void;
1778
2286
  }
@@ -1790,6 +2298,7 @@ export interface PrimerCheckoutType extends ReactiveControllerHost, LitElement {
1790
2298
  primerEventsController: PrimerEventsController;
1791
2299
  vaultManagerController: VaultManagerController;
1792
2300
  cardNetworkController: CardNetworkController;
2301
+ primerJS?: PrimerJS;
1793
2302
  }
1794
2303
  declare class CardNetworkController implements ReactiveController {
1795
2304
  private host;
@@ -1917,6 +2426,47 @@ declare const targetLocales = [
1917
2426
  `zh-TW`,
1918
2427
  ] as const;
1919
2428
  export type LocaleCode = typeof sourceLocale | (typeof targetLocales)[number];
2429
+ declare class HeadlessSdkController implements ReactiveController {
2430
+ host: PrimerCheckoutType;
2431
+ private sdkInstanceTask;
2432
+ private createPaymentMethodManager;
2433
+ private _paymentsList;
2434
+ private currentSdkInstance;
2435
+ private primerJS;
2436
+ private loadingTimeout;
2437
+ private isDisconnected;
2438
+ constructor(host: PrimerCheckoutType);
2439
+ set paymentsList(value: PaymentMethodInfo[]);
2440
+ get paymentsList(): PaymentMethodInfo[];
2441
+ get primerJSInstance(): PrimerJS | null;
2442
+ hostConnected(): void;
2443
+ hostDisconnected(): void;
2444
+ /**
2445
+ * Normalizes options for legacy SDK compatibility.
2446
+ * When cardholder name is visible in Primer.js, it should be required in the legacy SDK
2447
+ * regardless of user's required setting, to ensure proper validation behavior.
2448
+ */
2449
+ private normalizeOptionsForLegacySdk;
2450
+ private setupLoadingTimeout;
2451
+ private clearLoadingTimeout;
2452
+ private cleanupResources;
2453
+ private _loadV2Sdk;
2454
+ initializeHeadless(): ([clientToken, options]: readonly [
2455
+ string | null,
2456
+ PrimerCheckoutOptions | null
2457
+ ]) => Promise<PrimerHeadlessCheckout | typeof initialState>;
2458
+ initializeLitContext(): ([sdkInstance, paymentsList]: readonly [
2459
+ PrimerHeadlessCheckout | null | undefined,
2460
+ PaymentMethodInfo[]
2461
+ ]) => Promise<InitializedPaymentMethodMap | typeof initialState | null>;
2462
+ initializePaymentMethodManager(paymentMethod: PaymentMethodInfo): () => Promise<{
2463
+ type: PaymentMethodType;
2464
+ manager: IKlarnaPaymentMethodManager;
2465
+ } | {
2466
+ type: PaymentMethodType;
2467
+ manager: IRedirectPaymentMethodManager;
2468
+ } | null>;
2469
+ }
1920
2470
  declare global {
1921
2471
  interface HTMLElementTagNameMap {
1922
2472
  "primer-checkout": PrimerCheckoutComponent;
@@ -1948,6 +2498,7 @@ declare class AchPaymentEventsController implements ReactiveController {
1948
2498
  export declare class PrimerCheckoutComponent extends LitElement implements PrimerCheckoutType {
1949
2499
  set jsInitialized(value: boolean);
1950
2500
  get jsInitialized(): boolean;
2501
+ get primerJS(): PrimerJS | undefined;
1951
2502
  static styles: CSSResult[];
1952
2503
  customStyles: string;
1953
2504
  clientToken: string;
@@ -1973,6 +2524,7 @@ export declare class PrimerCheckoutComponent extends LitElement implements Prime
1973
2524
  vaultManagerController: VaultManagerController;
1974
2525
  cardNetworkController: CardNetworkController;
1975
2526
  achPaymentEventsController: AchPaymentEventsController;
2527
+ headlessSdkController: HeadlessSdkController;
1976
2528
  constructor();
1977
2529
  connectedCallback(): void;
1978
2530
  attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
@@ -3511,6 +4063,13 @@ export interface CardPaymentMethodDisplay {
3511
4063
  network: string;
3512
4064
  description: string;
3513
4065
  }
4066
+ export interface PaypalPaymentMethodDisplay {
4067
+ type: "paypal";
4068
+ fullName: string;
4069
+ email: string;
4070
+ paymentMethodType: "PayPal";
4071
+ description: string;
4072
+ }
3514
4073
  export interface OtherPaymentMethodDisplay {
3515
4074
  type: "other";
3516
4075
  fullName?: string;
@@ -3527,6 +4086,10 @@ export type AssetConfig = ({
3527
4086
  shouldShowCVV: boolean;
3528
4087
  }) | ({
3529
4088
  icon: string;
4089
+ } & PaypalPaymentMethodDisplay & {
4090
+ shouldShowCVV: boolean;
4091
+ }) | ({
4092
+ icon: string;
3530
4093
  } & OtherPaymentMethodDisplay & {
3531
4094
  shouldShowCVV: boolean;
3532
4095
  });