@amos.com/amos-js 0.3.24 → 0.4.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/README.md +3 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +56 -41
- package/dist/mount.d.ts +15 -3
- package/dist/payment-method-form.d.ts +18 -7
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/mount.ts +32 -7
- package/src/payment-method-form.ts +58 -9
package/README.md
CHANGED
|
@@ -232,6 +232,7 @@ Mount the secure credit-card payment method form into a container element (an `H
|
|
|
232
232
|
|
|
233
233
|
- `appearance` (`{ themeVariables?: Partial<Record<ThemeVariable, string>>; labels?: "above" | "floating" | "placeholder" }`)
|
|
234
234
|
- `additionalFields` (`{ cardholderName: boolean }`, defaults to `{ cardholderName: false }`)
|
|
235
|
+
- `billingAddressRequirement` (`"country" | "full"`, defaults to `"country"`) — how much billing address the iframe collects. `country` collects country / region and, for CA / PR / GB / US, a postal code (labeled ZIP for the United States). `full` shows a full street address form with Smarty autocomplete.
|
|
235
236
|
- `onPaymentIntentConfirmationSucceeded` (`(paymentIntent: components["schemas"]["PaymentIntent"]) => void`)
|
|
236
237
|
- `onSetupIntentConfirmationSucceeded` (`(setupIntent: components["schemas"]["SetupIntent"]) => void`)
|
|
237
238
|
- `onHeightChange`, `onAppearanceReady` (advanced — override the default iframe styling logic)
|
|
@@ -244,7 +245,7 @@ Mount the secure credit-card payment method form into a container element (an `H
|
|
|
244
245
|
|
|
245
246
|
### `mountAmosBankAccountPaymentMethodForm(container, options)`
|
|
246
247
|
|
|
247
|
-
Same shape as `mountAmosCreditCardPaymentMethodForm`, minus `additionalFields`.
|
|
248
|
+
Same shape as `mountAmosCreditCardPaymentMethodForm`, minus `additionalFields`. Supports the same `billingAddressRequirement` option.
|
|
248
249
|
|
|
249
250
|
### `mountAmosGooglePayButton(container, options)`
|
|
250
251
|
|
|
@@ -283,7 +284,7 @@ This is what `@amos.com/react-amos-js` uses to integrate with React's rendering
|
|
|
283
284
|
|
|
284
285
|
The Google Pay equivalent of `attachPaymentMethodFormListeners`.
|
|
285
286
|
|
|
286
|
-
### `getCreditCardFormSrc(renderToken, additionalFields?)` / `getBankAccountFormSrc(renderToken)` / `getGooglePayButtonSrc(renderToken)`
|
|
287
|
+
### `getCreditCardFormSrc(renderToken, additionalFields?, billingAddressRequirement?)` / `getBankAccountFormSrc(renderToken, billingAddressRequirement?)` / `getGooglePayButtonSrc(renderToken)`
|
|
287
288
|
|
|
288
289
|
Build the iframe `src` URL for each form type.
|
|
289
290
|
|
package/dist/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export { decodeJwt, getEmbedOrigin } from './jwt';
|
|
|
5
5
|
export { confirmPaymentIntent, confirmSetupIntent, sendConfirmationFailed, sendParentReadyMessage, updateAmount, updateAppearance, updateMerchantName, validateForm, } from './messaging';
|
|
6
6
|
export type { AmosBankAccountPaymentMethodFormOptions, AmosCreditCardPaymentMethodFormOptions, AmosGooglePayButtonMountController, AmosGooglePayButtonOptions, AmosPaymentMethodFormMountController, } from './mount';
|
|
7
7
|
export { mountAmosBankAccountPaymentMethodForm, mountAmosCreditCardPaymentMethodForm, mountAmosGooglePayButton, } from './mount';
|
|
8
|
-
export type { CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions, } from './payment-method-form';
|
|
8
|
+
export type { BillingAddressRequirement, CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions, } from './payment-method-form';
|
|
9
9
|
export { attachPaymentMethodFormListeners, getBankAccountFormInitialHeight, getBankAccountFormSrc, getCreditCardFormInitialHeight, getCreditCardFormSrc, } from './payment-method-form';
|
|
10
10
|
export type { Appearance, AppearanceLabels, Message, ThemeVariable, } from './types';
|
|
11
11
|
export { createMessage } from './types';
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){let[t=``,n=``,r=``]=e?.split(`.`)??[],i=typeof atob==`function`?atob:e=>Buffer.from(e,`base64`).toString(`utf8`);return{header:JSON.parse(i(t)),payload:JSON.parse(i(n)),signature:r}}function t(t){let{env:n=`sandbox`}=e(t).payload;switch(n){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function n(e){return e}function r(e){e?.contentWindow?.postMessage(n({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),`*`)}function i({iframe:e,appearance:t={}}){e?.contentWindow?.postMessage(n({type:`UPDATE_APPEARANCE`,appearance:t}),`*`)}function a({iframe:e,amount:t}){e?.contentWindow?.postMessage(n({type:`UPDATE_AMOUNT`,amount:t}),`*`)}function o({iframe:e,merchantName:t}){e?.contentWindow?.postMessage(n({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),`*`)}function s({iframe:e}){let t=crypto.randomUUID();return new Promise(r=>{e?.contentWindow?.postMessage(n({type:`VALIDATE_FORM`,requestId:t}),`*`);let i=setTimeout(()=>{window.removeEventListener(`message`,a),r(!1)},5e3);function a(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,a),clearTimeout(i),r(e.data.isValid??!1))}window.addEventListener(`message`,a)})}function c({iframe:t,token:r}){let{payment_intent_id:i}=e(r).payload;t?.contentWindow?.postMessage(n({type:`CONFIRM_PAYMENT_INTENT`,token:r,id:i??void 0}),`*`)}function l({iframe:t,token:r}){let{setup_intent_id:i}=e(r).payload;t?.contentWindow?.postMessage(n({type:`CONFIRM_SETUP_INTENT`,token:r,id:i??void 0}),`*`)}function u({iframe:e,errorMessage:t}){e?.contentWindow?.postMessage(n({type:`CONFIRMATION_FAILED`,errorMessage:t}),`*`)}function d(e){return`${t(e)}/iframe/google-pay?token=${e}`}function f(){return`40px`}function p(e,t){let n={...t};function s(){a({iframe:e,amount:n.amount})}function l(){o({iframe:e,merchantName:n.merchantName})}function d(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance}),s(),l();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:i({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`CREATE_PAYMENT_INTENT`:n.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:t.data.paymentIntentCreateAttributes,customerCreateAttributes:t.data.customerCreateAttributes}).then(t=>{c({iframe:e,token:t})}).catch(t=>{u({iframe:e,errorMessage:t instanceof Error?t.message:`Unknown error`})});break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded(t.data.paymentIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,d),{update(t){let r=`appearance`in t,a=`amount`in t,o=`merchantName`in t;n={...n,...t},r&&i({iframe:e,appearance:n.appearance}),a&&s(),o&&l()},destroy(){window.removeEventListener(`message`,d)}}}function m({paymentData:e}){return{paymentMethod:{type:`googlepay`,billing_address_attributes:{name:e.shippingAddress?.name,address_line1:e.shippingAddress?.address1,address_line2:e.shippingAddress?.address2,city:e.shippingAddress?.locality,state:e.shippingAddress?.administrativeArea,postal_code:e.shippingAddress?.postalCode,country:e.shippingAddress?.countryCode,email:e.email,phone:e.shippingAddress?.phoneNumber},card_profile_attributes:{wallet_provider:`googlepay`,wallet_payload:e.paymentMethodData.tokenizationData.token,wallet_last4:e.paymentMethodData.info?.cardDetails,wallet_brand:(()=>{switch(e.paymentMethodData.info?.cardNetwork){case`AMEX`:return`american_express`;case`VISA`:return`visa`;case`MASTERCARD`:return`master`;case`DISCOVER`:return`discover`;default:return}})()}}}}function
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(e){let[t=``,n=``,r=``]=e?.split(`.`)??[],i=typeof atob==`function`?atob:e=>Buffer.from(e,`base64`).toString(`utf8`);return{header:JSON.parse(i(t)),payload:JSON.parse(i(n)),signature:r}}function t(t){let{env:n=`sandbox`}=e(t).payload;switch(n){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function n(e){return e}function r(e){e?.contentWindow?.postMessage(n({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),`*`)}function i({iframe:e,appearance:t={}}){e?.contentWindow?.postMessage(n({type:`UPDATE_APPEARANCE`,appearance:t}),`*`)}function a({iframe:e,amount:t}){e?.contentWindow?.postMessage(n({type:`UPDATE_AMOUNT`,amount:t}),`*`)}function o({iframe:e,merchantName:t}){e?.contentWindow?.postMessage(n({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),`*`)}function s({iframe:e}){let t=crypto.randomUUID();return new Promise(r=>{e?.contentWindow?.postMessage(n({type:`VALIDATE_FORM`,requestId:t}),`*`);let i=setTimeout(()=>{window.removeEventListener(`message`,a),r(!1)},5e3);function a(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,a),clearTimeout(i),r(e.data.isValid??!1))}window.addEventListener(`message`,a)})}function c({iframe:t,token:r}){let{payment_intent_id:i}=e(r).payload;t?.contentWindow?.postMessage(n({type:`CONFIRM_PAYMENT_INTENT`,token:r,id:i??void 0}),`*`)}function l({iframe:t,token:r}){let{setup_intent_id:i}=e(r).payload;t?.contentWindow?.postMessage(n({type:`CONFIRM_SETUP_INTENT`,token:r,id:i??void 0}),`*`)}function u({iframe:e,errorMessage:t}){e?.contentWindow?.postMessage(n({type:`CONFIRMATION_FAILED`,errorMessage:t}),`*`)}function d(e){return`${t(e)}/iframe/google-pay?token=${e}`}function f(){return`40px`}function p(e,t){let n={...t};function s(){a({iframe:e,amount:n.amount})}function l(){o({iframe:e,merchantName:n.merchantName})}function d(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance}),s(),l();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:i({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`CREATE_PAYMENT_INTENT`:n.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:t.data.paymentIntentCreateAttributes,customerCreateAttributes:t.data.customerCreateAttributes}).then(t=>{c({iframe:e,token:t})}).catch(t=>{u({iframe:e,errorMessage:t instanceof Error?t.message:`Unknown error`})});break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded(t.data.paymentIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,d),{update(t){let r=`appearance`in t,a=`amount`in t,o=`merchantName`in t;n={...n,...t},r&&i({iframe:e,appearance:n.appearance}),a&&s(),o&&l()},destroy(){window.removeEventListener(`message`,d)}}}function m({paymentData:e}){return{paymentMethod:{type:`googlepay`,billing_address_attributes:{name:e.shippingAddress?.name,address_line1:e.shippingAddress?.address1,address_line2:e.shippingAddress?.address2,city:e.shippingAddress?.locality,state:e.shippingAddress?.administrativeArea,postal_code:e.shippingAddress?.postalCode,country:e.shippingAddress?.countryCode,email:e.email,phone:e.shippingAddress?.phoneNumber},card_profile_attributes:{wallet_provider:`googlepay`,wallet_payload:e.paymentMethodData.tokenizationData.token,wallet_last4:e.paymentMethodData.info?.cardDetails,wallet_brand:(()=>{switch(e.paymentMethodData.info?.cardNetwork){case`AMEX`:return`american_express`;case`VISA`:return`visa`;case`MASTERCARD`:return`master`;case`DISCOVER`:return`discover`;default:return}})()}}}}var h={country:212,full:452},g=80,_={country:400,full:640};function v(e,n={cardholderName:!1},r=`country`){let i=Object.entries(n).filter(([,e])=>e).map(([e])=>e).join(`,`),a=new URLSearchParams({token:e,additionalFields:i,billingAddressRequirement:r});return`${t(e)}/iframe/card?${a}`}function y(e,n=`country`){let r=new URLSearchParams({token:e,billingAddressRequirement:n});return`${t(e)}/iframe/bank?${r}`}function b(e={cardholderName:!1},t=`country`){return`${(h[t]??h.country)+(e.cardholderName?g:0)}px`}function x(e=`country`){return`${_[e]??_.country}px`}function S(e,t){let n={...t};function a(t){switch(t.data.type){case`IFRAME_READY`:r(e),i({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:i({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`PAYMENT_INTENT_CONFIRMATION_SUCCEEDED`:n.onPaymentIntentConfirmationSucceeded?.(t.data.paymentIntent);break;case`SETUP_INTENT_CONFIRMATION_SUCCEEDED`:n.onSetupIntentConfirmationSucceeded?.(t.data.setupIntent);break;case`CONFIRMATION_FAILED`:n.onConfirmationFailed(t.data.errorMessage);break}}return window.addEventListener(`message`,a),{update(t){let r=`appearance`in t;n={...n,...t},r&&i({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,a)}}}function C(e){if(typeof e==`string`){let t=document.querySelector(e);if(!(t instanceof HTMLElement))throw Error(`[amos-js] Container "${e}" did not match any HTMLElement.`);return t}return e}var w={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function T({src:e,title:t,name:n,height:r,allow:i}){let a=document.createElement(`iframe`);return a.src=e,a.title=t,a.name=n,a.setAttribute(`role`,`presentation`),a.scrolling=`no`,i&&(a.allow=i),Object.assign(a.style,w,{height:r}),a}function E(e,t){let n=C(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t,s=T({src:v(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:b(i,a)});n.appendChild(s);let c=S(s,{...o,onHeightChange:e=>{s.style.height=e,o.onHeightChange?.(e)},onAppearanceReady:()=>{s.style.opacity=`1`,o.onAppearanceReady?.()}});return{iframe:s,update:c.update,destroy(){c.destroy(),s.remove()}}}function D(e,t){let n=C(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t,o=T({src:y(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:x(i)});n.appendChild(o);let s=S(o,{...a,onHeightChange:e=>{o.style.height=e,a.onHeightChange?.(e)},onAppearanceReady:()=>{o.style.opacity=`1`,a.onAppearanceReady?.()}});return{iframe:o,update:s.update,destroy(){s.destroy(),o.remove()}}}function O(e,t){let n=C(e),{renderToken:r,...i}=t,a=T({src:d(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:f(),allow:`payment`});n.appendChild(a);let o=p(a,{...i,onHeightChange:e=>{a.style.height=e,i.onHeightChange?.(e)},onAppearanceReady:()=>{a.style.opacity=`1`,i.onAppearanceReady?.()}});return{iframe:a,update:o.update,destroy(){o.destroy(),a.remove()}}}exports.attachGooglePayButtonListeners=p,exports.attachPaymentMethodFormListeners=S,exports.confirmPaymentIntent=c,exports.confirmSetupIntent=l,exports.createMessage=n,exports.decodeJwt=e,exports.formatGooglePayPaymentData=m,exports.getBankAccountFormInitialHeight=x,exports.getBankAccountFormSrc=y,exports.getCreditCardFormInitialHeight=b,exports.getCreditCardFormSrc=v,exports.getEmbedOrigin=t,exports.getGooglePayButtonInitialHeight=f,exports.getGooglePayButtonSrc=d,exports.mountAmosBankAccountPaymentMethodForm=D,exports.mountAmosCreditCardPaymentMethodForm=E,exports.mountAmosGooglePayButton=O,exports.sendConfirmationFailed=u,exports.sendParentReadyMessage=r,exports.updateAmount=a,exports.updateAppearance=i,exports.updateMerchantName=o,exports.validateForm=s;
|
package/dist/index.mjs
CHANGED
|
@@ -195,20 +195,35 @@ function m({ paymentData: e }) {
|
|
|
195
195
|
}
|
|
196
196
|
//#endregion
|
|
197
197
|
//#region src/payment-method-form.ts
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
198
|
+
var h = {
|
|
199
|
+
country: 212,
|
|
200
|
+
full: 452
|
|
201
|
+
}, g = 80, _ = {
|
|
202
|
+
country: 400,
|
|
203
|
+
full: 640
|
|
204
|
+
};
|
|
205
|
+
function v(e, n = { cardholderName: !1 }, r = "country") {
|
|
206
|
+
let i = Object.entries(n).filter(([, e]) => e).map(([e]) => e).join(","), a = new URLSearchParams({
|
|
207
|
+
token: e,
|
|
208
|
+
additionalFields: i,
|
|
209
|
+
billingAddressRequirement: r
|
|
210
|
+
});
|
|
211
|
+
return `${t(e)}/iframe/card?${a}`;
|
|
201
212
|
}
|
|
202
|
-
function
|
|
203
|
-
|
|
213
|
+
function y(e, n = "country") {
|
|
214
|
+
let r = new URLSearchParams({
|
|
215
|
+
token: e,
|
|
216
|
+
billingAddressRequirement: n
|
|
217
|
+
});
|
|
218
|
+
return `${t(e)}/iframe/bank?${r}`;
|
|
204
219
|
}
|
|
205
|
-
function
|
|
206
|
-
return e.cardholderName ?
|
|
220
|
+
function b(e = { cardholderName: !1 }, t = "country") {
|
|
221
|
+
return `${(h[t] ?? h.country) + (e.cardholderName ? g : 0)}px`;
|
|
207
222
|
}
|
|
208
|
-
function
|
|
209
|
-
return
|
|
223
|
+
function x(e = "country") {
|
|
224
|
+
return `${_[e] ?? _.country}px`;
|
|
210
225
|
}
|
|
211
|
-
function
|
|
226
|
+
function S(e, t) {
|
|
212
227
|
let n = { ...t };
|
|
213
228
|
function a(t) {
|
|
214
229
|
switch (t.data.type) {
|
|
@@ -259,7 +274,7 @@ function y(e, t) {
|
|
|
259
274
|
}
|
|
260
275
|
//#endregion
|
|
261
276
|
//#region src/mount.ts
|
|
262
|
-
function
|
|
277
|
+
function C(e) {
|
|
263
278
|
if (typeof e == "string") {
|
|
264
279
|
let t = document.querySelector(e);
|
|
265
280
|
if (!(t instanceof HTMLElement)) throw Error(`[amos-js] Container "${e}" did not match any HTMLElement.`);
|
|
@@ -267,69 +282,69 @@ function b(e) {
|
|
|
267
282
|
}
|
|
268
283
|
return e;
|
|
269
284
|
}
|
|
270
|
-
var
|
|
285
|
+
var w = {
|
|
271
286
|
width: "calc(100% + 8px)",
|
|
272
287
|
transition: "opacity 150ms ease-in, height 200ms ease-in-out",
|
|
273
288
|
margin: "0 -4px",
|
|
274
289
|
opacity: "0",
|
|
275
290
|
border: "0"
|
|
276
291
|
};
|
|
277
|
-
function
|
|
292
|
+
function T({ src: e, title: t, name: n, height: r, allow: i }) {
|
|
278
293
|
let a = document.createElement("iframe");
|
|
279
|
-
return a.src = e, a.title = t, a.name = n, a.setAttribute("role", "presentation"), a.scrolling = "no", i && (a.allow = i), Object.assign(a.style,
|
|
294
|
+
return a.src = e, a.title = t, a.name = n, a.setAttribute("role", "presentation"), a.scrolling = "no", i && (a.allow = i), Object.assign(a.style, w, { height: r }), a;
|
|
280
295
|
}
|
|
281
|
-
function
|
|
282
|
-
let n =
|
|
283
|
-
src:
|
|
296
|
+
function E(e, t) {
|
|
297
|
+
let n = C(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t, s = T({
|
|
298
|
+
src: v(r, i, a),
|
|
284
299
|
title: "Secure credit card payment method form powered by Amos",
|
|
285
300
|
name: "amos-credit-card-payment-method-form",
|
|
286
|
-
height:
|
|
301
|
+
height: b(i, a)
|
|
287
302
|
});
|
|
288
|
-
n.appendChild(
|
|
289
|
-
let
|
|
290
|
-
...
|
|
303
|
+
n.appendChild(s);
|
|
304
|
+
let c = S(s, {
|
|
305
|
+
...o,
|
|
291
306
|
onHeightChange: (e) => {
|
|
292
|
-
|
|
307
|
+
s.style.height = e, o.onHeightChange?.(e);
|
|
293
308
|
},
|
|
294
309
|
onAppearanceReady: () => {
|
|
295
|
-
|
|
310
|
+
s.style.opacity = "1", o.onAppearanceReady?.();
|
|
296
311
|
}
|
|
297
312
|
});
|
|
298
313
|
return {
|
|
299
|
-
iframe:
|
|
300
|
-
update:
|
|
314
|
+
iframe: s,
|
|
315
|
+
update: c.update,
|
|
301
316
|
destroy() {
|
|
302
|
-
|
|
317
|
+
c.destroy(), s.remove();
|
|
303
318
|
}
|
|
304
319
|
};
|
|
305
320
|
}
|
|
306
|
-
function
|
|
307
|
-
let n =
|
|
308
|
-
src:
|
|
321
|
+
function D(e, t) {
|
|
322
|
+
let n = C(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t, o = T({
|
|
323
|
+
src: y(r, i),
|
|
309
324
|
title: "Secure bank account payment method form powered by Amos",
|
|
310
325
|
name: "amos-bank-account-payment-method-form",
|
|
311
|
-
height:
|
|
326
|
+
height: x(i)
|
|
312
327
|
});
|
|
313
|
-
n.appendChild(
|
|
314
|
-
let
|
|
315
|
-
...
|
|
328
|
+
n.appendChild(o);
|
|
329
|
+
let s = S(o, {
|
|
330
|
+
...a,
|
|
316
331
|
onHeightChange: (e) => {
|
|
317
|
-
|
|
332
|
+
o.style.height = e, a.onHeightChange?.(e);
|
|
318
333
|
},
|
|
319
334
|
onAppearanceReady: () => {
|
|
320
|
-
|
|
335
|
+
o.style.opacity = "1", a.onAppearanceReady?.();
|
|
321
336
|
}
|
|
322
337
|
});
|
|
323
338
|
return {
|
|
324
|
-
iframe:
|
|
325
|
-
update:
|
|
339
|
+
iframe: o,
|
|
340
|
+
update: s.update,
|
|
326
341
|
destroy() {
|
|
327
|
-
|
|
342
|
+
s.destroy(), o.remove();
|
|
328
343
|
}
|
|
329
344
|
};
|
|
330
345
|
}
|
|
331
|
-
function
|
|
332
|
-
let n =
|
|
346
|
+
function O(e, t) {
|
|
347
|
+
let n = C(e), { renderToken: r, ...i } = t, a = T({
|
|
333
348
|
src: d(r),
|
|
334
349
|
title: "Secure Google Pay button powered by Amos",
|
|
335
350
|
name: "amos-google-pay-button",
|
|
@@ -355,4 +370,4 @@ function T(e, t) {
|
|
|
355
370
|
};
|
|
356
371
|
}
|
|
357
372
|
//#endregion
|
|
358
|
-
export { p as attachGooglePayButtonListeners,
|
|
373
|
+
export { p as attachGooglePayButtonListeners, S as attachPaymentMethodFormListeners, c as confirmPaymentIntent, l as confirmSetupIntent, n as createMessage, e as decodeJwt, m as formatGooglePayPaymentData, x as getBankAccountFormInitialHeight, y as getBankAccountFormSrc, b as getCreditCardFormInitialHeight, v as getCreditCardFormSrc, t as getEmbedOrigin, f as getGooglePayButtonInitialHeight, d as getGooglePayButtonSrc, D as mountAmosBankAccountPaymentMethodForm, E as mountAmosCreditCardPaymentMethodForm, O as mountAmosGooglePayButton, u as sendConfirmationFailed, r as sendParentReadyMessage, a as updateAmount, i as updateAppearance, o as updateMerchantName, s as validateForm };
|
package/dist/mount.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { GooglePayButtonController, GooglePayButtonListenerOptions } from './google-pay';
|
|
2
|
-
import { CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions } from './payment-method-form';
|
|
2
|
+
import { BillingAddressRequirement, CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions } from './payment-method-form';
|
|
3
3
|
type Container = HTMLElement | string;
|
|
4
4
|
/**
|
|
5
5
|
* Options accepted by {@link mountAmosCreditCardPaymentMethodForm}.
|
|
@@ -14,12 +14,18 @@ export type AmosCreditCardPaymentMethodFormOptions = PaymentMethodFormListenerOp
|
|
|
14
14
|
renderToken: string;
|
|
15
15
|
/**
|
|
16
16
|
* The additional fields that are required to be filled out in the
|
|
17
|
-
* form in addition to the card number, expiration date, CVV,
|
|
18
|
-
*
|
|
17
|
+
* form in addition to the card number, expiration date, CVV, and
|
|
18
|
+
* billing address fields.
|
|
19
19
|
*
|
|
20
20
|
* @default { cardholderName: false }
|
|
21
21
|
*/
|
|
22
22
|
additionalFields?: CreditCardAdditionalFields;
|
|
23
|
+
/**
|
|
24
|
+
* How much billing address the form collects.
|
|
25
|
+
*
|
|
26
|
+
* @default "country"
|
|
27
|
+
*/
|
|
28
|
+
billingAddressRequirement?: BillingAddressRequirement;
|
|
23
29
|
};
|
|
24
30
|
/**
|
|
25
31
|
* Controller returned by {@link mountAmosCreditCardPaymentMethodForm}
|
|
@@ -54,6 +60,12 @@ export type AmosBankAccountPaymentMethodFormOptions = PaymentMethodFormListenerO
|
|
|
54
60
|
* https://dashboard.amos.com.
|
|
55
61
|
*/
|
|
56
62
|
renderToken: string;
|
|
63
|
+
/**
|
|
64
|
+
* How much billing address the form collects.
|
|
65
|
+
*
|
|
66
|
+
* @default "country"
|
|
67
|
+
*/
|
|
68
|
+
billingAddressRequirement?: BillingAddressRequirement;
|
|
57
69
|
};
|
|
58
70
|
/**
|
|
59
71
|
* Mount the secure bank-account payment method form into a container
|
|
@@ -2,29 +2,40 @@ import { components } from '@amos.com/node';
|
|
|
2
2
|
import { Appearance } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* The additional fields beyond the standard card number, expiration
|
|
5
|
-
* date, CVV,
|
|
5
|
+
* date, CVV, and billing address fields that are required to be filled
|
|
6
6
|
* out in the embedded credit-card form.
|
|
7
7
|
*/
|
|
8
8
|
export type CreditCardAdditionalFields = {
|
|
9
9
|
cardholderName: boolean;
|
|
10
10
|
};
|
|
11
|
+
/**
|
|
12
|
+
* How much billing address the embedded credit-card or bank-account form
|
|
13
|
+
* collects.
|
|
14
|
+
*
|
|
15
|
+
* - `country` — country / region, plus postal / ZIP when that selection
|
|
16
|
+
* collects one (CA, PR, GB, US). Default.
|
|
17
|
+
* - `full` — full street address (Smarty autocomplete on line 1).
|
|
18
|
+
*/
|
|
19
|
+
export type BillingAddressRequirement = "country" | "full";
|
|
11
20
|
/**
|
|
12
21
|
* Build the iframe `src` URL for the embedded credit-card form.
|
|
13
22
|
*/
|
|
14
|
-
export declare function getCreditCardFormSrc(renderToken: string, additionalFields?: CreditCardAdditionalFields): string;
|
|
23
|
+
export declare function getCreditCardFormSrc(renderToken: string, additionalFields?: CreditCardAdditionalFields, billingAddressRequirement?: BillingAddressRequirement): string;
|
|
15
24
|
/**
|
|
16
25
|
* Build the iframe `src` URL for the embedded bank-account form.
|
|
17
26
|
*/
|
|
18
|
-
export declare function getBankAccountFormSrc(renderToken: string): string;
|
|
27
|
+
export declare function getBankAccountFormSrc(renderToken: string, billingAddressRequirement?: BillingAddressRequirement): string;
|
|
19
28
|
/**
|
|
20
29
|
* Default iframe pixel height for the credit-card form, taking the
|
|
21
|
-
* configured `additionalFields` into
|
|
30
|
+
* configured `additionalFields` and `billingAddressRequirement` into
|
|
31
|
+
* account.
|
|
22
32
|
*/
|
|
23
|
-
export declare function getCreditCardFormInitialHeight(additionalFields?: CreditCardAdditionalFields): string;
|
|
33
|
+
export declare function getCreditCardFormInitialHeight(additionalFields?: CreditCardAdditionalFields, billingAddressRequirement?: BillingAddressRequirement): string;
|
|
24
34
|
/**
|
|
25
|
-
* Default iframe pixel height for the bank-account form
|
|
35
|
+
* Default iframe pixel height for the bank-account form, taking
|
|
36
|
+
* `billingAddressRequirement` into account.
|
|
26
37
|
*/
|
|
27
|
-
export declare function getBankAccountFormInitialHeight(): string;
|
|
38
|
+
export declare function getBankAccountFormInitialHeight(billingAddressRequirement?: BillingAddressRequirement): string;
|
|
28
39
|
/**
|
|
29
40
|
* Options accepted by {@link attachPaymentMethodFormListeners}.
|
|
30
41
|
*
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
package/src/mount.ts
CHANGED
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
} from "./google-pay";
|
|
8
8
|
import {
|
|
9
9
|
attachPaymentMethodFormListeners,
|
|
10
|
+
type BillingAddressRequirement,
|
|
10
11
|
type CreditCardAdditionalFields,
|
|
11
12
|
getBankAccountFormInitialHeight,
|
|
12
13
|
getBankAccountFormSrc,
|
|
@@ -79,12 +80,18 @@ export type AmosCreditCardPaymentMethodFormOptions =
|
|
|
79
80
|
renderToken: string;
|
|
80
81
|
/**
|
|
81
82
|
* The additional fields that are required to be filled out in the
|
|
82
|
-
* form in addition to the card number, expiration date, CVV,
|
|
83
|
-
*
|
|
83
|
+
* form in addition to the card number, expiration date, CVV, and
|
|
84
|
+
* billing address fields.
|
|
84
85
|
*
|
|
85
86
|
* @default { cardholderName: false }
|
|
86
87
|
*/
|
|
87
88
|
additionalFields?: CreditCardAdditionalFields;
|
|
89
|
+
/**
|
|
90
|
+
* How much billing address the form collects.
|
|
91
|
+
*
|
|
92
|
+
* @default "country"
|
|
93
|
+
*/
|
|
94
|
+
billingAddressRequirement?: BillingAddressRequirement;
|
|
88
95
|
};
|
|
89
96
|
|
|
90
97
|
/**
|
|
@@ -118,14 +125,22 @@ export function mountAmosCreditCardPaymentMethodForm(
|
|
|
118
125
|
const {
|
|
119
126
|
renderToken,
|
|
120
127
|
additionalFields = { cardholderName: false },
|
|
128
|
+
billingAddressRequirement = "country",
|
|
121
129
|
...listenerOptions
|
|
122
130
|
} = options;
|
|
123
131
|
|
|
124
132
|
const iframe = createIframe({
|
|
125
|
-
src: getCreditCardFormSrc(
|
|
133
|
+
src: getCreditCardFormSrc(
|
|
134
|
+
renderToken,
|
|
135
|
+
additionalFields,
|
|
136
|
+
billingAddressRequirement,
|
|
137
|
+
),
|
|
126
138
|
title: "Secure credit card payment method form powered by Amos",
|
|
127
139
|
name: "amos-credit-card-payment-method-form",
|
|
128
|
-
height: getCreditCardFormInitialHeight(
|
|
140
|
+
height: getCreditCardFormInitialHeight(
|
|
141
|
+
additionalFields,
|
|
142
|
+
billingAddressRequirement,
|
|
143
|
+
),
|
|
129
144
|
});
|
|
130
145
|
host.appendChild(iframe);
|
|
131
146
|
|
|
@@ -163,6 +178,12 @@ export type AmosBankAccountPaymentMethodFormOptions =
|
|
|
163
178
|
* https://dashboard.amos.com.
|
|
164
179
|
*/
|
|
165
180
|
renderToken: string;
|
|
181
|
+
/**
|
|
182
|
+
* How much billing address the form collects.
|
|
183
|
+
*
|
|
184
|
+
* @default "country"
|
|
185
|
+
*/
|
|
186
|
+
billingAddressRequirement?: BillingAddressRequirement;
|
|
166
187
|
};
|
|
167
188
|
|
|
168
189
|
/**
|
|
@@ -179,13 +200,17 @@ export function mountAmosBankAccountPaymentMethodForm(
|
|
|
179
200
|
options: AmosBankAccountPaymentMethodFormOptions,
|
|
180
201
|
): AmosPaymentMethodFormMountController {
|
|
181
202
|
const host = resolveContainer(container);
|
|
182
|
-
const {
|
|
203
|
+
const {
|
|
204
|
+
renderToken,
|
|
205
|
+
billingAddressRequirement = "country",
|
|
206
|
+
...listenerOptions
|
|
207
|
+
} = options;
|
|
183
208
|
|
|
184
209
|
const iframe = createIframe({
|
|
185
|
-
src: getBankAccountFormSrc(renderToken),
|
|
210
|
+
src: getBankAccountFormSrc(renderToken, billingAddressRequirement),
|
|
186
211
|
title: "Secure bank account payment method form powered by Amos",
|
|
187
212
|
name: "amos-bank-account-payment-method-form",
|
|
188
|
-
height: getBankAccountFormInitialHeight(),
|
|
213
|
+
height: getBankAccountFormInitialHeight(billingAddressRequirement),
|
|
189
214
|
});
|
|
190
215
|
host.appendChild(iframe);
|
|
191
216
|
|
|
@@ -8,50 +8,99 @@ import type { Appearance, Message } from "./types";
|
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* The additional fields beyond the standard card number, expiration
|
|
11
|
-
* date, CVV,
|
|
11
|
+
* date, CVV, and billing address fields that are required to be filled
|
|
12
12
|
* out in the embedded credit-card form.
|
|
13
13
|
*/
|
|
14
14
|
export type CreditCardAdditionalFields = {
|
|
15
15
|
cardholderName: boolean;
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
+
/**
|
|
19
|
+
* How much billing address the embedded credit-card or bank-account form
|
|
20
|
+
* collects.
|
|
21
|
+
*
|
|
22
|
+
* - `country` — country / region, plus postal / ZIP when that selection
|
|
23
|
+
* collects one (CA, PR, GB, US). Default.
|
|
24
|
+
* - `full` — full street address (Smarty autocomplete on line 1).
|
|
25
|
+
*/
|
|
26
|
+
export type BillingAddressRequirement = "country" | "full";
|
|
27
|
+
|
|
28
|
+
const CREDIT_CARD_ADDRESS_HEIGHT_PX: Record<BillingAddressRequirement, number> =
|
|
29
|
+
{
|
|
30
|
+
country: 212,
|
|
31
|
+
full: 452,
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const CREDIT_CARD_CARDHOLDER_NAME_HEIGHT_PX = 80;
|
|
35
|
+
|
|
36
|
+
const BANK_ACCOUNT_HEIGHT_PX: Record<BillingAddressRequirement, number> = {
|
|
37
|
+
country: 400,
|
|
38
|
+
full: 640,
|
|
39
|
+
};
|
|
40
|
+
|
|
18
41
|
/**
|
|
19
42
|
* Build the iframe `src` URL for the embedded credit-card form.
|
|
20
43
|
*/
|
|
21
44
|
export function getCreditCardFormSrc(
|
|
22
45
|
renderToken: string,
|
|
23
46
|
additionalFields: CreditCardAdditionalFields = { cardholderName: false },
|
|
47
|
+
billingAddressRequirement: BillingAddressRequirement = "country",
|
|
24
48
|
): string {
|
|
25
49
|
const enabled = Object.entries(additionalFields)
|
|
26
50
|
.filter(([, value]) => value)
|
|
27
51
|
.map(([key]) => key)
|
|
28
52
|
.join(",");
|
|
29
53
|
|
|
30
|
-
|
|
54
|
+
const params = new URLSearchParams({
|
|
55
|
+
token: renderToken,
|
|
56
|
+
additionalFields: enabled,
|
|
57
|
+
billingAddressRequirement,
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
return `${getEmbedOrigin(renderToken)}/iframe/card?${params}`;
|
|
31
61
|
}
|
|
32
62
|
|
|
33
63
|
/**
|
|
34
64
|
* Build the iframe `src` URL for the embedded bank-account form.
|
|
35
65
|
*/
|
|
36
|
-
export function getBankAccountFormSrc(
|
|
37
|
-
|
|
66
|
+
export function getBankAccountFormSrc(
|
|
67
|
+
renderToken: string,
|
|
68
|
+
billingAddressRequirement: BillingAddressRequirement = "country",
|
|
69
|
+
): string {
|
|
70
|
+
const params = new URLSearchParams({
|
|
71
|
+
token: renderToken,
|
|
72
|
+
billingAddressRequirement,
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
return `${getEmbedOrigin(renderToken)}/iframe/bank?${params}`;
|
|
38
76
|
}
|
|
39
77
|
|
|
40
78
|
/**
|
|
41
79
|
* Default iframe pixel height for the credit-card form, taking the
|
|
42
|
-
* configured `additionalFields` into
|
|
80
|
+
* configured `additionalFields` and `billingAddressRequirement` into
|
|
81
|
+
* account.
|
|
43
82
|
*/
|
|
44
83
|
export function getCreditCardFormInitialHeight(
|
|
45
84
|
additionalFields: CreditCardAdditionalFields = { cardholderName: false },
|
|
85
|
+
billingAddressRequirement: BillingAddressRequirement = "country",
|
|
46
86
|
): string {
|
|
47
|
-
|
|
87
|
+
const addressHeight =
|
|
88
|
+
CREDIT_CARD_ADDRESS_HEIGHT_PX[billingAddressRequirement] ??
|
|
89
|
+
CREDIT_CARD_ADDRESS_HEIGHT_PX.country;
|
|
90
|
+
const cardholderExtra = additionalFields.cardholderName
|
|
91
|
+
? CREDIT_CARD_CARDHOLDER_NAME_HEIGHT_PX
|
|
92
|
+
: 0;
|
|
93
|
+
return `${addressHeight + cardholderExtra}px`;
|
|
48
94
|
}
|
|
49
95
|
|
|
50
96
|
/**
|
|
51
|
-
* Default iframe pixel height for the bank-account form
|
|
97
|
+
* Default iframe pixel height for the bank-account form, taking
|
|
98
|
+
* `billingAddressRequirement` into account.
|
|
52
99
|
*/
|
|
53
|
-
export function getBankAccountFormInitialHeight(
|
|
54
|
-
|
|
100
|
+
export function getBankAccountFormInitialHeight(
|
|
101
|
+
billingAddressRequirement: BillingAddressRequirement = "country",
|
|
102
|
+
): string {
|
|
103
|
+
return `${BANK_ACCOUNT_HEIGHT_PX[billingAddressRequirement] ?? BANK_ACCOUNT_HEIGHT_PX.country}px`;
|
|
55
104
|
}
|
|
56
105
|
|
|
57
106
|
/**
|