@xpayeg/sdk 1.0.0 → 1.0.1
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.
- package/CHANGELOG.md +21 -0
- package/README.md +0 -11
- package/dist/index.d.cts +3 -33
- package/dist/index.d.mts +3 -33
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @xpayeg/sdk
|
|
2
2
|
|
|
3
|
+
## 1.0.1
|
|
4
|
+
### Patch Changes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
- [#103](https://github.com/xpayeg/xpay/pull/103) [`7402e27`](https://github.com/xpayeg/xpay/commit/7402e27cde482148f126b2073694ef38386ea87a) Thanks [@Elmosh](https://github.com/Elmosh)! - Remove `CardElement` from both SDKs — `PaymentElement` is the only supported element going forward. It handles every payment method (Card, ValU, Fawry, etc.) through one unified UI and renders the appropriate fields based on the customer's choice.
|
|
9
|
+
|
|
10
|
+
This release also republishes both packages through the proper `pnpm publish` flow, which fixes the `workspace:*` protocol leak in 1.0.0's `devDependencies` and `peerDependencies`. `npm install @xpayeg/sdk` and `npm install @xpayeg/react` now work cleanly.
|
|
11
|
+
|
|
12
|
+
**Migration:** replace `elements.create("card")` with `elements.create("payment")`. If you previously rendered `<CardElement>` only when the user selected "Card" from your own picker, switch to `<PaymentElement>` which provides both the picker and the card form together.
|
|
13
|
+
|
|
14
|
+
```ts
|
|
15
|
+
// Before
|
|
16
|
+
const cardElement = elements.create("card");
|
|
17
|
+
cardElement.mount("#card");
|
|
18
|
+
|
|
19
|
+
// After
|
|
20
|
+
const paymentElement = elements.create("payment");
|
|
21
|
+
paymentElement.mount("#payment");
|
|
22
|
+
```
|
|
23
|
+
|
|
3
24
|
## 1.0.0
|
|
4
25
|
### Major Changes
|
|
5
26
|
|
package/README.md
CHANGED
|
@@ -189,17 +189,6 @@ paymentElement.on('change', (event) => {
|
|
|
189
189
|
});
|
|
190
190
|
```
|
|
191
191
|
|
|
192
|
-
### Card Element (card form only -- you handle method selection)
|
|
193
|
-
|
|
194
|
-
```javascript
|
|
195
|
-
const cardElement = elements.create('card');
|
|
196
|
-
cardElement.mount('#card-form');
|
|
197
|
-
|
|
198
|
-
cardElement.on('change', (event) => {
|
|
199
|
-
console.log(event.complete, event.value.brand);
|
|
200
|
-
});
|
|
201
|
-
```
|
|
202
|
-
|
|
203
192
|
## Step 4: Confirm the Payment
|
|
204
193
|
|
|
205
194
|
`confirm()` returns a tagged union -- check `type` to determine the outcome.
|
package/dist/index.d.cts
CHANGED
|
@@ -3406,7 +3406,7 @@ interface XPayError {
|
|
|
3406
3406
|
interface XPayInstance {
|
|
3407
3407
|
/**
|
|
3408
3408
|
* Create an Elements instance for custom checkout UI.
|
|
3409
|
-
* Use with `PaymentElement`
|
|
3409
|
+
* Use with `PaymentElement` to render the payment form.
|
|
3410
3410
|
*
|
|
3411
3411
|
* @param options - Must include `clientSecret` from a checkout session
|
|
3412
3412
|
* @returns An Elements instance for creating and managing payment elements
|
|
@@ -3456,7 +3456,7 @@ interface ElementsOptions {
|
|
|
3456
3456
|
locale?: "en" | "ar";
|
|
3457
3457
|
}
|
|
3458
3458
|
/**
|
|
3459
|
-
* Manages the lifecycle of
|
|
3459
|
+
* Manages the lifecycle of the PaymentElement.
|
|
3460
3460
|
*
|
|
3461
3461
|
* A single Elements instance manages one embed iframe shared by all elements.
|
|
3462
3462
|
* Provides session management methods (promo codes, quantities, etc.) and
|
|
@@ -3465,12 +3465,8 @@ interface ElementsOptions {
|
|
|
3465
3465
|
interface Elements {
|
|
3466
3466
|
/** Create a PaymentElement (full payment method selector + card form) */
|
|
3467
3467
|
create(type: "payment", options?: PaymentElementOptions): PaymentElement;
|
|
3468
|
-
/** Create a CardElement (card form only — merchant handles method selection) */
|
|
3469
|
-
create(type: "card", options?: CardElementOptions): CardElement;
|
|
3470
3468
|
/** Get an existing element by type, or null if not created */
|
|
3471
3469
|
getElement(type: "payment"): PaymentElement | null;
|
|
3472
|
-
/** Get an existing element by type, or null if not created */
|
|
3473
|
-
getElement(type: "card"): CardElement | null;
|
|
3474
3470
|
/** Fetch available payment methods for this session */
|
|
3475
3471
|
fetchPaymentMethods(): Promise<PaymentMethodInfo[]>;
|
|
3476
3472
|
/**
|
|
@@ -3536,11 +3532,6 @@ interface PaymentElementOptions {
|
|
|
3536
3532
|
/** Custom ordering of payment methods by type */
|
|
3537
3533
|
paymentMethodOrder?: string[];
|
|
3538
3534
|
}
|
|
3539
|
-
/** Options for creating a CardElement */
|
|
3540
|
-
interface CardElementOptions {
|
|
3541
|
-
/** Whether to show the cardholder name input */
|
|
3542
|
-
showCardholderName?: boolean;
|
|
3543
|
-
}
|
|
3544
3535
|
/**
|
|
3545
3536
|
* Change event from a PaymentElement.
|
|
3546
3537
|
* Fires on payment method selection, card field changes, and session updates.
|
|
@@ -3570,22 +3561,6 @@ interface PaymentElementChangeEvent {
|
|
|
3570
3561
|
/** Full session data including updated amounts, fees, and discounts */
|
|
3571
3562
|
session: CheckoutSession;
|
|
3572
3563
|
}
|
|
3573
|
-
/**
|
|
3574
|
-
* Change event from a CardElement.
|
|
3575
|
-
* Fires when card fields change (input, validation, completion).
|
|
3576
|
-
*/
|
|
3577
|
-
interface CardElementChangeEvent {
|
|
3578
|
-
elementType: "card";
|
|
3579
|
-
/** Whether all card fields are empty */
|
|
3580
|
-
empty: boolean;
|
|
3581
|
-
/** Whether all card fields are filled and valid */
|
|
3582
|
-
complete: boolean;
|
|
3583
|
-
/** Detected card details (available as user types) */
|
|
3584
|
-
value: {
|
|
3585
|
-
/** Card brand (e.g., "visa", "mastercard") — null until detected */
|
|
3586
|
-
brand: string | null;
|
|
3587
|
-
};
|
|
3588
|
-
}
|
|
3589
3564
|
/** Base interface shared by all element types */
|
|
3590
3565
|
interface BaseElement {
|
|
3591
3566
|
/** Mount the element into a DOM container (CSS selector or HTMLElement) */
|
|
@@ -3614,11 +3589,6 @@ interface PaymentElement extends BaseElement {
|
|
|
3614
3589
|
/** Update element options at runtime */
|
|
3615
3590
|
update(options: Partial<PaymentElementOptions>): void;
|
|
3616
3591
|
}
|
|
3617
|
-
/** CardElement — card-only form (merchant handles payment method selection) */
|
|
3618
|
-
interface CardElement extends BaseElement {
|
|
3619
|
-
/** Update element options at runtime */
|
|
3620
|
-
update(options: Partial<CardElementOptions>): void;
|
|
3621
|
-
}
|
|
3622
3592
|
/**
|
|
3623
3593
|
* Options for `confirmPayment()` or `checkout.confirm()`.
|
|
3624
3594
|
*
|
|
@@ -3871,4 +3841,4 @@ declare global {
|
|
|
3871
3841
|
declare function loadXPay(publishableKey: string): Promise<XPayInstance | null>;
|
|
3872
3842
|
|
|
3873
3843
|
export { loadXPay };
|
|
3874
|
-
export type { ActionResult, Address, Appearance, BaseElement,
|
|
3844
|
+
export type { ActionResult, Address, Appearance, BaseElement, CheckoutActions, CheckoutCompleteResult, DiscountResponseDto as CheckoutDiscount, CheckoutError, FeesResponseDto as CheckoutFees, CheckoutInstance, LineItemDto as CheckoutLineItem, CheckoutOptions, CheckoutSession, TotalDetailsResponseDto as CheckoutTotalDetails, ConfirmPaymentOptions, CustomerDetails, Elements, ElementsLoadErrorEvent, ElementsOptions, ElementsReadyEvent, InitCheckoutOptions, InitCheckoutResult, PaymentElement, PaymentElementChangeEvent, PaymentElementOptions, PaymentMethodInfo, SessionStatus, XPayError, XPayInstance };
|
package/dist/index.d.mts
CHANGED
|
@@ -3406,7 +3406,7 @@ interface XPayError {
|
|
|
3406
3406
|
interface XPayInstance {
|
|
3407
3407
|
/**
|
|
3408
3408
|
* Create an Elements instance for custom checkout UI.
|
|
3409
|
-
* Use with `PaymentElement`
|
|
3409
|
+
* Use with `PaymentElement` to render the payment form.
|
|
3410
3410
|
*
|
|
3411
3411
|
* @param options - Must include `clientSecret` from a checkout session
|
|
3412
3412
|
* @returns An Elements instance for creating and managing payment elements
|
|
@@ -3456,7 +3456,7 @@ interface ElementsOptions {
|
|
|
3456
3456
|
locale?: "en" | "ar";
|
|
3457
3457
|
}
|
|
3458
3458
|
/**
|
|
3459
|
-
* Manages the lifecycle of
|
|
3459
|
+
* Manages the lifecycle of the PaymentElement.
|
|
3460
3460
|
*
|
|
3461
3461
|
* A single Elements instance manages one embed iframe shared by all elements.
|
|
3462
3462
|
* Provides session management methods (promo codes, quantities, etc.) and
|
|
@@ -3465,12 +3465,8 @@ interface ElementsOptions {
|
|
|
3465
3465
|
interface Elements {
|
|
3466
3466
|
/** Create a PaymentElement (full payment method selector + card form) */
|
|
3467
3467
|
create(type: "payment", options?: PaymentElementOptions): PaymentElement;
|
|
3468
|
-
/** Create a CardElement (card form only — merchant handles method selection) */
|
|
3469
|
-
create(type: "card", options?: CardElementOptions): CardElement;
|
|
3470
3468
|
/** Get an existing element by type, or null if not created */
|
|
3471
3469
|
getElement(type: "payment"): PaymentElement | null;
|
|
3472
|
-
/** Get an existing element by type, or null if not created */
|
|
3473
|
-
getElement(type: "card"): CardElement | null;
|
|
3474
3470
|
/** Fetch available payment methods for this session */
|
|
3475
3471
|
fetchPaymentMethods(): Promise<PaymentMethodInfo[]>;
|
|
3476
3472
|
/**
|
|
@@ -3536,11 +3532,6 @@ interface PaymentElementOptions {
|
|
|
3536
3532
|
/** Custom ordering of payment methods by type */
|
|
3537
3533
|
paymentMethodOrder?: string[];
|
|
3538
3534
|
}
|
|
3539
|
-
/** Options for creating a CardElement */
|
|
3540
|
-
interface CardElementOptions {
|
|
3541
|
-
/** Whether to show the cardholder name input */
|
|
3542
|
-
showCardholderName?: boolean;
|
|
3543
|
-
}
|
|
3544
3535
|
/**
|
|
3545
3536
|
* Change event from a PaymentElement.
|
|
3546
3537
|
* Fires on payment method selection, card field changes, and session updates.
|
|
@@ -3570,22 +3561,6 @@ interface PaymentElementChangeEvent {
|
|
|
3570
3561
|
/** Full session data including updated amounts, fees, and discounts */
|
|
3571
3562
|
session: CheckoutSession;
|
|
3572
3563
|
}
|
|
3573
|
-
/**
|
|
3574
|
-
* Change event from a CardElement.
|
|
3575
|
-
* Fires when card fields change (input, validation, completion).
|
|
3576
|
-
*/
|
|
3577
|
-
interface CardElementChangeEvent {
|
|
3578
|
-
elementType: "card";
|
|
3579
|
-
/** Whether all card fields are empty */
|
|
3580
|
-
empty: boolean;
|
|
3581
|
-
/** Whether all card fields are filled and valid */
|
|
3582
|
-
complete: boolean;
|
|
3583
|
-
/** Detected card details (available as user types) */
|
|
3584
|
-
value: {
|
|
3585
|
-
/** Card brand (e.g., "visa", "mastercard") — null until detected */
|
|
3586
|
-
brand: string | null;
|
|
3587
|
-
};
|
|
3588
|
-
}
|
|
3589
3564
|
/** Base interface shared by all element types */
|
|
3590
3565
|
interface BaseElement {
|
|
3591
3566
|
/** Mount the element into a DOM container (CSS selector or HTMLElement) */
|
|
@@ -3614,11 +3589,6 @@ interface PaymentElement extends BaseElement {
|
|
|
3614
3589
|
/** Update element options at runtime */
|
|
3615
3590
|
update(options: Partial<PaymentElementOptions>): void;
|
|
3616
3591
|
}
|
|
3617
|
-
/** CardElement — card-only form (merchant handles payment method selection) */
|
|
3618
|
-
interface CardElement extends BaseElement {
|
|
3619
|
-
/** Update element options at runtime */
|
|
3620
|
-
update(options: Partial<CardElementOptions>): void;
|
|
3621
|
-
}
|
|
3622
3592
|
/**
|
|
3623
3593
|
* Options for `confirmPayment()` or `checkout.confirm()`.
|
|
3624
3594
|
*
|
|
@@ -3871,4 +3841,4 @@ declare global {
|
|
|
3871
3841
|
declare function loadXPay(publishableKey: string): Promise<XPayInstance | null>;
|
|
3872
3842
|
|
|
3873
3843
|
export { loadXPay };
|
|
3874
|
-
export type { ActionResult, Address, Appearance, BaseElement,
|
|
3844
|
+
export type { ActionResult, Address, Appearance, BaseElement, CheckoutActions, CheckoutCompleteResult, DiscountResponseDto as CheckoutDiscount, CheckoutError, FeesResponseDto as CheckoutFees, CheckoutInstance, LineItemDto as CheckoutLineItem, CheckoutOptions, CheckoutSession, TotalDetailsResponseDto as CheckoutTotalDetails, ConfirmPaymentOptions, CustomerDetails, Elements, ElementsLoadErrorEvent, ElementsOptions, ElementsReadyEvent, InitCheckoutOptions, InitCheckoutResult, PaymentElement, PaymentElementChangeEvent, PaymentElementOptions, PaymentMethodInfo, SessionStatus, XPayError, XPayInstance };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xpayeg/sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "XPay JavaScript SDK — loader and TypeScript types for embedding XPay payments",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -32,21 +32,16 @@
|
|
|
32
32
|
"CHANGELOG.md",
|
|
33
33
|
"LICENSE"
|
|
34
34
|
],
|
|
35
|
-
"scripts": {
|
|
36
|
-
"build": "tsdown && rollup -c rollup.dts.config.mjs",
|
|
37
|
-
"lint:pkg": "publint && attw --pack .",
|
|
38
|
-
"typecheck": "tsc --noEmit"
|
|
39
|
-
},
|
|
40
35
|
"devDependencies": {
|
|
41
36
|
"@arethetypeswrong/cli": "^0.18.2",
|
|
42
37
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
43
|
-
"@xpay/checkout-api": "workspace:*",
|
|
44
|
-
"@xpay/tsconfig": "workspace:*",
|
|
45
38
|
"publint": "^0.3.21",
|
|
46
39
|
"rollup": "^4.60.4",
|
|
47
40
|
"rollup-plugin-dts": "^6.4.1",
|
|
48
41
|
"tsdown": "^0.22.0",
|
|
49
|
-
"typescript": "
|
|
42
|
+
"typescript": "5.9.3",
|
|
43
|
+
"@xpay/checkout-api": "0.0.0",
|
|
44
|
+
"@xpay/tsconfig": "0.0.0"
|
|
50
45
|
},
|
|
51
46
|
"repository": {
|
|
52
47
|
"type": "git",
|
|
@@ -62,5 +57,10 @@
|
|
|
62
57
|
"egypt",
|
|
63
58
|
"checkout",
|
|
64
59
|
"sdk"
|
|
65
|
-
]
|
|
66
|
-
|
|
60
|
+
],
|
|
61
|
+
"scripts": {
|
|
62
|
+
"build": "tsdown && rollup -c rollup.dts.config.mjs",
|
|
63
|
+
"lint:pkg": "publint && attw --pack .",
|
|
64
|
+
"typecheck": "tsc --noEmit"
|
|
65
|
+
}
|
|
66
|
+
}
|