@economist/web-apple-pay 0.1.1-beta.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.
- package/README.md +186 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1642 -0
- package/dist/src/apple-pay-button.d.ts +45 -0
- package/dist/src/apple-pay-button.js +1621 -0
- package/dist/src/apple-pay-button.stories.js +1934 -0
- package/dist/src/apple-pay-logo.d.ts +1 -0
- package/dist/src/apple-pay-logo.js +14 -0
- package/dist/src/apple-pay-modal.d.ts +12 -0
- package/dist/src/apple-pay-modal.js +442 -0
- package/dist/src/apple-pay-modal.stories.js +1778 -0
- package/dist/src/clients/payment-checkout/apple-session.d.ts +18 -0
- package/dist/src/clients/payment-checkout/apple-session.js +243 -0
- package/dist/src/clients/payment-checkout/billing-contact-details.d.ts +21 -0
- package/dist/src/clients/payment-checkout/billing-contact-details.js +109 -0
- package/dist/src/clients/payment-checkout/config.d.ts +9 -0
- package/dist/src/clients/payment-checkout/config.js +23 -0
- package/dist/src/clients/payment-checkout/contact-validation.d.ts +21 -0
- package/dist/src/clients/payment-checkout/contact-validation.js +50 -0
- package/dist/src/clients/payment-checkout/detects.d.ts +3 -0
- package/dist/src/clients/payment-checkout/detects.js +56 -0
- package/dist/src/clients/payment-checkout/index.d.ts +5 -0
- package/dist/src/clients/payment-checkout/index.js +83 -0
- package/dist/src/clients/payment-checkout/messages.d.ts +33 -0
- package/dist/src/clients/payment-checkout/messages.js +19 -0
- package/dist/src/clients/payment-checkout/payment-handler.d.ts +36 -0
- package/dist/src/clients/payment-checkout/payment-handler.js +389 -0
- package/dist/src/clients/payment-checkout/session.d.ts +2 -0
- package/dist/src/clients/payment-checkout/session.js +67 -0
- package/dist/src/clients/payment-checkout/shipping-contact-details.d.ts +10 -0
- package/dist/src/clients/payment-checkout/shipping-contact-details.js +83 -0
- package/dist/src/clients/payment-checkout/types.d.ts +118 -0
- package/dist/src/clients/payment-checkout/types.js +14 -0
- package/dist/src/index.d.ts +7 -0
- package/dist/src/index.js +1642 -0
- package/dist/src/stories/fixtures/offer.d.ts +2 -0
- package/dist/src/stories/fixtures/offer.js +28 -0
- package/dist/src/stories/utils/story-env.d.ts +11 -0
- package/dist/src/stories/utils/story-env.js +148 -0
- package/dist/src/types/html-template.d.js +0 -0
- package/dist/src/types/offer.types.d.ts +73 -0
- package/dist/src/types/offer.types.js +0 -0
- package/dist/src/utils/billing-countries.d.ts +19 -0
- package/dist/src/utils/billing-countries.js +263 -0
- package/dist/src/utils/define.d.ts +1 -0
- package/dist/src/utils/define.js +9 -0
- package/dist/src/utils/expressCheckoutRedirect.d.ts +55 -0
- package/dist/src/utils/expressCheckoutRedirect.js +46 -0
- package/dist/src/utils/expressCheckoutTracking.d.ts +64 -0
- package/dist/src/utils/expressCheckoutTracking.js +84 -0
- package/dist/src/utils/pricing.d.ts +1 -0
- package/dist/src/utils/pricing.js +60 -0
- package/dist/src/utils/recaptcha.d.ts +22 -0
- package/dist/src/utils/recaptcha.js +54 -0
- package/package.json +64 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Canonical user-facing error messages for the Apple Pay Express Checkout flow.
|
|
3
|
+
*
|
|
4
|
+
* All copy here is verified against sma-checkout (src/actions/constants/index.ts
|
|
5
|
+
* and handlers/create-on-payment-authorized-handler/) to ensure parity with the
|
|
6
|
+
* reference implementation. Update both repos if copy changes.
|
|
7
|
+
*/
|
|
8
|
+
/** Shown when a required Apple Pay contact field is absent. */
|
|
9
|
+
export declare const MSG_MISSING_REQUIRED_FIELD = "Missing required field";
|
|
10
|
+
/** Shown when the email address format is invalid (matches sma-checkout FormErrorMessages.EMAIL_WRONG_FORMAT). */
|
|
11
|
+
export declare const MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
|
|
12
|
+
/** Shown when the email address exceeds 80 characters (matches sma-checkout FormErrorMessages.MAX_80_CHARS). */
|
|
13
|
+
export declare const MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
|
|
14
|
+
/** Shown when the billing country is not in the supported list for the offer. */
|
|
15
|
+
export declare const MSG_UNSUPPORTED_BILLING_COUNTRY = "Billing country does not match offer price zone";
|
|
16
|
+
/**
|
|
17
|
+
* Generic fallback error shown to the user when merchant validation or the
|
|
18
|
+
* purchase call fails. Redirected as an inlineError on the checkout fallback page.
|
|
19
|
+
* Matches sma-checkout GENERIC_ERROR_MSG pattern.
|
|
20
|
+
*/
|
|
21
|
+
export declare const MSG_PAYMENT_GENERIC_ERROR = "Something went wrong. Please check your payment and billing details and try again or contact us.";
|
|
22
|
+
/**
|
|
23
|
+
* Shown when a reCAPTCHA security check fails.
|
|
24
|
+
* Matches sma-checkout reference: handlers/create-on-payment-authorized-handler/subscribe.
|
|
25
|
+
*/
|
|
26
|
+
export declare const MSG_RECAPTCHA_VALIDATION_FAILED = "Security check failed. Please try again.";
|
|
27
|
+
/**
|
|
28
|
+
* Shown when the BFF returns an EMAIL_COLLISION error (account already exists).
|
|
29
|
+
* Matches sma-checkout L103-104.
|
|
30
|
+
*/
|
|
31
|
+
export declare const MSG_EMAIL_COLLISION = "This email address is already linked to an account. Please log in, or try a different email address.";
|
|
32
|
+
/** Internal ContactValidationError message — not shown to the user directly. */
|
|
33
|
+
export declare const MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// src/clients/payment-checkout/messages.ts
|
|
2
|
+
var MSG_MISSING_REQUIRED_FIELD = "Missing required field";
|
|
3
|
+
var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
|
|
4
|
+
var MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
|
|
5
|
+
var MSG_UNSUPPORTED_BILLING_COUNTRY = "Billing country does not match offer price zone";
|
|
6
|
+
var MSG_PAYMENT_GENERIC_ERROR = "Something went wrong. Please check your payment and billing details and try again or contact us.";
|
|
7
|
+
var MSG_RECAPTCHA_VALIDATION_FAILED = "Security check failed. Please try again.";
|
|
8
|
+
var MSG_EMAIL_COLLISION = "This email address is already linked to an account. Please log in, or try a different email address.";
|
|
9
|
+
var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
|
|
10
|
+
export {
|
|
11
|
+
MSG_CONTACT_VALIDATION_INTERNAL,
|
|
12
|
+
MSG_EMAIL_COLLISION,
|
|
13
|
+
MSG_EMAIL_TOO_LONG,
|
|
14
|
+
MSG_EMAIL_WRONG_FORMAT,
|
|
15
|
+
MSG_MISSING_REQUIRED_FIELD,
|
|
16
|
+
MSG_PAYMENT_GENERIC_ERROR,
|
|
17
|
+
MSG_RECAPTCHA_VALIDATION_FAILED,
|
|
18
|
+
MSG_UNSUPPORTED_BILLING_COUNTRY
|
|
19
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Central onpaymentauthorized orchestrator.
|
|
3
|
+
*
|
|
4
|
+
* The BFF /v1/wallet/purchase orchestrates ALL backend logic:
|
|
5
|
+
* - Eligibility check
|
|
6
|
+
* - Passwordless user registration (if anonymous)
|
|
7
|
+
* - Basket creation
|
|
8
|
+
* - Payment finalization
|
|
9
|
+
*
|
|
10
|
+
* This handler is responsible for:
|
|
11
|
+
* 1. Local billing/shipping contact validation (keeps Apple Pay sheet open on error)
|
|
12
|
+
* 2. Calling the single /v1/wallet/purchase endpoint
|
|
13
|
+
* 3. Handling success → redirect to /checkout/complete
|
|
14
|
+
* 4. Handling structured BFF errors → deterministic UI actions per errorType
|
|
15
|
+
*/
|
|
16
|
+
import type { SessionResponse } from './types';
|
|
17
|
+
export type PaymentHandlerConfig = {
|
|
18
|
+
skuId: string;
|
|
19
|
+
country: string;
|
|
20
|
+
returnUrl: string;
|
|
21
|
+
/**
|
|
22
|
+
* Optional `&country=` query param captured from the page URL at the moment
|
|
23
|
+
* the payment sheet was authorised (via `buildQueryString()`).
|
|
24
|
+
* Appended verbatim to the checkout-complete and fallback redirect URLs so
|
|
25
|
+
* the country context is preserved across the redirect.
|
|
26
|
+
* e.g. `'&country=US'`, `'&country=GB%2FIE'`, or `''` when absent.
|
|
27
|
+
*/
|
|
28
|
+
queryString?: string;
|
|
29
|
+
supportedBillingCountries: string[];
|
|
30
|
+
recaptchaTokens: {
|
|
31
|
+
checkEligibility: string;
|
|
32
|
+
newBasket: string;
|
|
33
|
+
registerUser: string;
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
export declare function handlePaymentAuthorized(event: ApplePayJS.ApplePayPaymentAuthorizedEvent, session: ApplePaySession, sessionData: SessionResponse, config: PaymentHandlerConfig): Promise<void>;
|
|
@@ -0,0 +1,389 @@
|
|
|
1
|
+
// src/clients/payment-checkout/config.ts
|
|
2
|
+
var runtimeConfig = null;
|
|
3
|
+
var getApplePayConfig = () => runtimeConfig;
|
|
4
|
+
|
|
5
|
+
// src/clients/payment-checkout/types.ts
|
|
6
|
+
var ApiError = class extends Error {
|
|
7
|
+
status;
|
|
8
|
+
body;
|
|
9
|
+
constructor(status, body) {
|
|
10
|
+
super(`API request failed with status ${status}`);
|
|
11
|
+
this.name = "ApiError";
|
|
12
|
+
this.status = status;
|
|
13
|
+
this.body = body;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
// src/clients/payment-checkout/index.ts
|
|
18
|
+
var getWalletApiBaseUrl = () => {
|
|
19
|
+
const config = getApplePayConfig();
|
|
20
|
+
if (!config?.walletApiBaseUrl) {
|
|
21
|
+
throw new Error(
|
|
22
|
+
"[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
return config.walletApiBaseUrl;
|
|
26
|
+
};
|
|
27
|
+
var apiFetch = async (path, options = {}) => {
|
|
28
|
+
const baseUrl = getWalletApiBaseUrl();
|
|
29
|
+
const method = (options.method ?? "GET").toUpperCase();
|
|
30
|
+
const hasBody = options.body !== void 0 && options.body !== null;
|
|
31
|
+
const headers = new Headers(options.headers);
|
|
32
|
+
if (!headers.has("Accept")) {
|
|
33
|
+
headers.set("Accept", "application/json");
|
|
34
|
+
}
|
|
35
|
+
if (!headers.has("Content-Type")) {
|
|
36
|
+
if (hasBody || method !== "GET" && method !== "HEAD") {
|
|
37
|
+
headers.set("Content-Type", "application/json");
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
const response = await fetch(`${baseUrl}${path}`, {
|
|
41
|
+
...options,
|
|
42
|
+
headers
|
|
43
|
+
});
|
|
44
|
+
if (!response.ok) {
|
|
45
|
+
const contentType = response.headers.get("content-type") || "";
|
|
46
|
+
if (contentType.includes("application/json")) {
|
|
47
|
+
const errorBody = await response.json();
|
|
48
|
+
throw new ApiError(response.status, errorBody);
|
|
49
|
+
}
|
|
50
|
+
const errorText = await response.text();
|
|
51
|
+
throw new Error(
|
|
52
|
+
`API request failed: ${response.status} ${response.statusText} - ${errorText}`
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
return response.json();
|
|
56
|
+
};
|
|
57
|
+
var performPurchase = (data) => {
|
|
58
|
+
return apiFetch("/v1/wallet/purchase", {
|
|
59
|
+
method: "POST",
|
|
60
|
+
body: JSON.stringify(data),
|
|
61
|
+
credentials: "include"
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
// src/utils/expressCheckoutTracking.ts
|
|
66
|
+
var EXPRESS_CHECKOUT_EVENTS = {
|
|
67
|
+
/** Wallet button displayed */
|
|
68
|
+
IMPRESSION: "express_wallet_impression",
|
|
69
|
+
/** Wallet button clicked */
|
|
70
|
+
BUTTON_CLICK: "express_wallet_click",
|
|
71
|
+
/** Apple Pay sheet opened */
|
|
72
|
+
SHEET_OPEN: "wallet_payment_sheet_open",
|
|
73
|
+
/** Payment authorised by the user in the Apple Pay sheet */
|
|
74
|
+
AUTHORISED: "wallet_payment_authorised",
|
|
75
|
+
/** Purchase completed — BFF returned success */
|
|
76
|
+
SUCCESS: "wallet_payment_success",
|
|
77
|
+
/** Payment failed — BFF returned error */
|
|
78
|
+
FAILURE: "wallet_payment_failure",
|
|
79
|
+
/** Redirect to standard checkout (any fallback path) */
|
|
80
|
+
FALLBACK_CHECKOUT: "fallback_checkout"
|
|
81
|
+
};
|
|
82
|
+
var emitTedlEvent = (event) => {
|
|
83
|
+
window.tedl = window.tedl ?? {};
|
|
84
|
+
window.tedl.events = window.tedl.events ?? [];
|
|
85
|
+
window.tedl.events.push(event);
|
|
86
|
+
};
|
|
87
|
+
var track = (action, extra) => {
|
|
88
|
+
emitTedlEvent({
|
|
89
|
+
name: "user.journey",
|
|
90
|
+
type: "checkout",
|
|
91
|
+
action,
|
|
92
|
+
info: "applepay",
|
|
93
|
+
...extra
|
|
94
|
+
});
|
|
95
|
+
};
|
|
96
|
+
var trackWalletPaymentSuccess = (skuId, basketId) => {
|
|
97
|
+
track(EXPRESS_CHECKOUT_EVENTS.SUCCESS, {
|
|
98
|
+
sku_id: skuId,
|
|
99
|
+
basket_id: basketId
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
var trackWalletPaymentFailure = (skuId, reason) => {
|
|
103
|
+
track(EXPRESS_CHECKOUT_EVENTS.FAILURE, {
|
|
104
|
+
sku_id: skuId,
|
|
105
|
+
failure_reason: reason
|
|
106
|
+
});
|
|
107
|
+
};
|
|
108
|
+
var trackFallbackCheckout = (skuId) => {
|
|
109
|
+
track(EXPRESS_CHECKOUT_EVENTS.FALLBACK_CHECKOUT, { sku_id: skuId });
|
|
110
|
+
};
|
|
111
|
+
var trackValidationFieldError = (field, errorType) => {
|
|
112
|
+
track(`validation_${field}_${errorType}`, {});
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
// src/clients/payment-checkout/messages.ts
|
|
116
|
+
var MSG_MISSING_REQUIRED_FIELD = "Missing required field";
|
|
117
|
+
var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
|
|
118
|
+
var MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
|
|
119
|
+
var MSG_UNSUPPORTED_BILLING_COUNTRY = "Billing country does not match offer price zone";
|
|
120
|
+
var MSG_PAYMENT_GENERIC_ERROR = "Something went wrong. Please check your payment and billing details and try again or contact us.";
|
|
121
|
+
var MSG_RECAPTCHA_VALIDATION_FAILED = "Security check failed. Please try again.";
|
|
122
|
+
var MSG_EMAIL_COLLISION = "This email address is already linked to an account. Please log in, or try a different email address.";
|
|
123
|
+
var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
|
|
124
|
+
|
|
125
|
+
// src/clients/payment-checkout/contact-validation.ts
|
|
126
|
+
var pushFieldError = (errors, billingOrShippingContact = "billing", field, errorType, errorText) => {
|
|
127
|
+
const errorCode = billingOrShippingContact === "billing" ? "billingContactInvalid" : "shippingContactInvalid";
|
|
128
|
+
errors.push(new ApplePayError(errorCode, field, errorText));
|
|
129
|
+
trackValidationFieldError(field, errorType);
|
|
130
|
+
return "";
|
|
131
|
+
};
|
|
132
|
+
var pushRequiredFieldError = (errors, billingOrShippingContact = "billing", field) => {
|
|
133
|
+
return pushFieldError(
|
|
134
|
+
errors,
|
|
135
|
+
billingOrShippingContact,
|
|
136
|
+
field,
|
|
137
|
+
"required",
|
|
138
|
+
MSG_MISSING_REQUIRED_FIELD
|
|
139
|
+
);
|
|
140
|
+
};
|
|
141
|
+
var ContactValidationError = class extends Error {
|
|
142
|
+
constructor(errors) {
|
|
143
|
+
super(MSG_CONTACT_VALIDATION_INTERNAL);
|
|
144
|
+
this.errors = errors;
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
// src/clients/payment-checkout/billing-contact-details.ts
|
|
149
|
+
var countriesWithoutCityField = ["KY", "CK", "NR", "TC"];
|
|
150
|
+
var countriesRequiringAllFields = ["US", "CA", "GB"];
|
|
151
|
+
var resolveCountryConfig = (country) => {
|
|
152
|
+
const hasCityField = !countriesWithoutCityField.includes(country);
|
|
153
|
+
const requiresStateAndPostcode = countriesRequiringAllFields.includes(country);
|
|
154
|
+
return {
|
|
155
|
+
hasCityField,
|
|
156
|
+
requiresStateAndPostcode,
|
|
157
|
+
// if there is no city field, we require state and use it in place of city
|
|
158
|
+
requiresStateField: !hasCityField || requiresStateAndPostcode
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
var validateAddressFields = (errors, contact, { hasCityField, requiresStateAndPostcode, requiresStateField }) => {
|
|
162
|
+
const locality = !hasCityField ? contact.administrativeArea : contact.locality;
|
|
163
|
+
if (!contact.addressLines?.at(0)?.trim()) {
|
|
164
|
+
pushRequiredFieldError(errors, "billing", "addressLines");
|
|
165
|
+
}
|
|
166
|
+
if (!locality?.trim() && hasCityField) {
|
|
167
|
+
pushRequiredFieldError(errors, "billing", "locality");
|
|
168
|
+
}
|
|
169
|
+
if (!contact.administrativeArea?.trim() && requiresStateField) {
|
|
170
|
+
pushRequiredFieldError(errors, "billing", "administrativeArea");
|
|
171
|
+
}
|
|
172
|
+
if (!contact.postalCode?.trim() && requiresStateAndPostcode) {
|
|
173
|
+
pushRequiredFieldError(errors, "billing", "postalCode");
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
var validateNameFields = (errors, contact) => {
|
|
177
|
+
const firstName = contact.givenName?.trim() || "";
|
|
178
|
+
const lastName = contact.familyName?.trim() || "";
|
|
179
|
+
if (!firstName || !lastName) {
|
|
180
|
+
pushRequiredFieldError(errors, "billing", "name");
|
|
181
|
+
}
|
|
182
|
+
return { firstName, lastName };
|
|
183
|
+
};
|
|
184
|
+
var validateCountrySupport = (errors, country, supportedBillingCountries) => {
|
|
185
|
+
if (!supportedBillingCountries.includes(country)) {
|
|
186
|
+
pushFieldError(
|
|
187
|
+
errors,
|
|
188
|
+
"billing",
|
|
189
|
+
"countryCode",
|
|
190
|
+
"not-supported",
|
|
191
|
+
MSG_UNSUPPORTED_BILLING_COUNTRY
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
var billingContactDetails = (contact, supportedBillingCountries) => {
|
|
196
|
+
const errors = [];
|
|
197
|
+
const country = contact.countryCode?.toUpperCase() || pushRequiredFieldError(errors, "billing", "country");
|
|
198
|
+
const config = resolveCountryConfig(country);
|
|
199
|
+
validateAddressFields(errors, contact, config);
|
|
200
|
+
const { firstName, lastName } = validateNameFields(errors, contact);
|
|
201
|
+
validateCountrySupport(errors, country, supportedBillingCountries);
|
|
202
|
+
if (errors.length > 0) {
|
|
203
|
+
throw new ContactValidationError(errors);
|
|
204
|
+
}
|
|
205
|
+
return { firstName, lastName };
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
// src/clients/payment-checkout/shipping-contact-details.ts
|
|
209
|
+
var EMAIL_FORMAT_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
210
|
+
var shippingContactDetails = (shippingContact) => {
|
|
211
|
+
const errors = [];
|
|
212
|
+
let emailAddress = "";
|
|
213
|
+
if (shippingContact?.emailAddress === void 0 || shippingContact?.emailAddress === "") {
|
|
214
|
+
pushRequiredFieldError(errors, "shipping", "emailAddress");
|
|
215
|
+
} else {
|
|
216
|
+
emailAddress = shippingContact.emailAddress.trim();
|
|
217
|
+
if (emailAddress.length > 80) {
|
|
218
|
+
pushFieldError(
|
|
219
|
+
errors,
|
|
220
|
+
"shipping",
|
|
221
|
+
"emailAddress",
|
|
222
|
+
"format",
|
|
223
|
+
MSG_EMAIL_TOO_LONG
|
|
224
|
+
);
|
|
225
|
+
} else if (!EMAIL_FORMAT_REGEX.test(emailAddress)) {
|
|
226
|
+
pushFieldError(
|
|
227
|
+
errors,
|
|
228
|
+
"shipping",
|
|
229
|
+
"emailAddress",
|
|
230
|
+
"format",
|
|
231
|
+
MSG_EMAIL_WRONG_FORMAT
|
|
232
|
+
);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
if (errors.length > 0) {
|
|
236
|
+
throw new ContactValidationError(errors);
|
|
237
|
+
}
|
|
238
|
+
return { emailAddress };
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
// src/utils/expressCheckoutRedirect.ts
|
|
242
|
+
var decodeSku = (sku) => {
|
|
243
|
+
try {
|
|
244
|
+
return atob(sku.substring(sku.indexOf("-") + 1));
|
|
245
|
+
} catch {
|
|
246
|
+
return sku;
|
|
247
|
+
}
|
|
248
|
+
};
|
|
249
|
+
var redirectToCheckoutComplete = (params) => {
|
|
250
|
+
const url = new URL("/checkout/complete", window.location.origin);
|
|
251
|
+
url.searchParams.set("basketId", params.basketId);
|
|
252
|
+
if (params.queryString) {
|
|
253
|
+
const qs = params.queryString.startsWith("?") ? params.queryString.slice(1) : params.queryString;
|
|
254
|
+
new URLSearchParams(qs).forEach((v, k) => url.searchParams.set(k, v));
|
|
255
|
+
}
|
|
256
|
+
url.searchParams.set("lmo_offer", params.skuId);
|
|
257
|
+
url.searchParams.set("status", params.status);
|
|
258
|
+
url.searchParams.set("redirectToCheckout", "true");
|
|
259
|
+
url.searchParams.set("returnUrl", params.returnUrl);
|
|
260
|
+
return url.pathname + url.search;
|
|
261
|
+
};
|
|
262
|
+
var redirectToCheckoutFallback = (params) => {
|
|
263
|
+
const url = new URL(window.location.href);
|
|
264
|
+
url.pathname = "/checkout";
|
|
265
|
+
url.searchParams.set("lmo_offer", params.skuId);
|
|
266
|
+
if (params.inlineError)
|
|
267
|
+
url.searchParams.set("inlineError", params.inlineError);
|
|
268
|
+
if (params.email) url.searchParams.set("email", params.email);
|
|
269
|
+
if (params.emailError) url.searchParams.set("emailError", params.emailError);
|
|
270
|
+
url.searchParams.set("returnUrl", params.returnUrl);
|
|
271
|
+
return url.pathname + url.search;
|
|
272
|
+
};
|
|
273
|
+
|
|
274
|
+
// src/clients/payment-checkout/payment-handler.ts
|
|
275
|
+
var MSG_ELIGIBILITY = "Something went wrong, please try again";
|
|
276
|
+
var MSG_REGISTRATION = "We couldn't create your account. Please enter your email or try a different login method.";
|
|
277
|
+
var failApplePaySession = (session, errors = []) => {
|
|
278
|
+
session.completePayment({
|
|
279
|
+
status: ApplePaySession.STATUS_FAILURE,
|
|
280
|
+
errors
|
|
281
|
+
});
|
|
282
|
+
};
|
|
283
|
+
function parseWalletApiError(err) {
|
|
284
|
+
const body = err instanceof ApiError ? err.body : err;
|
|
285
|
+
if (body && typeof body === "object" && "errorType" in body && "message" in body) {
|
|
286
|
+
return body;
|
|
287
|
+
}
|
|
288
|
+
return null;
|
|
289
|
+
}
|
|
290
|
+
function validateContacts(event, sessionData, supportedBillingCountries) {
|
|
291
|
+
billingContactDetails(
|
|
292
|
+
event.payment.billingContact,
|
|
293
|
+
supportedBillingCountries
|
|
294
|
+
);
|
|
295
|
+
if (!sessionData.loggedIn) {
|
|
296
|
+
return shippingContactDetails(event.payment.shippingContact).emailAddress;
|
|
297
|
+
}
|
|
298
|
+
return void 0;
|
|
299
|
+
}
|
|
300
|
+
function redirectFallback(skuId, returnUrl, options) {
|
|
301
|
+
trackFallbackCheckout(skuId);
|
|
302
|
+
window.location.href = redirectToCheckoutFallback({
|
|
303
|
+
skuId,
|
|
304
|
+
returnUrl,
|
|
305
|
+
...options
|
|
306
|
+
});
|
|
307
|
+
}
|
|
308
|
+
var ERROR_HANDLERS = {
|
|
309
|
+
EMAIL_COLLISION: ({ skuId, returnUrl, validatedEmail }) => redirectFallback(skuId, returnUrl, {
|
|
310
|
+
emailError: MSG_EMAIL_COLLISION,
|
|
311
|
+
email: validatedEmail
|
|
312
|
+
}),
|
|
313
|
+
PAYMENT_DECLINED: ({ skuId, returnUrl }) => (
|
|
314
|
+
// Matches sma-checkout catch-all: always redirect with generic inlineError.
|
|
315
|
+
redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR })
|
|
316
|
+
),
|
|
317
|
+
ELIGIBILITY_REJECTED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_ELIGIBILITY }),
|
|
318
|
+
REGISTRATION_FAILED: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_REGISTRATION }),
|
|
319
|
+
VALIDATION_ERROR: ({ skuId, returnUrl }) => redirectFallback(skuId, returnUrl, { inlineError: MSG_RECAPTCHA_VALIDATION_FAILED })
|
|
320
|
+
};
|
|
321
|
+
function handleStructuredError(ctx) {
|
|
322
|
+
const handler = ERROR_HANDLERS[ctx.walletError.errorType];
|
|
323
|
+
if (handler) {
|
|
324
|
+
handler(ctx);
|
|
325
|
+
} else {
|
|
326
|
+
redirectFallback(ctx.skuId, ctx.returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
async function handlePaymentAuthorized(event, session, sessionData, config) {
|
|
330
|
+
const { skuId, returnUrl, queryString } = config;
|
|
331
|
+
let validatedEmail;
|
|
332
|
+
console.log("[web-apple-pay] handlePaymentAuthorized: starting", { skuId, userLoggedIn: sessionData.loggedIn });
|
|
333
|
+
try {
|
|
334
|
+
console.log("[web-apple-pay] handlePaymentAuthorized: step 1 \u2014 validating contacts");
|
|
335
|
+
validatedEmail = validateContacts(
|
|
336
|
+
event,
|
|
337
|
+
sessionData,
|
|
338
|
+
config.supportedBillingCountries
|
|
339
|
+
);
|
|
340
|
+
console.log("[web-apple-pay] handlePaymentAuthorized: contacts valid", { validatedEmail });
|
|
341
|
+
console.log("[web-apple-pay] handlePaymentAuthorized: step 2 \u2014 calling performPurchase", { skuId });
|
|
342
|
+
const result = await performPurchase({
|
|
343
|
+
applePayToken: event.payment.token,
|
|
344
|
+
skuId: config.skuId,
|
|
345
|
+
billingContact: event.payment.billingContact,
|
|
346
|
+
...event.payment.shippingContact && {
|
|
347
|
+
shippingContact: event.payment.shippingContact
|
|
348
|
+
},
|
|
349
|
+
recaptchaTokens: config.recaptchaTokens
|
|
350
|
+
});
|
|
351
|
+
console.log("[web-apple-pay] handlePaymentAuthorized: performPurchase succeeded", { basketId: result.basketId });
|
|
352
|
+
console.log("[web-apple-pay] handlePaymentAuthorized: step 3 \u2014 completing payment and redirecting");
|
|
353
|
+
trackWalletPaymentSuccess(skuId, result.basketId);
|
|
354
|
+
session.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
|
|
355
|
+
const userStatus = sessionData.loggedIn ? "lex" : "nex";
|
|
356
|
+
window.location.href = redirectToCheckoutComplete({
|
|
357
|
+
basketId: result.basketId,
|
|
358
|
+
status: userStatus,
|
|
359
|
+
skuId: decodeSku(skuId),
|
|
360
|
+
returnUrl,
|
|
361
|
+
queryString
|
|
362
|
+
});
|
|
363
|
+
} catch (err) {
|
|
364
|
+
if (err instanceof ContactValidationError) {
|
|
365
|
+
console.warn("[web-apple-pay] handlePaymentAuthorized: contact validation failed", err.errors);
|
|
366
|
+
failApplePaySession(session, err.errors);
|
|
367
|
+
return;
|
|
368
|
+
}
|
|
369
|
+
console.error("[web-apple-pay] onpaymentauthorized error", { skuId, err });
|
|
370
|
+
const walletError = parseWalletApiError(err);
|
|
371
|
+
console.error("[web-apple-pay] handlePaymentAuthorized: BFF/network error", {
|
|
372
|
+
skuId,
|
|
373
|
+
errorType: walletError?.errorType ?? "UNKNOWN",
|
|
374
|
+
message: walletError?.message
|
|
375
|
+
});
|
|
376
|
+
trackWalletPaymentFailure(skuId, walletError?.errorType ?? "UNKNOWN");
|
|
377
|
+
failApplePaySession(session);
|
|
378
|
+
if (!walletError) {
|
|
379
|
+
console.warn("[web-apple-pay] handlePaymentAuthorized: unstructured error, using generic fallback");
|
|
380
|
+
redirectFallback(skuId, returnUrl, { inlineError: MSG_PAYMENT_GENERIC_ERROR });
|
|
381
|
+
return;
|
|
382
|
+
}
|
|
383
|
+
console.log("[web-apple-pay] handlePaymentAuthorized: dispatching structured error handler", { errorType: walletError.errorType });
|
|
384
|
+
handleStructuredError({ skuId, returnUrl, validatedEmail, walletError });
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
export {
|
|
388
|
+
handlePaymentAuthorized
|
|
389
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
// src/clients/payment-checkout/config.ts
|
|
2
|
+
var runtimeConfig = null;
|
|
3
|
+
var getApplePayConfig = () => runtimeConfig;
|
|
4
|
+
|
|
5
|
+
// src/clients/payment-checkout/types.ts
|
|
6
|
+
var ApiError = class extends Error {
|
|
7
|
+
status;
|
|
8
|
+
body;
|
|
9
|
+
constructor(status, body) {
|
|
10
|
+
super(`API request failed with status ${status}`);
|
|
11
|
+
this.name = "ApiError";
|
|
12
|
+
this.status = status;
|
|
13
|
+
this.body = body;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
// src/clients/payment-checkout/index.ts
|
|
18
|
+
var getWalletApiBaseUrl = () => {
|
|
19
|
+
const config = getApplePayConfig();
|
|
20
|
+
if (!config?.walletApiBaseUrl) {
|
|
21
|
+
throw new Error(
|
|
22
|
+
"[web-apple-pay] Missing walletApiBaseUrl. Call configureApplePay({ merchantId, walletApiBaseUrl, ... }) before making wallet API requests."
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
return config.walletApiBaseUrl;
|
|
26
|
+
};
|
|
27
|
+
var apiFetch = async (path, options = {}) => {
|
|
28
|
+
const baseUrl = getWalletApiBaseUrl();
|
|
29
|
+
const method = (options.method ?? "GET").toUpperCase();
|
|
30
|
+
const hasBody = options.body !== void 0 && options.body !== null;
|
|
31
|
+
const headers = new Headers(options.headers);
|
|
32
|
+
if (!headers.has("Accept")) {
|
|
33
|
+
headers.set("Accept", "application/json");
|
|
34
|
+
}
|
|
35
|
+
if (!headers.has("Content-Type")) {
|
|
36
|
+
if (hasBody || method !== "GET" && method !== "HEAD") {
|
|
37
|
+
headers.set("Content-Type", "application/json");
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
const response = await fetch(`${baseUrl}${path}`, {
|
|
41
|
+
...options,
|
|
42
|
+
headers
|
|
43
|
+
});
|
|
44
|
+
if (!response.ok) {
|
|
45
|
+
const contentType = response.headers.get("content-type") || "";
|
|
46
|
+
if (contentType.includes("application/json")) {
|
|
47
|
+
const errorBody = await response.json();
|
|
48
|
+
throw new ApiError(response.status, errorBody);
|
|
49
|
+
}
|
|
50
|
+
const errorText = await response.text();
|
|
51
|
+
throw new Error(
|
|
52
|
+
`API request failed: ${response.status} ${response.statusText} - ${errorText}`
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
return response.json();
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
// src/clients/payment-checkout/session.ts
|
|
59
|
+
var getExpressCheckoutSession = () => {
|
|
60
|
+
return apiFetch("/v1/wallet/session", {
|
|
61
|
+
method: "GET",
|
|
62
|
+
credentials: "include"
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
export {
|
|
66
|
+
getExpressCheckoutSession
|
|
67
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Apple Pay shipping contact local validator.
|
|
3
|
+
* Ported from sma-checkout — handlers/create-on-payment-authorized-handler/subscribe/shipping-contact-details.ts
|
|
4
|
+
*
|
|
5
|
+
* Validates the shipping contact's email address if present.
|
|
6
|
+
*/
|
|
7
|
+
export type ShippingValidationResult = {
|
|
8
|
+
emailAddress: string;
|
|
9
|
+
};
|
|
10
|
+
export declare const shippingContactDetails: (shippingContact: ApplePayJS.ApplePayPaymentContact | undefined) => ShippingValidationResult;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
// src/utils/expressCheckoutTracking.ts
|
|
2
|
+
var emitTedlEvent = (event) => {
|
|
3
|
+
window.tedl = window.tedl ?? {};
|
|
4
|
+
window.tedl.events = window.tedl.events ?? [];
|
|
5
|
+
window.tedl.events.push(event);
|
|
6
|
+
};
|
|
7
|
+
var track = (action, extra) => {
|
|
8
|
+
emitTedlEvent({
|
|
9
|
+
name: "user.journey",
|
|
10
|
+
type: "checkout",
|
|
11
|
+
action,
|
|
12
|
+
info: "applepay",
|
|
13
|
+
...extra
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var trackValidationFieldError = (field, errorType) => {
|
|
17
|
+
track(`validation_${field}_${errorType}`, {});
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// src/clients/payment-checkout/messages.ts
|
|
21
|
+
var MSG_MISSING_REQUIRED_FIELD = "Missing required field";
|
|
22
|
+
var MSG_EMAIL_WRONG_FORMAT = "That email doesn\u2019t look right. Please enter a valid email address.";
|
|
23
|
+
var MSG_EMAIL_TOO_LONG = "This field must be 80 characters or less.";
|
|
24
|
+
var MSG_CONTACT_VALIDATION_INTERNAL = "Could not validate Apple Pay contact";
|
|
25
|
+
|
|
26
|
+
// src/clients/payment-checkout/contact-validation.ts
|
|
27
|
+
var pushFieldError = (errors, billingOrShippingContact = "billing", field, errorType, errorText) => {
|
|
28
|
+
const errorCode = billingOrShippingContact === "billing" ? "billingContactInvalid" : "shippingContactInvalid";
|
|
29
|
+
errors.push(new ApplePayError(errorCode, field, errorText));
|
|
30
|
+
trackValidationFieldError(field, errorType);
|
|
31
|
+
return "";
|
|
32
|
+
};
|
|
33
|
+
var pushRequiredFieldError = (errors, billingOrShippingContact = "billing", field) => {
|
|
34
|
+
return pushFieldError(
|
|
35
|
+
errors,
|
|
36
|
+
billingOrShippingContact,
|
|
37
|
+
field,
|
|
38
|
+
"required",
|
|
39
|
+
MSG_MISSING_REQUIRED_FIELD
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
var ContactValidationError = class extends Error {
|
|
43
|
+
constructor(errors) {
|
|
44
|
+
super(MSG_CONTACT_VALIDATION_INTERNAL);
|
|
45
|
+
this.errors = errors;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
// src/clients/payment-checkout/shipping-contact-details.ts
|
|
50
|
+
var EMAIL_FORMAT_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
51
|
+
var shippingContactDetails = (shippingContact) => {
|
|
52
|
+
const errors = [];
|
|
53
|
+
let emailAddress = "";
|
|
54
|
+
if (shippingContact?.emailAddress === void 0 || shippingContact?.emailAddress === "") {
|
|
55
|
+
pushRequiredFieldError(errors, "shipping", "emailAddress");
|
|
56
|
+
} else {
|
|
57
|
+
emailAddress = shippingContact.emailAddress.trim();
|
|
58
|
+
if (emailAddress.length > 80) {
|
|
59
|
+
pushFieldError(
|
|
60
|
+
errors,
|
|
61
|
+
"shipping",
|
|
62
|
+
"emailAddress",
|
|
63
|
+
"format",
|
|
64
|
+
MSG_EMAIL_TOO_LONG
|
|
65
|
+
);
|
|
66
|
+
} else if (!EMAIL_FORMAT_REGEX.test(emailAddress)) {
|
|
67
|
+
pushFieldError(
|
|
68
|
+
errors,
|
|
69
|
+
"shipping",
|
|
70
|
+
"emailAddress",
|
|
71
|
+
"format",
|
|
72
|
+
MSG_EMAIL_WRONG_FORMAT
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
if (errors.length > 0) {
|
|
77
|
+
throw new ContactValidationError(errors);
|
|
78
|
+
}
|
|
79
|
+
return { emailAddress };
|
|
80
|
+
};
|
|
81
|
+
export {
|
|
82
|
+
shippingContactDetails
|
|
83
|
+
};
|