@amos.com/amos-js 0.3.17 → 0.3.19
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 +8 -8
- package/dist/google-pay.d.ts +7 -21
- package/dist/index.d.ts +1 -43
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -0
- package/package.json +2 -2
- package/src/google-pay.ts +9 -1
- package/src/index.ts +1 -46
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ npm install @amos.com/amos-js
|
|
|
12
12
|
|
|
13
13
|
## What it gives you
|
|
14
14
|
|
|
15
|
-
- **Types** for the `postMessage` protocol used between your page and the Amos iframe (`Message`, `Appearance`, `ThemeVariable`)
|
|
15
|
+
- **Types** for the `postMessage` protocol used between your page and the Amos iframe (`Message`, `Appearance`, `ThemeVariable`). OpenAPI schema types (for example `components["schemas"]["PaymentIntent"]`) come from `@amos.com/node`.
|
|
16
16
|
- **Iframe-targeted helpers** to validate the form, confirm a payment intent, confirm a setup intent, update appearance, etc.
|
|
17
17
|
- **Mount functions** (`mountAmosCreditCardPaymentMethodForm`, `mountAmosBankAccountPaymentMethodForm`, `mountAmosGooglePayButton`) that create the iframe, wire up its message protocol, manage its height/opacity, and return a small controller for updating options and tearing it down.
|
|
18
18
|
- **Lower-level building blocks** (`getCreditCardFormSrc`, `attachPaymentMethodFormListeners`, `attachGooglePayButtonListeners`, ...) for integrators (such as `@amos.com/react-amos-js`) that want to render the iframe element themselves.
|
|
@@ -90,7 +90,7 @@ The following flow is for credit card and bank account payment method types only
|
|
|
90
90
|
2. **Render your checkout UI** by calling `mountAmosCreditCardPaymentMethodForm(container, options)` (or `mountAmosBankAccountPaymentMethodForm(...)`) along with the required option (`onConfirmationFailed`) and optional callbacks (`onPaymentIntentConfirmationSucceeded`, `onSetupIntentConfirmationSucceeded`). The iframe height is auto-managed by the SDK.
|
|
91
91
|
3. **User clicks "Pay now" button**: call `validateForm({ iframe: form.iframe })`, which returns `Promise<true>` if the embedded form is valid, and `Promise<false>` otherwise.
|
|
92
92
|
4. **Create payment intent on your server**: use your server-side Amos client to call `POST /payment_intents`. You may also associate this payment intent with a new or existing customer via `POST /customers`. This must be server-side because it uses your private API key.
|
|
93
|
-
5. **Return the payment intent token to the browser**: your backend responds with the `EmbedToken` needed for confirmation.
|
|
93
|
+
5. **Return the payment intent token to the browser**: your backend responds with the embed token (`components["schemas"]["EmbedToken"]`) needed for confirmation.
|
|
94
94
|
6. **Confirm the payment intent from the client**: call `confirmPaymentIntent({ iframe: form.iframe, token })` in the browser to continue the payment flow.
|
|
95
95
|
7. **Handle UX**: show the user a "processing" state when the "Pay now" button is clicked, and show a success or error message via `onPaymentIntentConfirmationSucceeded` and `onConfirmationFailed`.
|
|
96
96
|
|
|
@@ -231,8 +231,8 @@ Mount the secure credit-card payment method form into a container element (an `H
|
|
|
231
231
|
|
|
232
232
|
- `appearance` (`{ themeVariables?: Partial<Record<ThemeVariable, string>>; labels?: "above" | "floating" | "placeholder" }`)
|
|
233
233
|
- `additionalFields` (`{ cardholderName: boolean }`, defaults to `{ cardholderName: false }`)
|
|
234
|
-
- `onPaymentIntentConfirmationSucceeded` (`(paymentIntent: PaymentIntent) => void`)
|
|
235
|
-
- `onSetupIntentConfirmationSucceeded` (`(setupIntent: SetupIntent) => void`)
|
|
234
|
+
- `onPaymentIntentConfirmationSucceeded` (`(paymentIntent: components["schemas"]["PaymentIntent"]) => void`)
|
|
235
|
+
- `onSetupIntentConfirmationSucceeded` (`(setupIntent: components["schemas"]["SetupIntent"]) => void`)
|
|
236
236
|
- `onHeightChange`, `onAppearanceReady` (advanced — override the default iframe styling logic)
|
|
237
237
|
|
|
238
238
|
**Returns** `AmosPaymentMethodFormMountController`:
|
|
@@ -254,8 +254,8 @@ Mount the secure Google Pay button (express checkout) into a container element.
|
|
|
254
254
|
- `renderToken` (`string`)
|
|
255
255
|
- `amount` (`string`)
|
|
256
256
|
- `merchantName` (`string`)
|
|
257
|
-
- `onInitiatePaymentIntentRequest` (`({ paymentIntentCreateAttributes, customerCreateAttributes }) => Promise<EmbedToken["token"]>`)
|
|
258
|
-
- `onPaymentIntentConfirmationSucceeded` (`(paymentIntent: PaymentIntent) => void`)
|
|
257
|
+
- `onInitiatePaymentIntentRequest` (`({ paymentIntentCreateAttributes, customerCreateAttributes }) => Promise<components["schemas"]["EmbedToken"]["token"]>`)
|
|
258
|
+
- `onPaymentIntentConfirmationSucceeded` (`(paymentIntent: components["schemas"]["PaymentIntent"]) => void`)
|
|
259
259
|
- `onConfirmationFailed` (`(errorMessage: string) => void`)
|
|
260
260
|
|
|
261
261
|
**Optional `options`:** `appearance`, `onHeightChange`, `onAppearanceReady`.
|
|
@@ -296,13 +296,13 @@ Advanced helpers exposed for integrators that need to construct or inspect the m
|
|
|
296
296
|
|
|
297
297
|
### Exported types
|
|
298
298
|
|
|
299
|
-
`Message`, `Appearance`, `ThemeVariable`, `
|
|
299
|
+
`Message`, `Appearance`, `ThemeVariable`, `FormattedGooglePayPaymentData`, plus the per-form `*Options` and `*Controller` types. For OpenAPI schema types, import `components` from `@amos.com/node`.
|
|
300
300
|
|
|
301
301
|
## Notes and potential gotchas
|
|
302
302
|
|
|
303
303
|
- **`iframe` argument**: every messaging helper (`validateForm`, `confirmPaymentIntent`, `confirmSetupIntent`) accepts the `iframe` element directly. With the mount helpers, use `controller.iframe`.
|
|
304
304
|
- **Same components for payment vs setup intents**: `mountAmosCreditCardPaymentMethodForm` and `mountAmosBankAccountPaymentMethodForm` support both payment intents and setup intents. The flow differs only by which server call you make and which confirmation function you use. You may optionally provide `onPaymentIntentConfirmationSucceeded` and/or `onSetupIntentConfirmationSucceeded`; the appropriate one is invoked based on the flow.
|
|
305
|
-
- **Amount format**: for `mountAmosGooglePayButton`, `amount` is a string (e.g. `"5000"` for $50.00). For `CreatePaymentIntentInput` on the server, `amount` is a number in cents (e.g. `5000`).
|
|
305
|
+
- **Amount format**: for `mountAmosGooglePayButton`, `amount` is a string (e.g. `"5000"` for $50.00). For `components["schemas"]["CreatePaymentIntentInput"]` on the server, `amount` is a number in cents (e.g. `5000`).
|
|
306
306
|
- **Browser-only**: the mount and messaging helpers require `window` and the DOM. They are not safe to call during server-side rendering — call them from client-side code only (for example, inside a `useEffect`-like hook in your framework of choice).
|
|
307
307
|
|
|
308
308
|
---
|
package/dist/google-pay.d.ts
CHANGED
|
@@ -74,6 +74,12 @@ export type GooglePayButtonController = {
|
|
|
74
74
|
* correct `src` (see {@link getGooglePayButtonSrc}).
|
|
75
75
|
*/
|
|
76
76
|
export declare function attachGooglePayButtonListeners(iframe: HTMLIFrameElement, options: GooglePayButtonListenerOptions): GooglePayButtonController;
|
|
77
|
+
/**
|
|
78
|
+
* Result of {@link formatGooglePayPaymentData}.
|
|
79
|
+
*/
|
|
80
|
+
export type FormattedGooglePayPaymentData = {
|
|
81
|
+
paymentMethod: components["schemas"]["EmbedConfirmGooglePayPaymentMethodInput"];
|
|
82
|
+
};
|
|
77
83
|
/**
|
|
78
84
|
* Transform raw Google Pay payment data into an Amos-compatible
|
|
79
85
|
* `paymentMethod` payload. Use this when integrating with the raw
|
|
@@ -82,24 +88,4 @@ export declare function attachGooglePayButtonListeners(iframe: HTMLIFrameElement
|
|
|
82
88
|
*/
|
|
83
89
|
export declare function formatGooglePayPaymentData({ paymentData, }: {
|
|
84
90
|
paymentData: google.payments.api.PaymentData;
|
|
85
|
-
}):
|
|
86
|
-
paymentMethod: {
|
|
87
|
-
billing_address_attributes: {
|
|
88
|
-
name: string | undefined;
|
|
89
|
-
address_line1: string | undefined;
|
|
90
|
-
address_line2: string | undefined;
|
|
91
|
-
city: string | undefined;
|
|
92
|
-
state: string | undefined;
|
|
93
|
-
postal_code: string | undefined;
|
|
94
|
-
country: string | undefined;
|
|
95
|
-
email: string | undefined;
|
|
96
|
-
phone: string | undefined;
|
|
97
|
-
};
|
|
98
|
-
card_profile_attributes: {
|
|
99
|
-
wallet_provider: string;
|
|
100
|
-
wallet_payload: string;
|
|
101
|
-
wallet_last4: string | undefined;
|
|
102
|
-
wallet_brand: string | undefined;
|
|
103
|
-
};
|
|
104
|
-
};
|
|
105
|
-
};
|
|
91
|
+
}): FormattedGooglePayPaymentData;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/// <reference types="googlepay" />
|
|
2
|
-
|
|
3
|
-
export type { GooglePayButtonController, GooglePayButtonListenerOptions, } from './google-pay';
|
|
2
|
+
export type { FormattedGooglePayPaymentData, GooglePayButtonController, GooglePayButtonListenerOptions, } from './google-pay';
|
|
4
3
|
export { attachGooglePayButtonListeners, formatGooglePayPaymentData, getGooglePayButtonInitialHeight, getGooglePayButtonSrc, } from './google-pay';
|
|
5
4
|
export { decodeJwt, getEmbedOrigin } from './jwt';
|
|
6
5
|
export { confirmPaymentIntent, confirmSetupIntent, sendConfirmationFailed, sendParentReadyMessage, updateAmount, updateAppearance, updateMerchantName, validateForm, } from './messaging';
|
|
@@ -10,44 +9,3 @@ export type { CreditCardAdditionalFields, PaymentMethodFormController, PaymentMe
|
|
|
10
9
|
export { attachPaymentMethodFormListeners, getBankAccountFormInitialHeight, getBankAccountFormSrc, getCreditCardFormInitialHeight, getCreditCardFormSrc, } from './payment-method-form';
|
|
11
10
|
export type { Appearance, AppearanceLabels, Message, ThemeVariable, } from './types';
|
|
12
11
|
export { createMessage } from './types';
|
|
13
|
-
/**
|
|
14
|
-
* Convenience alias for `components["schemas"]["CreateCustomerInput"]`.
|
|
15
|
-
*/
|
|
16
|
-
export type CreateCustomerInput = components["schemas"]["CreateCustomerInput"];
|
|
17
|
-
/**
|
|
18
|
-
* Convenience alias for
|
|
19
|
-
* `components["schemas"]["CreatePaymentIntentInput"]`.
|
|
20
|
-
*/
|
|
21
|
-
export type CreatePaymentIntentInput = components["schemas"]["CreatePaymentIntentInput"];
|
|
22
|
-
/**
|
|
23
|
-
* Convenience alias for
|
|
24
|
-
* `components["schemas"]["CreateSetupIntentInput"]`.
|
|
25
|
-
*/
|
|
26
|
-
export type CreateSetupIntentInput = components["schemas"]["CreateSetupIntentInput"];
|
|
27
|
-
/**
|
|
28
|
-
* Convenience alias for `components["schemas"]["PaymentIntent"]`.
|
|
29
|
-
*/
|
|
30
|
-
export type PaymentIntent = components["schemas"]["PaymentIntent"];
|
|
31
|
-
/**
|
|
32
|
-
* Convenience alias for `components["schemas"]["SetupIntent"]`.
|
|
33
|
-
*/
|
|
34
|
-
export type SetupIntent = components["schemas"]["SetupIntent"];
|
|
35
|
-
/**
|
|
36
|
-
* API envelope `{ token?, ttl? }` for a minted embed JWT.
|
|
37
|
-
*
|
|
38
|
-
* `POST /payment_intents` and `POST /setup_intents` resolve to this
|
|
39
|
-
* shape. {@link confirmPaymentIntent}, {@link confirmSetupIntent}, and
|
|
40
|
-
* the Google Pay `onInitiatePaymentIntentRequest` return type use
|
|
41
|
-
* `Pick<EmbedToken, "token">` (the JWT string returned by your server).
|
|
42
|
-
*/
|
|
43
|
-
export type EmbedToken = components["schemas"]["EmbedToken"];
|
|
44
|
-
/**
|
|
45
|
-
* Decoded JWT payload for an embed token (`account_id`,
|
|
46
|
-
* `payment_intent_id`, `setup_intent_id`, etc.).
|
|
47
|
-
*/
|
|
48
|
-
export type EmbedTokenJwt = components["schemas"]["EmbedTokenJwt"];
|
|
49
|
-
/**
|
|
50
|
-
* Decoded JWT payload for the dashboard render token (`env`, `origins`,
|
|
51
|
-
* `allowed_payment_method_types`, `render_template_id`, etc.).
|
|
52
|
-
*/
|
|
53
|
-
export type RenderTokenJwt = components["schemas"]["RenderTokenJwt"];
|
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:{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 h(e,n={cardholderName:!1}){let r=Object.entries(n).filter(([,e])=>e).map(([e])=>e).join(`,`);return`${t(e)}/iframe/card?token=${e}&additionalFields=${r}`}function g(e){return`${t(e)}/iframe/bank?token=${e}`}function _(e={cardholderName:!1}){return e.cardholderName?`292px`:`212px`}function v(){return`400px`}function y(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 b(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 x={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function S({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,x,{height:r}),a}function C(e,t){let n=b(e),{renderToken:r,additionalFields:i={cardholderName:!1},...a}=t,o=S({src:h(r,i),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:_(i)});n.appendChild(o);let s=y(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 w(e,t){let n=b(e),{renderToken:r,...i}=t,a=S({src:g(r),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:v()});n.appendChild(a);let o=y(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 T(e,t){let n=b(e),{renderToken:r,...i}=t,a=S({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=y,exports.confirmPaymentIntent=c,exports.confirmSetupIntent=l,exports.createMessage=n,exports.decodeJwt=e,exports.formatGooglePayPaymentData=m,exports.getBankAccountFormInitialHeight=v,exports.getBankAccountFormSrc=g,exports.getCreditCardFormInitialHeight=_,exports.getCreditCardFormSrc=h,exports.getEmbedOrigin=t,exports.getGooglePayButtonInitialHeight=f,exports.getGooglePayButtonSrc=d,exports.mountAmosBankAccountPaymentMethodForm=w,exports.mountAmosCreditCardPaymentMethodForm=C,exports.mountAmosGooglePayButton=T,exports.sendConfirmationFailed=u,exports.sendParentReadyMessage=r,exports.updateAmount=a,exports.updateAppearance=i,exports.updateMerchantName=o,exports.validateForm=s;
|
|
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 h(e,n={cardholderName:!1}){let r=Object.entries(n).filter(([,e])=>e).map(([e])=>e).join(`,`);return`${t(e)}/iframe/card?token=${e}&additionalFields=${r}`}function g(e){return`${t(e)}/iframe/bank?token=${e}`}function _(e={cardholderName:!1}){return e.cardholderName?`292px`:`212px`}function v(){return`400px`}function y(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 b(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 x={width:`calc(100% + 8px)`,transition:`opacity 150ms ease-in, height 200ms ease-in-out`,margin:`0 -4px`,opacity:`0`,border:`0`};function S({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,x,{height:r}),a}function C(e,t){let n=b(e),{renderToken:r,additionalFields:i={cardholderName:!1},...a}=t,o=S({src:h(r,i),title:`Secure credit card payment method form powered by Amos`,name:`amos-credit-card-payment-method-form`,height:_(i)});n.appendChild(o);let s=y(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 w(e,t){let n=b(e),{renderToken:r,...i}=t,a=S({src:g(r),title:`Secure bank account payment method form powered by Amos`,name:`amos-bank-account-payment-method-form`,height:v()});n.appendChild(a);let o=y(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 T(e,t){let n=b(e),{renderToken:r,...i}=t,a=S({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=y,exports.confirmPaymentIntent=c,exports.confirmSetupIntent=l,exports.createMessage=n,exports.decodeJwt=e,exports.formatGooglePayPaymentData=m,exports.getBankAccountFormInitialHeight=v,exports.getBankAccountFormSrc=g,exports.getCreditCardFormInitialHeight=_,exports.getCreditCardFormSrc=h,exports.getEmbedOrigin=t,exports.getGooglePayButtonInitialHeight=f,exports.getGooglePayButtonSrc=d,exports.mountAmosBankAccountPaymentMethodForm=w,exports.mountAmosCreditCardPaymentMethodForm=C,exports.mountAmosGooglePayButton=T,exports.sendConfirmationFailed=u,exports.sendParentReadyMessage=r,exports.updateAmount=a,exports.updateAppearance=i,exports.updateMerchantName=o,exports.validateForm=s;
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amos.com/amos-js",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.19",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"vite-plugin-dts": "5.0.2"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@amos.com/node": "0.1.
|
|
45
|
+
"@amos.com/node": "0.1.23",
|
|
46
46
|
"@types/googlepay": "0.7.11"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
package/src/google-pay.ts
CHANGED
|
@@ -186,6 +186,13 @@ export function attachGooglePayButtonListeners(
|
|
|
186
186
|
};
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
+
/**
|
|
190
|
+
* Result of {@link formatGooglePayPaymentData}.
|
|
191
|
+
*/
|
|
192
|
+
export type FormattedGooglePayPaymentData = {
|
|
193
|
+
paymentMethod: components["schemas"]["EmbedConfirmGooglePayPaymentMethodInput"];
|
|
194
|
+
};
|
|
195
|
+
|
|
189
196
|
/**
|
|
190
197
|
* Transform raw Google Pay payment data into an Amos-compatible
|
|
191
198
|
* `paymentMethod` payload. Use this when integrating with the raw
|
|
@@ -196,9 +203,10 @@ export function formatGooglePayPaymentData({
|
|
|
196
203
|
paymentData,
|
|
197
204
|
}: {
|
|
198
205
|
paymentData: google.payments.api.PaymentData;
|
|
199
|
-
}) {
|
|
206
|
+
}): FormattedGooglePayPaymentData {
|
|
200
207
|
return {
|
|
201
208
|
paymentMethod: {
|
|
209
|
+
type: "googlepay",
|
|
202
210
|
billing_address_attributes: {
|
|
203
211
|
name: paymentData.shippingAddress?.name,
|
|
204
212
|
address_line1: paymentData.shippingAddress?.address1,
|
package/src/index.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="googlepay" />
|
|
2
2
|
|
|
3
|
-
import type { components } from "@amos.com/node";
|
|
4
|
-
|
|
5
3
|
export type {
|
|
4
|
+
FormattedGooglePayPaymentData,
|
|
6
5
|
GooglePayButtonController,
|
|
7
6
|
GooglePayButtonListenerOptions,
|
|
8
7
|
} from "./google-pay";
|
|
@@ -56,47 +55,3 @@ export type {
|
|
|
56
55
|
ThemeVariable,
|
|
57
56
|
} from "./types";
|
|
58
57
|
export { createMessage } from "./types";
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Convenience alias for `components["schemas"]["CreateCustomerInput"]`.
|
|
62
|
-
*/
|
|
63
|
-
export type CreateCustomerInput = components["schemas"]["CreateCustomerInput"];
|
|
64
|
-
/**
|
|
65
|
-
* Convenience alias for
|
|
66
|
-
* `components["schemas"]["CreatePaymentIntentInput"]`.
|
|
67
|
-
*/
|
|
68
|
-
export type CreatePaymentIntentInput =
|
|
69
|
-
components["schemas"]["CreatePaymentIntentInput"];
|
|
70
|
-
/**
|
|
71
|
-
* Convenience alias for
|
|
72
|
-
* `components["schemas"]["CreateSetupIntentInput"]`.
|
|
73
|
-
*/
|
|
74
|
-
export type CreateSetupIntentInput =
|
|
75
|
-
components["schemas"]["CreateSetupIntentInput"];
|
|
76
|
-
/**
|
|
77
|
-
* Convenience alias for `components["schemas"]["PaymentIntent"]`.
|
|
78
|
-
*/
|
|
79
|
-
export type PaymentIntent = components["schemas"]["PaymentIntent"];
|
|
80
|
-
/**
|
|
81
|
-
* Convenience alias for `components["schemas"]["SetupIntent"]`.
|
|
82
|
-
*/
|
|
83
|
-
export type SetupIntent = components["schemas"]["SetupIntent"];
|
|
84
|
-
/**
|
|
85
|
-
* API envelope `{ token?, ttl? }` for a minted embed JWT.
|
|
86
|
-
*
|
|
87
|
-
* `POST /payment_intents` and `POST /setup_intents` resolve to this
|
|
88
|
-
* shape. {@link confirmPaymentIntent}, {@link confirmSetupIntent}, and
|
|
89
|
-
* the Google Pay `onInitiatePaymentIntentRequest` return type use
|
|
90
|
-
* `Pick<EmbedToken, "token">` (the JWT string returned by your server).
|
|
91
|
-
*/
|
|
92
|
-
export type EmbedToken = components["schemas"]["EmbedToken"];
|
|
93
|
-
/**
|
|
94
|
-
* Decoded JWT payload for an embed token (`account_id`,
|
|
95
|
-
* `payment_intent_id`, `setup_intent_id`, etc.).
|
|
96
|
-
*/
|
|
97
|
-
export type EmbedTokenJwt = components["schemas"]["EmbedTokenJwt"];
|
|
98
|
-
/**
|
|
99
|
-
* Decoded JWT payload for the dashboard render token (`env`, `origins`,
|
|
100
|
-
* `allowed_payment_method_types`, `render_template_id`, etc.).
|
|
101
|
-
*/
|
|
102
|
-
export type RenderTokenJwt = components["schemas"]["RenderTokenJwt"];
|