@amos.com/amos-js 0.9.12 → 0.9.14

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.
Files changed (9) hide show
  1. package/README.md +24 -7
  2. package/dist/index.js +2 -2
  3. package/dist/index.mjs +30 -22
  4. package/dist/types.d.ts +15 -1
  5. package/package.json +1 -1
  6. package/src/apple-pay.ts +1 -0
  7. package/src/google-pay.ts +1 -0
  8. package/src/mount.ts +15 -3
  9. package/src/types.ts +36 -1
package/README.md CHANGED
@@ -235,10 +235,12 @@ Radio groups (e.g. account type) always use an above-style group label regardles
235
235
  | `--input-border-width` | Input field border width | `1px` |
236
236
  | `--input-shadow` | Input field box shadow | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
237
237
  | `--floating-input-height` | Height of inputs when labels are floating | `3.25rem` |
238
- | `--floating-label-font-size` | Font size of floating labels when focused or filled | `0.75rem` |
239
- | `--floating-label-font-weight` | Font weight of floating labels | `500` |
240
- | `--floating-label-color` | Color of floating labels | `var(--muted-foreground)` |
241
- | `--floating-label-offset` | Top offset of the shrunk floating label | `0.625rem` |
238
+ | `--floating-label-font-size` | Font size of floating labels when focused or filled | `0.75rem` |
239
+ | `--floating-label-empty-font-size` | Font size of floating labels when empty (unfocused) | `var(--input-font-size)` |
240
+ | `--floating-label-font-weight` | Font weight of floating labels | `500` |
241
+ | `--floating-label-color` | Color of floating labels when empty (unfocused) | `var(--muted-foreground)` |
242
+ | `--floating-label-floated-color` | Color of floating labels when focused or filled | `var(--floating-label-color)` |
243
+ | `--floating-label-offset` | Top offset of the shrunk floating label | `0.625rem` |
242
244
  | `--label-font-size` | Font size of above-style field labels | `0.875rem` |
243
245
  | `--label-font-weight` | Font weight of above-style field labels | `500` |
244
246
  | `--field-gap` | Vertical gap between stacked form fields | `1rem` |
@@ -295,13 +297,28 @@ Mount the secure Google Pay button (express checkout) into a container element.
295
297
 
296
298
  **Optional `options`:** `appearance`, `onHeightChange`, `onAppearanceReady`, plus Google Pay button visual options using the same names as `@google-pay/button-react`:
297
299
 
300
+ - `fullWidth` (`boolean`, defaults to `false`) — fills the mount container without changing the compact default
298
301
  - `buttonType` (`"book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "short" | "long"`, defaults to `"short"`)
299
302
  - `buttonColor` (`"default" | "black" | "white"`)
300
303
  - `buttonRadius` (`number`, 0–20)
301
304
  - `buttonSizeMode` (`"static" | "fill"`)
302
305
  - `buttonLocale` (`string`, e.g. `"en"`)
303
306
  - `buttonBorderType` (`"no_border" | "default_border"`)
304
- - `style` (`{ [property: string]: string | number }`) — applied to the Google Pay button inside the iframe (e.g. `{ height: "48px", width: "100%" }`). Combined with `buttonSizeMode: "fill"` to stretch the button.
307
+ - `style` (`{ [property: string]: string | number }`) — applied to the Google Pay button inside the iframe (e.g. `{ height: "48px" }`)
308
+
309
+ For a full-width 48px button:
310
+
311
+ ```ts
312
+ mountAmosGooglePayButton("#google-pay", {
313
+ // ...required options
314
+ fullWidth: true,
315
+ style: { height: "48px" },
316
+ });
317
+ ```
318
+
319
+ The wallet iframe itself is flush with its mount container (`width: 100%`,
320
+ zero margin). `style` targets the button inside that iframe. For advanced host
321
+ layout overrides, use the returned controller's `iframe` element.
305
322
 
306
323
  **Returns** `AmosGooglePayButtonMountController`:
307
324
 
@@ -313,6 +330,7 @@ Mount the secure Apple Pay button (express checkout). Same required options and
313
330
 
314
331
  **Optional visual options** use Apple's `<apple-pay-button>` attribute names:
315
332
 
333
+ - `fullWidth` (`boolean`, defaults to `false`) — fills the mount container without changing the compact default
316
334
  - `buttonstyle` (`"black" | "white" | "white-outline"`, defaults to `"black"`)
317
335
  - `type` (`"plain" | "buy" | "set-up" | "donate" | "check-out" | "book" | "subscribe" | "reload" | "add-money" | "top-up" | "order" | "rent" | "support" | "contribute" | "tip"`, defaults to `"plain"`)
318
336
  - `locale` (`string`, BCP 47, defaults to `"en-US"`)
@@ -320,13 +338,12 @@ Mount the secure Apple Pay button (express checkout). Same required options and
320
338
 
321
339
  ```ts
322
340
  button.update({
341
+ fullWidth: true,
323
342
  buttonstyle: "white-outline",
324
343
  type: "buy",
325
344
  locale: "en-GB",
326
345
  style: {
327
346
  "--apple-pay-button-height": "48px",
328
- "--apple-pay-button-width": "100%",
329
- width: "100%",
330
347
  },
331
348
  });
332
349
  ```
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-amos-apple-pay-waiting`;function t({onCancel:t}){let n=document.querySelector(`[${e}]`);if(n)return n;let r=document.createElement(`div`);r.setAttribute(e,`true`),r.setAttribute(`role`,`dialog`),r.setAttribute(`aria-modal`,`true`),r.setAttribute(`aria-labelledby`,`amos-apple-pay-waiting-title`),Object.assign(r.style,{position:`fixed`,inset:`0`,zIndex:`2147483646`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`24px`,boxSizing:`border-box`,background:`rgba(0, 0, 0, 0.55)`,fontFamily:`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`});let i=document.createElement(`div`);Object.assign(i.style,{width:`100%`,maxWidth:`360px`,borderRadius:`12px`,background:`#fff`,padding:`28px 24px 20px`,boxSizing:`border-box`,textAlign:`center`,boxShadow:`0 12px 40px rgba(0, 0, 0, 0.25)`});let a=document.createElement(`div`);a.setAttribute(`aria-hidden`,`true`),Object.assign(a.style,{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,marginBottom:`16px`,fontSize:`28px`,fontWeight:`600`,letterSpacing:`-0.02em`,color:`#000`,lineHeight:`1`}),a.innerHTML=`<svg width="22" height="26" viewBox="0 0 814 1000" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg><span>Pay</span>`;let o=document.createElement(`p`);o.id=`amos-apple-pay-waiting-title`,Object.assign(o.style,{margin:`0 0 20px`,fontSize:`15px`,lineHeight:`1.45`,color:`#1a1a1a`}),o.textContent=`Complete your payment in the open Apple Pay window, or close Apple Pay to continue paying another way.`;let s=document.createElement(`button`);return s.type=`button`,s.textContent=`Cancel payment`,Object.assign(s.style,{display:`block`,width:`100%`,border:`none`,borderRadius:`8px`,padding:`12px 16px`,background:`#2c2c2e`,color:`#fff`,fontSize:`15px`,fontWeight:`500`,cursor:`pointer`}),s.addEventListener(`click`,t),i.append(a,o,s),r.append(i),document.body.append(r),r}function n(){document.querySelector(`[${e}]`)?.remove()}function r(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 i(e){let{env:t=`sandbox`}=r(e).payload;switch(t){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function a(e){if(!e||typeof e!=`object`)return;let t={};for(let[n,r]of Object.entries(e)){if(typeof r==`string`){if(r.length===0)continue;t[n]=r;continue}typeof r==`number`&&Number.isFinite(r)&&(t[n]=r)}return Object.keys(t).length>0?t:void 0}function o(e){let t={};if(e.buttonstyle!==void 0&&(t.buttonstyle=e.buttonstyle),e.type!==void 0&&(t.type=e.type),e.locale!==void 0&&(t.locale=e.locale),e.style!==void 0){let n=a(e.style);n&&(t.style=n)}return t}function s(e){let t={};if(e.buttonType!==void 0&&(t.buttonType=e.buttonType),e.buttonColor!==void 0&&(t.buttonColor=e.buttonColor),e.buttonRadius!==void 0&&(t.buttonRadius=e.buttonRadius),e.buttonSizeMode!==void 0&&(t.buttonSizeMode=e.buttonSizeMode),e.buttonLocale!==void 0&&(t.buttonLocale=e.buttonLocale),e.buttonBorderType!==void 0&&(t.buttonBorderType=e.buttonBorderType),e.style!==void 0){let n=a(e.style);n&&(t.style=n)}return t}function c(e){return e}function l(e){return new URL(e.src).origin}function u(e){e?.contentWindow&&e.contentWindow.postMessage(c({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),l(e))}function d({iframe:e,appearance:t={}}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_APPEARANCE`,appearance:t}),l(e))}function f({iframe:e,props:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_APPLE_PAY_BUTTON`,props:o(t)}),l(e))}function p({iframe:e,props:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_GOOGLE_PAY_BUTTON`,props:s(t)}),l(e))}function m({iframe:e,amount:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_AMOUNT`,amount:t}),l(e))}function h({iframe:e,merchantName:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),l(e))}function g({iframe:e}){let t=crypto.randomUUID();return new Promise(n=>{e?.contentWindow&&e.contentWindow.postMessage(c({type:`VALIDATE_FORM`,requestId:t}),l(e));let r=setTimeout(()=>{window.removeEventListener(`message`,i),n(!1)},5e3);function i(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,i),clearTimeout(r),n(e.data.isValid??!1))}window.addEventListener(`message`,i)})}function _({iframe:e}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`RESET_FORM`}),l(e))}function v({iframe:e,token:t}){if(!e?.contentWindow)return;let{payment_intent_id:n}=r(t).payload;e.contentWindow.postMessage(c({type:`CONFIRM_PAYMENT_INTENT`,token:t,id:n??void 0}),l(e))}function y({iframe:e,token:t}){if(!e?.contentWindow)return;let{setup_intent_id:n}=r(t).payload;e.contentWindow.postMessage(c({type:`CONFIRM_SETUP_INTENT`,token:t,id:n??void 0}),l(e))}function b({iframe:e,result:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`CONFIRMATION_RESULT`,result:t}),l(e))}function x(e){return`${i(e)}/iframe/apple-pay?token=${e}`}function S(){return`40px`}function C(e){e.contentWindow?.postMessage(c({type:`APPLE_PAY_CANCEL`}),l(e))}function w(e,r){let i={...r};function a(){m({iframe:e,amount:i.amount})}function o(){h({iframe:e,merchantName:i.merchantName})}function s(){f({iframe:e,props:i})}function c(r){if(r.source===e.contentWindow)switch(r.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:i.appearance}),a(),o(),s();break;case`UPDATE_HEIGHT`:i.onHeightChange?.(r.data.height);break;case`UPDATE_APPEARANCE`:d({iframe:e,appearance:r.data.appearance});break;case`UPDATED_APPEARANCE`:i.onAppearanceReady?.();break;case`APPLE_PAY_WINDOW_OPEN`:t({onCancel:()=>{C(e),n()}});break;case`APPLE_PAY_WINDOW_CLOSE`:n();break;case`CREATE_PAYMENT_INTENT`:i.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:r.data.paymentIntentCreateAttributes,customerCreateAttributes:r.data.customerCreateAttributes}).then(t=>{v({iframe:e,token:t})}).catch(e=>{n(),i.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n(),i.onResult(r.data.result)}}return window.addEventListener(`message`,c),{update(t){let n=`appearance`in t,r=`amount`in t,c=`merchantName`in t,l=`buttonstyle`in t||`type`in t||`locale`in t||`style`in t;i={...i,...t},n&&d({iframe:e,appearance:i.appearance}),r&&a(),c&&o(),l&&s()},destroy(){window.removeEventListener(`message`,c),n()}}}function T(e){return`${i(e)}/iframe/google-pay?token=${e}`}function E(){return`40px`}function D(e,t){let n={...t};function r(){m({iframe:e,amount:n.amount})}function i(){h({iframe:e,merchantName:n.merchantName})}function a(){p({iframe:e,props:n})}function o(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:n.appearance}),r(),i(),a();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:d({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=>{v({iframe:e,token:t})}).catch(e=>{n.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,o),{update(t){let o=`appearance`in t,s=`amount`in t,c=`merchantName`in t,l=`buttonType`in t||`buttonColor`in t||`buttonRadius`in t||`buttonSizeMode`in t||`buttonLocale`in t||`buttonBorderType`in t||`style`in t;n={...n,...t},o&&d({iframe:e,appearance:n.appearance}),s&&r(),c&&i(),l&&a()},destroy(){window.removeEventListener(`message`,o)}}}function O({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_payload:e.paymentMethodData.tokenizationData.token}}}}var k=`amos-js-form-skeleton-styles`,A={"--accent":`oklch(0.97 0 0)`,"--radius":`0.625rem`,"--input-height":`2.25rem`,"--floating-input-height":`3.25rem`,"--field-gap":`1rem`,"--control-gap":`0.5rem`,"--label-font-size":`0.875rem`},j=`
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-amos-apple-pay-waiting`;function t({onCancel:t}){let n=document.querySelector(`[${e}]`);if(n)return n;let r=document.createElement(`div`);r.setAttribute(e,`true`),r.setAttribute(`role`,`dialog`),r.setAttribute(`aria-modal`,`true`),r.setAttribute(`aria-labelledby`,`amos-apple-pay-waiting-title`),Object.assign(r.style,{position:`fixed`,inset:`0`,zIndex:`2147483646`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:`24px`,boxSizing:`border-box`,background:`rgba(0, 0, 0, 0.55)`,fontFamily:`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`});let i=document.createElement(`div`);Object.assign(i.style,{width:`100%`,maxWidth:`360px`,borderRadius:`12px`,background:`#fff`,padding:`28px 24px 20px`,boxSizing:`border-box`,textAlign:`center`,boxShadow:`0 12px 40px rgba(0, 0, 0, 0.25)`});let a=document.createElement(`div`);a.setAttribute(`aria-hidden`,`true`),Object.assign(a.style,{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,gap:`6px`,marginBottom:`16px`,fontSize:`28px`,fontWeight:`600`,letterSpacing:`-0.02em`,color:`#000`,lineHeight:`1`}),a.innerHTML=`<svg width="22" height="26" viewBox="0 0 814 1000" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg><span>Pay</span>`;let o=document.createElement(`p`);o.id=`amos-apple-pay-waiting-title`,Object.assign(o.style,{margin:`0 0 20px`,fontSize:`15px`,lineHeight:`1.45`,color:`#1a1a1a`}),o.textContent=`Complete your payment in the open Apple Pay window, or close Apple Pay to continue paying another way.`;let s=document.createElement(`button`);return s.type=`button`,s.textContent=`Cancel payment`,Object.assign(s.style,{display:`block`,width:`100%`,border:`none`,borderRadius:`8px`,padding:`12px 16px`,background:`#2c2c2e`,color:`#fff`,fontSize:`15px`,fontWeight:`500`,cursor:`pointer`}),s.addEventListener(`click`,t),i.append(a,o,s),r.append(i),document.body.append(r),r}function n(){document.querySelector(`[${e}]`)?.remove()}function r(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 i(e){let{env:t=`sandbox`}=r(e).payload;switch(t){case`production`:return`https://embed.amos.com`;case`sandbox`:return`https://embed-sandbox.amos.com`;default:return`https://embed-sandbox.amos.com`}}function a(e){if(!e||typeof e!=`object`)return;let t={};for(let[n,r]of Object.entries(e)){if(typeof r==`string`){if(r.length===0)continue;t[n]=r;continue}typeof r==`number`&&Number.isFinite(r)&&(t[n]=r)}return Object.keys(t).length>0?t:void 0}function o(e){let t={};if(e.fullWidth!==void 0&&(t.fullWidth=e.fullWidth),e.buttonstyle!==void 0&&(t.buttonstyle=e.buttonstyle),e.type!==void 0&&(t.type=e.type),e.locale!==void 0&&(t.locale=e.locale),e.style!==void 0){let n=a(e.style);n&&(t.style=n)}return t}function s(e){let t={};if(e.fullWidth!==void 0&&(t.fullWidth=e.fullWidth),e.buttonType!==void 0&&(t.buttonType=e.buttonType),e.buttonColor!==void 0&&(t.buttonColor=e.buttonColor),e.buttonRadius!==void 0&&(t.buttonRadius=e.buttonRadius),e.buttonSizeMode!==void 0&&(t.buttonSizeMode=e.buttonSizeMode),e.buttonLocale!==void 0&&(t.buttonLocale=e.buttonLocale),e.buttonBorderType!==void 0&&(t.buttonBorderType=e.buttonBorderType),e.style!==void 0){let n=a(e.style);n&&(t.style=n)}return t}function c(e){return e}function l(e){return new URL(e.src).origin}function u(e){e?.contentWindow&&e.contentWindow.postMessage(c({type:`PARENT_ACKNOWLEDGED_IFRAME_READY`}),l(e))}function d({iframe:e,appearance:t={}}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_APPEARANCE`,appearance:t}),l(e))}function f({iframe:e,props:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_APPLE_PAY_BUTTON`,props:o(t)}),l(e))}function p({iframe:e,props:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_GOOGLE_PAY_BUTTON`,props:s(t)}),l(e))}function m({iframe:e,amount:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_AMOUNT`,amount:t}),l(e))}function h({iframe:e,merchantName:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`UPDATE_MERCHANT_NAME`,merchantName:t}),l(e))}function g({iframe:e}){let t=crypto.randomUUID();return new Promise(n=>{e?.contentWindow&&e.contentWindow.postMessage(c({type:`VALIDATE_FORM`,requestId:t}),l(e));let r=setTimeout(()=>{window.removeEventListener(`message`,i),n(!1)},5e3);function i(e){e.data.type===`VALIDATE_FORM`&&e.data.requestId===t&&(window.removeEventListener(`message`,i),clearTimeout(r),n(e.data.isValid??!1))}window.addEventListener(`message`,i)})}function _({iframe:e}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`RESET_FORM`}),l(e))}function v({iframe:e,token:t}){if(!e?.contentWindow)return;let{payment_intent_id:n}=r(t).payload;e.contentWindow.postMessage(c({type:`CONFIRM_PAYMENT_INTENT`,token:t,id:n??void 0}),l(e))}function y({iframe:e,token:t}){if(!e?.contentWindow)return;let{setup_intent_id:n}=r(t).payload;e.contentWindow.postMessage(c({type:`CONFIRM_SETUP_INTENT`,token:t,id:n??void 0}),l(e))}function b({iframe:e,result:t}){e?.contentWindow&&e.contentWindow.postMessage(c({type:`CONFIRMATION_RESULT`,result:t}),l(e))}function x(e){return`${i(e)}/iframe/apple-pay?token=${e}`}function S(){return`40px`}function C(e){e.contentWindow?.postMessage(c({type:`APPLE_PAY_CANCEL`}),l(e))}function w(e,r){let i={...r};function a(){m({iframe:e,amount:i.amount})}function o(){h({iframe:e,merchantName:i.merchantName})}function s(){f({iframe:e,props:i})}function c(r){if(r.source===e.contentWindow)switch(r.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:i.appearance}),a(),o(),s();break;case`UPDATE_HEIGHT`:i.onHeightChange?.(r.data.height);break;case`UPDATE_APPEARANCE`:d({iframe:e,appearance:r.data.appearance});break;case`UPDATED_APPEARANCE`:i.onAppearanceReady?.();break;case`APPLE_PAY_WINDOW_OPEN`:t({onCancel:()=>{C(e),n()}});break;case`APPLE_PAY_WINDOW_CLOSE`:n();break;case`CREATE_PAYMENT_INTENT`:i.onInitiatePaymentIntentRequest({paymentIntentCreateAttributes:r.data.paymentIntentCreateAttributes,customerCreateAttributes:r.data.customerCreateAttributes}).then(t=>{v({iframe:e,token:t})}).catch(e=>{n(),i.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n(),i.onResult(r.data.result)}}return window.addEventListener(`message`,c),{update(t){let n=`appearance`in t,r=`amount`in t,c=`merchantName`in t,l=`fullWidth`in t||`buttonstyle`in t||`type`in t||`locale`in t||`style`in t;i={...i,...t},n&&d({iframe:e,appearance:i.appearance}),r&&a(),c&&o(),l&&s()},destroy(){window.removeEventListener(`message`,c),n()}}}function T(e){return`${i(e)}/iframe/google-pay?token=${e}`}function E(){return`40px`}function D(e,t){let n={...t};function r(){m({iframe:e,amount:n.amount})}function i(){h({iframe:e,merchantName:n.merchantName})}function a(){p({iframe:e,props:n})}function o(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:n.appearance}),r(),i(),a();break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:d({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=>{v({iframe:e,token:t})}).catch(e=>{n.onResult({status:`failed`,errorMessage:e instanceof Error?e.message:`Unknown error`})});break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,o),{update(t){let o=`appearance`in t,s=`amount`in t,c=`merchantName`in t,l=`fullWidth`in t||`buttonType`in t||`buttonColor`in t||`buttonRadius`in t||`buttonSizeMode`in t||`buttonLocale`in t||`buttonBorderType`in t||`style`in t;n={...n,...t},o&&d({iframe:e,appearance:n.appearance}),s&&r(),c&&i(),l&&a()},destroy(){window.removeEventListener(`message`,o)}}}function O({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_payload:e.paymentMethodData.tokenizationData.token}}}}var k=`amos-js-form-skeleton-styles`,A={"--accent":`oklch(0.97 0 0)`,"--radius":`0.625rem`,"--input-height":`2.25rem`,"--floating-input-height":`3.25rem`,"--field-gap":`1rem`,"--control-gap":`0.5rem`,"--label-font-size":`0.875rem`},j=`
2
2
  .amos-js-form-skeleton {
3
3
  box-sizing: border-box;
4
4
  container-type: inline-size;
@@ -61,4 +61,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`data-a
61
61
  animation: none;
62
62
  }
63
63
  }
64
- `;function M(){if(document.getElementById(k))return;let e=document.createElement(`style`);e.id=k,e.textContent=j,document.head.appendChild(e)}function N(e,t){for(let[t,n]of Object.entries(A))e.style.setProperty(t,n);let n=t?.themeVariables;if(n)for(let[t,r]of Object.entries(n))typeof r==`string`&&r.trim()!==``&&e.style.setProperty(t,r.trim())}function P(e,t){let n=document.createElement(`div`);if(n.className=e,t)for(let e of t)n.appendChild(e);return n}function F(e,t){let n=P(`amos-js-form-skeleton-field`);t!==void 0&&(n.style.flexGrow=String(t)),e===`above`&&n.appendChild(P(`amos-js-form-skeleton-label`));let r=P(`amos-js-form-skeleton-input`);return e===`floating`&&r.classList.add(`amos-js-form-skeleton-input-floating`),n.appendChild(r),n}function I(e,t){return P(t?`amos-js-form-skeleton-row-stack`:`amos-js-form-skeleton-row`,e)}function L({labels:e,requirement:t,wrapCountryZip:n}){return t===`full`?[F(e),F(e),I([F(e,1.4),F(e,.7),F(e,.8)],!1),F(e)]:[I([F(e),F(e)],n)]}function R(e){let t=e.appearance?.labels??`above`,n=e.billingAddressRequirement??`country`;if(e.kind===`card`){let r=[F(t),I([F(t),F(t)],!1)];return e.additionalFields?.cardholderName&&r.push(F(t)),r.push(...L({labels:t,requirement:n,wrapCountryZip:!1})),r}return[F(t),I([F(t),F(t)],!0),F(t),I([F(`above`),F(`above`)],!0),...L({labels:t,requirement:n,wrapCountryZip:!0})]}function z(e){M();let t=P(`amos-js-form-skeleton`);t.setAttribute(`aria-hidden`,`true`);function n(e){N(t,e.appearance),t.replaceChildren(...R(e))}return n(e),{element:t,update:n}}var B={country:212,full:452},V=80,H={country:400,full:640};function U(e,t={cardholderName:!1},n=`country`){let r=Object.entries(t).filter(([,e])=>e).map(([e])=>e).join(`,`),a=new URLSearchParams({token:e,additionalFields:r,billingAddressRequirement:n});return`${i(e)}/iframe/card?${a}`}function W(e,t=`country`){let n=new URLSearchParams({token:e,billingAddressRequirement:t});return`${i(e)}/iframe/bank?${n}`}function G(e={cardholderName:!1},t=`country`){return`${(B[t]??B.country)+(e.cardholderName?V:0)}px`}function K(e=`country`){return`${H[e]??H.country}px`}function q(e,t){let n={...t};function r(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:d({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`FORM_VALIDITY_CHANGE`:n.onValidityChange?.({isValid:t.data.isValid});break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,r),{update(t){let r=`appearance`in t;n={...n,...t},r&&d({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,r)}}}function J(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 Y={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`},X={position:`absolute`,top:`0`,left:`-4px`,width:`calc(100% + 8px)`,height:`100%`,margin:`0`,transition:`none`,pointerEvents:`none`};function Z({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,Y,{height:r}),a}function Q({host:e,iframe:t,listenerOptions:n,skeletonOptions:r}){let i=document.createElement(`div`);i.style.position=`relative`,i.style.width=`100%`,i.setAttribute(`aria-busy`,`true`);let a=z(r);Object.assign(t.style,X),i.append(a.element,t),e.appendChild(i);let o=!1,s=!1,c,l=r.appearance,u,d;function f(){return i.getBoundingClientRect().height}function p(){return c?Number.parseFloat(c):NaN}function m(){if(o)return;o=!0,d!==void 0&&(clearTimeout(d),d=void 0);let e=f(),n=p(),r=Number.isFinite(n)?Math.max(n,e):e;t.style.transition=`none`,t.style.position=``,t.style.top=``,t.style.left=``,t.style.margin=Y.margin??``,t.style.height=`${r}px`,t.style.opacity=`1`,t.style.pointerEvents=``,a.element.remove(),i.removeAttribute(`aria-busy`),u=setTimeout(()=>{t.style.transition=`height 200ms ease-in-out`},400)}function h(){if(o||!s)return;let e=p(),t=f();Number.isFinite(e)&&e>=t-2&&m()}let g=q(t,{...n,onHeightChange:e=>{c=e,o?t.style.height=e:h(),n.onHeightChange?.(e)},onAppearanceReady:()=>{s=!0,h(),!o&&d===void 0&&(d=setTimeout(()=>{m()},1500)),n.onAppearanceReady?.()}});return{iframe:t,update(e){g.update(e),!o&&`appearance`in e&&(l=e.appearance,a.update({...r,appearance:l}))},destroy(){u!==void 0&&clearTimeout(u),d!==void 0&&clearTimeout(d),g.destroy(),i.remove()}}}function $(e,t){let n=J(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t;return Q({host:n,iframe:Z({src:U(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:G(i,a)}),listenerOptions:o,skeletonOptions:{kind:`card`,appearance:o.appearance,additionalFields:i,billingAddressRequirement:a}})}function ee(e,t){let n=J(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t;return Q({host:n,iframe:Z({src:W(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:K(i)}),listenerOptions:a,skeletonOptions:{kind:`bank`,appearance:a.appearance,billingAddressRequirement:i}})}function te(e,t){let n=J(e),{renderToken:r,...i}=t,a=Z({src:T(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:E(),allow:`payment`});n.appendChild(a);let o=D(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()}}}function ne(e,t){let n=J(e),{renderToken:r,...i}=t,a=Z({src:x(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:S(),allow:`payment`});n.appendChild(a);let o=w(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.attachApplePayButtonListeners=w,exports.attachGooglePayButtonListeners=D,exports.attachPaymentMethodFormListeners=q,exports.confirmPaymentIntent=v,exports.confirmSetupIntent=y,exports.createMessage=c,exports.decodeJwt=r,exports.formatGooglePayPaymentData=O,exports.getApplePayButtonInitialHeight=S,exports.getApplePayButtonSrc=x,exports.getBankAccountFormInitialHeight=K,exports.getBankAccountFormSrc=W,exports.getCreditCardFormInitialHeight=G,exports.getCreditCardFormSrc=U,exports.getEmbedOrigin=i,exports.getGooglePayButtonInitialHeight=E,exports.getGooglePayButtonSrc=T,exports.mountAmosApplePayButton=ne,exports.mountAmosBankAccountPaymentMethodForm=ee,exports.mountAmosCreditCardPaymentMethodForm=$,exports.mountAmosGooglePayButton=te,exports.pickApplePayButtonElementProps=o,exports.pickGooglePayButtonElementProps=s,exports.resetForm=_,exports.sendConfirmationResult=b,exports.sendParentReadyMessage=u,exports.serializeWalletButtonStyle=a,exports.updateAmount=m,exports.updateAppearance=d,exports.updateApplePayButton=f,exports.updateGooglePayButton=p,exports.updateMerchantName=h,exports.validateForm=g;
64
+ `;function M(){if(document.getElementById(k))return;let e=document.createElement(`style`);e.id=k,e.textContent=j,document.head.appendChild(e)}function N(e,t){for(let[t,n]of Object.entries(A))e.style.setProperty(t,n);let n=t?.themeVariables;if(n)for(let[t,r]of Object.entries(n))typeof r==`string`&&r.trim()!==``&&e.style.setProperty(t,r.trim())}function P(e,t){let n=document.createElement(`div`);if(n.className=e,t)for(let e of t)n.appendChild(e);return n}function F(e,t){let n=P(`amos-js-form-skeleton-field`);t!==void 0&&(n.style.flexGrow=String(t)),e===`above`&&n.appendChild(P(`amos-js-form-skeleton-label`));let r=P(`amos-js-form-skeleton-input`);return e===`floating`&&r.classList.add(`amos-js-form-skeleton-input-floating`),n.appendChild(r),n}function I(e,t){return P(t?`amos-js-form-skeleton-row-stack`:`amos-js-form-skeleton-row`,e)}function L({labels:e,requirement:t,wrapCountryZip:n}){return t===`full`?[F(e),F(e),I([F(e,1.4),F(e,.7),F(e,.8)],!1),F(e)]:[I([F(e),F(e)],n)]}function R(e){let t=e.appearance?.labels??`above`,n=e.billingAddressRequirement??`country`;if(e.kind===`card`){let r=[F(t),I([F(t),F(t)],!1)];return e.additionalFields?.cardholderName&&r.push(F(t)),r.push(...L({labels:t,requirement:n,wrapCountryZip:!1})),r}return[F(t),I([F(t),F(t)],!0),F(t),I([F(`above`),F(`above`)],!0),...L({labels:t,requirement:n,wrapCountryZip:!0})]}function z(e){M();let t=P(`amos-js-form-skeleton`);t.setAttribute(`aria-hidden`,`true`);function n(e){N(t,e.appearance),t.replaceChildren(...R(e))}return n(e),{element:t,update:n}}var B={country:212,full:452},V=80,H={country:400,full:640};function U(e,t={cardholderName:!1},n=`country`){let r=Object.entries(t).filter(([,e])=>e).map(([e])=>e).join(`,`),a=new URLSearchParams({token:e,additionalFields:r,billingAddressRequirement:n});return`${i(e)}/iframe/card?${a}`}function W(e,t=`country`){let n=new URLSearchParams({token:e,billingAddressRequirement:t});return`${i(e)}/iframe/bank?${n}`}function G(e={cardholderName:!1},t=`country`){return`${(B[t]??B.country)+(e.cardholderName?V:0)}px`}function K(e=`country`){return`${H[e]??H.country}px`}function q(e,t){let n={...t};function r(t){if(t.source===e.contentWindow)switch(t.data.type){case`IFRAME_READY`:u(e),d({iframe:e,appearance:n.appearance});break;case`UPDATE_HEIGHT`:n.onHeightChange?.(t.data.height);break;case`UPDATE_APPEARANCE`:d({iframe:e,appearance:t.data.appearance});break;case`UPDATED_APPEARANCE`:n.onAppearanceReady?.();break;case`FORM_VALIDITY_CHANGE`:n.onValidityChange?.({isValid:t.data.isValid});break;case`CONFIRMATION_RESULT`:n.onResult(t.data.result)}}return window.addEventListener(`message`,r),{update(t){let r=`appearance`in t;n={...n,...t},r&&d({iframe:e,appearance:n.appearance})},destroy(){window.removeEventListener(`message`,r)}}}function J(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 Y={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`},X={width:`100%`,transition:`height 200ms ease-in-out`,margin:`0`,opacity:`0`,border:`0`},Z={position:`absolute`,top:`0`,left:`-4px`,width:`calc(100% + 8px)`,height:`100%`,margin:`0`,transition:`none`,pointerEvents:`none`};function Q({src:e,title:t,name:n,height:r,allow:i,style:a=Y}){let o=document.createElement(`iframe`);return o.src=e,o.title=t,o.name=n,o.setAttribute(`role`,`presentation`),o.scrolling=`no`,i&&(o.allow=i),Object.assign(o.style,a,{height:r}),o}function $({host:e,iframe:t,listenerOptions:n,skeletonOptions:r}){let i=document.createElement(`div`);i.style.position=`relative`,i.style.width=`100%`,i.setAttribute(`aria-busy`,`true`);let a=z(r);Object.assign(t.style,Z),i.append(a.element,t),e.appendChild(i);let o=!1,s=!1,c,l=r.appearance,u,d;function f(){return i.getBoundingClientRect().height}function p(){return c?Number.parseFloat(c):NaN}function m(){if(o)return;o=!0,d!==void 0&&(clearTimeout(d),d=void 0);let e=f(),n=p(),r=Number.isFinite(n)?Math.max(n,e):e;t.style.transition=`none`,t.style.position=``,t.style.top=``,t.style.left=``,t.style.margin=Y.margin??``,t.style.height=`${r}px`,t.style.opacity=`1`,t.style.pointerEvents=``,a.element.remove(),i.removeAttribute(`aria-busy`),u=setTimeout(()=>{t.style.transition=`height 200ms ease-in-out`},400)}function h(){if(o||!s)return;let e=p(),t=f();Number.isFinite(e)&&e>=t-2&&m()}let g=q(t,{...n,onHeightChange:e=>{c=e,o?t.style.height=e:h(),n.onHeightChange?.(e)},onAppearanceReady:()=>{s=!0,h(),!o&&d===void 0&&(d=setTimeout(()=>{m()},1500)),n.onAppearanceReady?.()}});return{iframe:t,update(e){g.update(e),!o&&`appearance`in e&&(l=e.appearance,a.update({...r,appearance:l}))},destroy(){u!==void 0&&clearTimeout(u),d!==void 0&&clearTimeout(d),g.destroy(),i.remove()}}}function ee(e,t){let n=J(e),{renderToken:r,additionalFields:i={cardholderName:!1},billingAddressRequirement:a=`country`,...o}=t;return $({host:n,iframe:Q({src:U(r,i,a),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:G(i,a)}),listenerOptions:o,skeletonOptions:{kind:`card`,appearance:o.appearance,additionalFields:i,billingAddressRequirement:a}})}function te(e,t){let n=J(e),{renderToken:r,billingAddressRequirement:i=`country`,...a}=t;return $({host:n,iframe:Q({src:W(r,i),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:K(i)}),listenerOptions:a,skeletonOptions:{kind:`bank`,appearance:a.appearance,billingAddressRequirement:i}})}function ne(e,t){let n=J(e),{renderToken:r,...i}=t,a=Q({src:T(r),title:`Secure Google Pay button powered by Amos`,name:`amos-google-pay-button`,height:E(),allow:`payment`,style:X});n.appendChild(a);let o=D(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()}}}function re(e,t){let n=J(e),{renderToken:r,...i}=t,a=Q({src:x(r),title:`Secure Apple Pay button powered by Amos`,name:`amos-apple-pay-button`,height:S(),allow:`payment`,style:X});n.appendChild(a);let o=w(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.attachApplePayButtonListeners=w,exports.attachGooglePayButtonListeners=D,exports.attachPaymentMethodFormListeners=q,exports.confirmPaymentIntent=v,exports.confirmSetupIntent=y,exports.createMessage=c,exports.decodeJwt=r,exports.formatGooglePayPaymentData=O,exports.getApplePayButtonInitialHeight=S,exports.getApplePayButtonSrc=x,exports.getBankAccountFormInitialHeight=K,exports.getBankAccountFormSrc=W,exports.getCreditCardFormInitialHeight=G,exports.getCreditCardFormSrc=U,exports.getEmbedOrigin=i,exports.getGooglePayButtonInitialHeight=E,exports.getGooglePayButtonSrc=T,exports.mountAmosApplePayButton=re,exports.mountAmosBankAccountPaymentMethodForm=te,exports.mountAmosCreditCardPaymentMethodForm=ee,exports.mountAmosGooglePayButton=ne,exports.pickApplePayButtonElementProps=o,exports.pickGooglePayButtonElementProps=s,exports.resetForm=_,exports.sendConfirmationResult=b,exports.sendParentReadyMessage=u,exports.serializeWalletButtonStyle=a,exports.updateAmount=m,exports.updateAppearance=d,exports.updateApplePayButton=f,exports.updateGooglePayButton=p,exports.updateMerchantName=h,exports.validateForm=g;
package/dist/index.mjs CHANGED
@@ -99,7 +99,7 @@ function a(e) {
99
99
  }
100
100
  function o(e) {
101
101
  let t = {};
102
- if (e.buttonstyle !== void 0 && (t.buttonstyle = e.buttonstyle), e.type !== void 0 && (t.type = e.type), e.locale !== void 0 && (t.locale = e.locale), e.style !== void 0) {
102
+ if (e.fullWidth !== void 0 && (t.fullWidth = e.fullWidth), e.buttonstyle !== void 0 && (t.buttonstyle = e.buttonstyle), e.type !== void 0 && (t.type = e.type), e.locale !== void 0 && (t.locale = e.locale), e.style !== void 0) {
103
103
  let n = a(e.style);
104
104
  n && (t.style = n);
105
105
  }
@@ -107,7 +107,7 @@ function o(e) {
107
107
  }
108
108
  function s(e) {
109
109
  let t = {};
110
- if (e.buttonType !== void 0 && (t.buttonType = e.buttonType), e.buttonColor !== void 0 && (t.buttonColor = e.buttonColor), e.buttonRadius !== void 0 && (t.buttonRadius = e.buttonRadius), e.buttonSizeMode !== void 0 && (t.buttonSizeMode = e.buttonSizeMode), e.buttonLocale !== void 0 && (t.buttonLocale = e.buttonLocale), e.buttonBorderType !== void 0 && (t.buttonBorderType = e.buttonBorderType), e.style !== void 0) {
110
+ if (e.fullWidth !== void 0 && (t.fullWidth = e.fullWidth), e.buttonType !== void 0 && (t.buttonType = e.buttonType), e.buttonColor !== void 0 && (t.buttonColor = e.buttonColor), e.buttonRadius !== void 0 && (t.buttonRadius = e.buttonRadius), e.buttonSizeMode !== void 0 && (t.buttonSizeMode = e.buttonSizeMode), e.buttonLocale !== void 0 && (t.buttonLocale = e.buttonLocale), e.buttonBorderType !== void 0 && (t.buttonBorderType = e.buttonBorderType), e.style !== void 0) {
111
111
  let n = a(e.style);
112
112
  n && (t.style = n);
113
113
  }
@@ -277,7 +277,7 @@ function w(e, r) {
277
277
  }
278
278
  return window.addEventListener("message", c), {
279
279
  update(t) {
280
- let n = "appearance" in t, r = "amount" in t, c = "merchantName" in t, l = "buttonstyle" in t || "type" in t || "locale" in t || "style" in t;
280
+ let n = "appearance" in t, r = "amount" in t, c = "merchantName" in t, l = "fullWidth" in t || "buttonstyle" in t || "type" in t || "locale" in t || "style" in t;
281
281
  i = {
282
282
  ...i,
283
283
  ...t
@@ -360,7 +360,7 @@ function D(e, t) {
360
360
  }
361
361
  return window.addEventListener("message", o), {
362
362
  update(t) {
363
- let o = "appearance" in t, s = "amount" in t, c = "merchantName" in t, l = "buttonType" in t || "buttonColor" in t || "buttonRadius" in t || "buttonSizeMode" in t || "buttonLocale" in t || "buttonBorderType" in t || "style" in t;
363
+ let o = "appearance" in t, s = "amount" in t, c = "merchantName" in t, l = "fullWidth" in t || "buttonType" in t || "buttonColor" in t || "buttonRadius" in t || "buttonSizeMode" in t || "buttonLocale" in t || "buttonBorderType" in t || "style" in t;
364
364
  n = {
365
365
  ...n,
366
366
  ...t
@@ -563,6 +563,12 @@ var Y = {
563
563
  opacity: "0",
564
564
  border: "0"
565
565
  }, X = {
566
+ width: "100%",
567
+ transition: "height 200ms ease-in-out",
568
+ margin: "0",
569
+ opacity: "0",
570
+ border: "0"
571
+ }, Z = {
566
572
  position: "absolute",
567
573
  top: "0",
568
574
  left: "-4px",
@@ -572,15 +578,15 @@ var Y = {
572
578
  transition: "none",
573
579
  pointerEvents: "none"
574
580
  };
575
- function Z({ src: e, title: t, name: n, height: r, allow: i }) {
576
- let a = document.createElement("iframe");
577
- 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, Y, { height: r }), a;
581
+ function Q({ src: e, title: t, name: n, height: r, allow: i, style: a = Y }) {
582
+ let o = document.createElement("iframe");
583
+ return o.src = e, o.title = t, o.name = n, o.setAttribute("role", "presentation"), o.scrolling = "no", i && (o.allow = i), Object.assign(o.style, a, { height: r }), o;
578
584
  }
579
- function Q({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
585
+ function $({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
580
586
  let i = document.createElement("div");
581
587
  i.style.position = "relative", i.style.width = "100%", i.setAttribute("aria-busy", "true");
582
588
  let a = z(r);
583
- Object.assign(t.style, X), i.append(a.element, t), e.appendChild(i);
589
+ Object.assign(t.style, Z), i.append(a.element, t), e.appendChild(i);
584
590
  let o = !1, s = !1, c, l = r.appearance, u, d;
585
591
  function f() {
586
592
  return i.getBoundingClientRect().height;
@@ -625,11 +631,11 @@ function Q({ host: e, iframe: t, listenerOptions: n, skeletonOptions: r }) {
625
631
  }
626
632
  };
627
633
  }
628
- function $(e, t) {
634
+ function ee(e, t) {
629
635
  let n = J(e), { renderToken: r, additionalFields: i = { cardholderName: !1 }, billingAddressRequirement: a = "country", ...o } = t;
630
- return Q({
636
+ return $({
631
637
  host: n,
632
- iframe: Z({
638
+ iframe: Q({
633
639
  src: U(r, i, a),
634
640
  title: "Secure credit card payment method form powered by Amos",
635
641
  name: "amos-credit-card-payment-method-form",
@@ -644,11 +650,11 @@ function $(e, t) {
644
650
  }
645
651
  });
646
652
  }
647
- function ee(e, t) {
653
+ function te(e, t) {
648
654
  let n = J(e), { renderToken: r, billingAddressRequirement: i = "country", ...a } = t;
649
- return Q({
655
+ return $({
650
656
  host: n,
651
- iframe: Z({
657
+ iframe: Q({
652
658
  src: W(r, i),
653
659
  title: "Secure bank account payment method form powered by Amos",
654
660
  name: "amos-bank-account-payment-method-form",
@@ -662,13 +668,14 @@ function ee(e, t) {
662
668
  }
663
669
  });
664
670
  }
665
- function te(e, t) {
666
- let n = J(e), { renderToken: r, ...i } = t, a = Z({
671
+ function ne(e, t) {
672
+ let n = J(e), { renderToken: r, ...i } = t, a = Q({
667
673
  src: T(r),
668
674
  title: "Secure Google Pay button powered by Amos",
669
675
  name: "amos-google-pay-button",
670
676
  height: E(),
671
- allow: "payment"
677
+ allow: "payment",
678
+ style: X
672
679
  });
673
680
  n.appendChild(a);
674
681
  let o = D(a, {
@@ -688,13 +695,14 @@ function te(e, t) {
688
695
  }
689
696
  };
690
697
  }
691
- function ne(e, t) {
692
- let n = J(e), { renderToken: r, ...i } = t, a = Z({
698
+ function re(e, t) {
699
+ let n = J(e), { renderToken: r, ...i } = t, a = Q({
693
700
  src: x(r),
694
701
  title: "Secure Apple Pay button powered by Amos",
695
702
  name: "amos-apple-pay-button",
696
703
  height: S(),
697
- allow: "payment"
704
+ allow: "payment",
705
+ style: X
698
706
  });
699
707
  n.appendChild(a);
700
708
  let o = w(a, {
@@ -715,4 +723,4 @@ function ne(e, t) {
715
723
  };
716
724
  }
717
725
  //#endregion
718
- export { w as attachApplePayButtonListeners, D as attachGooglePayButtonListeners, q as attachPaymentMethodFormListeners, v as confirmPaymentIntent, y as confirmSetupIntent, c as createMessage, r as decodeJwt, O as formatGooglePayPaymentData, S as getApplePayButtonInitialHeight, x as getApplePayButtonSrc, K as getBankAccountFormInitialHeight, W as getBankAccountFormSrc, G as getCreditCardFormInitialHeight, U as getCreditCardFormSrc, i as getEmbedOrigin, E as getGooglePayButtonInitialHeight, T as getGooglePayButtonSrc, ne as mountAmosApplePayButton, ee as mountAmosBankAccountPaymentMethodForm, $ as mountAmosCreditCardPaymentMethodForm, te as mountAmosGooglePayButton, o as pickApplePayButtonElementProps, s as pickGooglePayButtonElementProps, _ as resetForm, b as sendConfirmationResult, u as sendParentReadyMessage, a as serializeWalletButtonStyle, m as updateAmount, d as updateAppearance, f as updateApplePayButton, p as updateGooglePayButton, h as updateMerchantName, g as validateForm };
726
+ export { w as attachApplePayButtonListeners, D as attachGooglePayButtonListeners, q as attachPaymentMethodFormListeners, v as confirmPaymentIntent, y as confirmSetupIntent, c as createMessage, r as decodeJwt, O as formatGooglePayPaymentData, S as getApplePayButtonInitialHeight, x as getApplePayButtonSrc, K as getBankAccountFormInitialHeight, W as getBankAccountFormSrc, G as getCreditCardFormInitialHeight, U as getCreditCardFormSrc, i as getEmbedOrigin, E as getGooglePayButtonInitialHeight, T as getGooglePayButtonSrc, re as mountAmosApplePayButton, te as mountAmosBankAccountPaymentMethodForm, ee as mountAmosCreditCardPaymentMethodForm, ne as mountAmosGooglePayButton, o as pickApplePayButtonElementProps, s as pickGooglePayButtonElementProps, _ as resetForm, b as sendConfirmationResult, u as sendParentReadyMessage, a as serializeWalletButtonStyle, m as updateAmount, d as updateAppearance, f as updateApplePayButton, p as updateGooglePayButton, h as updateMerchantName, g as validateForm };
package/dist/types.d.ts CHANGED
@@ -56,7 +56,7 @@ export type ConfirmationResult = {
56
56
  * Amos iframe UI. Only the variables you provide are sent; omitted
57
57
  * variables keep their defaults.
58
58
  */
59
- export type ThemeVariable = "--background" | "--foreground" | "--primary" | "--primary-foreground" | "--secondary" | "--secondary-foreground" | "--muted" | "--muted-foreground" | "--accent" | "--accent-foreground" | "--destructive" | "--destructive-foreground" | "--border" | "--popover" | "--popover-foreground" | "--input" | "--input-background" | "--input-height" | "--input-font-size" | "--input-font-weight" | "--input-padding" | "--input-border-width" | "--input-shadow" | "--floating-input-height" | "--floating-label-font-size" | "--floating-label-font-weight" | "--floating-label-color" | "--floating-label-offset" | "--label-font-size" | "--label-font-weight" | "--field-gap" | "--control-gap" | "--error-font-size" | "--radio-size" | "--ring" | "--ring-width" | "--radius";
59
+ export type ThemeVariable = "--background" | "--foreground" | "--primary" | "--primary-foreground" | "--secondary" | "--secondary-foreground" | "--muted" | "--muted-foreground" | "--accent" | "--accent-foreground" | "--destructive" | "--destructive-foreground" | "--border" | "--popover" | "--popover-foreground" | "--input" | "--input-background" | "--input-height" | "--input-font-size" | "--input-font-weight" | "--input-padding" | "--input-border-width" | "--input-shadow" | "--floating-input-height" | "--floating-label-font-size" | "--floating-label-empty-font-size" | "--floating-label-font-weight" | "--floating-label-color" | "--floating-label-floated-color" | "--floating-label-offset" | "--label-font-size" | "--label-font-weight" | "--field-gap" | "--control-gap" | "--error-font-size" | "--radio-size" | "--ring" | "--ring-width" | "--radius";
60
60
  /**
61
61
  * Placement of field labels in payment method forms.
62
62
  *
@@ -106,6 +106,13 @@ export type ApplePayButtonType = "plain" | "buy" | "set-up" | "donate" | "check-
106
106
  * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
107
107
  */
108
108
  export type ApplePayButtonElementProps = {
109
+ /**
110
+ * Stretch the button to the iframe width while preserving its default
111
+ * compact size when omitted.
112
+ *
113
+ * @default false
114
+ */
115
+ fullWidth?: boolean;
109
116
  /**
110
117
  * Apple Pay button color.
111
118
  *
@@ -138,6 +145,13 @@ export type ApplePayButtonElementProps = {
138
145
  * @see https://developers.google.com/pay/api/web/guides/resources/customize
139
146
  */
140
147
  export type GooglePayButtonElementProps = {
148
+ /**
149
+ * Stretch the button to the iframe width while preserving its default
150
+ * compact size when omitted.
151
+ *
152
+ * @default false
153
+ */
154
+ fullWidth?: boolean;
141
155
  /**
142
156
  * Button label / verb.
143
157
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@amos.com/amos-js",
3
- "version": "0.9.12",
3
+ "version": "0.9.14",
4
4
  "main": "dist/index.js",
5
5
  "repository": {
6
6
  "type": "git",
package/src/apple-pay.ts CHANGED
@@ -209,6 +209,7 @@ export function attachApplePayButtonListeners(
209
209
  const hadAmount = "amount" in patch;
210
210
  const hadMerchantName = "merchantName" in patch;
211
211
  const hadButtonProps =
212
+ "fullWidth" in patch ||
212
213
  "buttonstyle" in patch ||
213
214
  "type" in patch ||
214
215
  "locale" in patch ||
package/src/google-pay.ts CHANGED
@@ -178,6 +178,7 @@ export function attachGooglePayButtonListeners(
178
178
  const hadAmount = "amount" in patch;
179
179
  const hadMerchantName = "merchantName" in patch;
180
180
  const hadButtonProps =
181
+ "fullWidth" in patch ||
181
182
  "buttonType" in patch ||
182
183
  "buttonColor" in patch ||
183
184
  "buttonRadius" in patch ||
package/src/mount.ts CHANGED
@@ -43,7 +43,7 @@ function resolveContainer(container: Container): HTMLElement {
43
43
  return container;
44
44
  }
45
45
 
46
- const SHARED_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
46
+ const FORM_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
47
47
  width: "calc(100% + 8px)",
48
48
  transition: "opacity 150ms ease-in, height 200ms ease-in-out",
49
49
  margin: "0 -4px",
@@ -51,6 +51,14 @@ const SHARED_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
51
51
  border: "0",
52
52
  };
53
53
 
54
+ const WALLET_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
55
+ width: "100%",
56
+ transition: "height 200ms ease-in-out",
57
+ margin: "0",
58
+ opacity: "0",
59
+ border: "0",
60
+ };
61
+
54
62
  const SKELETON_IFRAME_STYLE: Partial<CSSStyleDeclaration> = {
55
63
  position: "absolute",
56
64
  top: "0",
@@ -69,12 +77,14 @@ function createIframe({
69
77
  name,
70
78
  height,
71
79
  allow,
80
+ style = FORM_IFRAME_STYLE,
72
81
  }: {
73
82
  src: string;
74
83
  title: string;
75
84
  name: string;
76
85
  height: string;
77
86
  allow?: string;
87
+ style?: Partial<CSSStyleDeclaration>;
78
88
  }): HTMLIFrameElement {
79
89
  const iframe = document.createElement("iframe");
80
90
  iframe.src = src;
@@ -85,7 +95,7 @@ function createIframe({
85
95
  if (allow) {
86
96
  iframe.allow = allow;
87
97
  }
88
- Object.assign(iframe.style, SHARED_IFRAME_STYLE, { height });
98
+ Object.assign(iframe.style, style, { height });
89
99
  return iframe;
90
100
  }
91
101
 
@@ -146,7 +156,7 @@ function mountPaymentMethodFormWithSkeleton({
146
156
  iframe.style.position = "";
147
157
  iframe.style.top = "";
148
158
  iframe.style.left = "";
149
- iframe.style.margin = SHARED_IFRAME_STYLE.margin ?? "";
159
+ iframe.style.margin = FORM_IFRAME_STYLE.margin ?? "";
150
160
  iframe.style.height = `${revealPx}px`;
151
161
  iframe.style.opacity = "1";
152
162
  iframe.style.pointerEvents = "";
@@ -412,6 +422,7 @@ export function mountAmosGooglePayButton(
412
422
  name: "amos-google-pay-button",
413
423
  height: getGooglePayButtonInitialHeight(),
414
424
  allow: "payment",
425
+ style: WALLET_IFRAME_STYLE,
415
426
  });
416
427
  host.appendChild(iframe);
417
428
 
@@ -478,6 +489,7 @@ export function mountAmosApplePayButton(
478
489
  name: "amos-apple-pay-button",
479
490
  height: getApplePayButtonInitialHeight(),
480
491
  allow: "payment",
492
+ style: WALLET_IFRAME_STYLE,
481
493
  });
482
494
  host.appendChild(iframe);
483
495
 
package/src/types.ts CHANGED
@@ -219,6 +219,13 @@ export type ThemeVariable =
219
219
  * Default: 0.75rem
220
220
  */
221
221
  | "--floating-label-font-size"
222
+ /*
223
+ * Font size of floating labels in the empty / unfocused position
224
+ * (e.g. `0.9375rem`, `15px`). Falls back to `--input-font-size` when unset.
225
+ *
226
+ * Default: var(--input-font-size)
227
+ */
228
+ | "--floating-label-empty-font-size"
222
229
  /*
223
230
  * Font weight of floating labels (e.g. `400`, `500`, `normal`, `bold`).
224
231
  *
@@ -226,11 +233,19 @@ export type ThemeVariable =
226
233
  */
227
234
  | "--floating-label-font-weight"
228
235
  /*
229
- * Color of floating labels. Defaults to `--muted-foreground`.
236
+ * Color of floating labels in the empty / unfocused position.
230
237
  *
231
238
  * Default: var(--muted-foreground)
232
239
  */
233
240
  | "--floating-label-color"
241
+ /*
242
+ * Color of floating labels when focused or filled. Falls back to
243
+ * `--floating-label-color` when unset, so overriding only
244
+ * `--floating-label-color` still recolors both states.
245
+ *
246
+ * Default: var(--floating-label-color)
247
+ */
248
+ | "--floating-label-floated-color"
234
249
  /*
235
250
  * Top offset of the shrunk floating label inside the control (e.g. `0.625rem`).
236
251
  *
@@ -361,6 +376,13 @@ export type ApplePayButtonType =
361
376
  * @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple-pay-button
362
377
  */
363
378
  export type ApplePayButtonElementProps = {
379
+ /**
380
+ * Stretch the button to the iframe width while preserving its default
381
+ * compact size when omitted.
382
+ *
383
+ * @default false
384
+ */
385
+ fullWidth?: boolean;
364
386
  /**
365
387
  * Apple Pay button color.
366
388
  *
@@ -394,6 +416,13 @@ export type ApplePayButtonElementProps = {
394
416
  * @see https://developers.google.com/pay/api/web/guides/resources/customize
395
417
  */
396
418
  export type GooglePayButtonElementProps = {
419
+ /**
420
+ * Stretch the button to the iframe width while preserving its default
421
+ * compact size when omitted.
422
+ *
423
+ * @default false
424
+ */
425
+ fullWidth?: boolean;
397
426
  /**
398
427
  * Button label / verb.
399
428
  *
@@ -452,6 +481,9 @@ export function pickApplePayButtonElementProps(
452
481
  options: ApplePayButtonElementProps,
453
482
  ): ApplePayButtonElementProps {
454
483
  const props: ApplePayButtonElementProps = {};
484
+ if (options.fullWidth !== undefined) {
485
+ props.fullWidth = options.fullWidth;
486
+ }
455
487
  if (options.buttonstyle !== undefined) {
456
488
  props.buttonstyle = options.buttonstyle;
457
489
  }
@@ -474,6 +506,9 @@ export function pickGooglePayButtonElementProps(
474
506
  options: GooglePayButtonElementProps,
475
507
  ): GooglePayButtonElementProps {
476
508
  const props: GooglePayButtonElementProps = {};
509
+ if (options.fullWidth !== undefined) {
510
+ props.fullWidth = options.fullWidth;
511
+ }
477
512
  if (options.buttonType !== undefined) {
478
513
  props.buttonType = options.buttonType;
479
514
  }