@amos.com/react-amos-js 0.11.1 → 0.11.3
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 +21 -24
- package/dist/index.d.ts +14 -39
- package/dist/index.js +1 -1
- package/dist/index.mjs +84 -100
- package/package.json +2 -2
- package/src/index.tsx +14 -66
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ npm install @amos.com/react-amos-js @amos.com/node
|
|
|
16
16
|
|
|
17
17
|
- React components for the iframe payment method forms: `AmosCreditCardPaymentMethodForm`, `AmosBankAccountPaymentMethodForm`, `AmosGooglePayButton`, `AmosApplePayButton`.
|
|
18
18
|
- React-flavoured iframe message helpers that accept a React `ref`: `validateForm({ iframeRef })`, `confirmPayment({ iframeRef, token })`, `confirmSetup({ iframeRef, token })`, `resetForm({ iframeRef })`.
|
|
19
|
-
- Re-exports of the `@amos.com/amos-js` helpers and types that come up in client code: `createMessage`, `decodeJwt`, `getEmbedOrigin`, `formatGooglePayPaymentData`, `resetForm`, `ConfirmResult`, `
|
|
19
|
+
- Re-exports of the `@amos.com/amos-js` helpers and types that come up in client code: `createMessage`, `decodeJwt`, `getEmbedOrigin`, `formatGooglePayPaymentData`, `resetForm`, `ConfirmResult`, `FormattedGooglePayPaymentData`, `Appearance`, `Message`, etc.
|
|
20
20
|
|
|
21
21
|
> **Note:** `@amos.com/react-amos-js` is the client-side half of the Amos integration. For end-to-end payment processing you also need `@amos.com/node` on your server (creating payment intents, handling webhooks, etc.). The same `@amos.com/node` package is listed as a peer dependency so you can import its OpenAPI types in client-side TypeScript code.
|
|
22
22
|
|
|
@@ -43,8 +43,8 @@ The following flow is for credit card and bank account payment method types only
|
|
|
43
43
|
3. **User clicks "Pay now" button**: call `validateForm({ iframeRef })`, which returns `Promise<true>` if the embedded form is valid and `Promise<false>` otherwise.
|
|
44
44
|
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.
|
|
45
45
|
5. **Return the payment intent token to the browser**: your backend responds with the embed token (`components["schemas"]["EmbedToken"]`) needed for confirmation.
|
|
46
|
-
6. **Confirm the payment intent from the client**: `await confirmPayment({ iframeRef, token })`.
|
|
47
|
-
7. **Handle UX**: show the user a "processing" state while awaiting `confirmPayment`. Do not treat `{ status: "succeeded" }` as settlement proof — verify payment success on your backend via webhooks. Recoverable field errors stay in the iframe; `confirmPayment` still resolves `{ status: "failed" }`.
|
|
46
|
+
6. **Confirm the payment intent from the client**: `await confirmPayment({ iframeRef, token })`.
|
|
47
|
+
7. **Handle UX**: show the user a "processing" state while awaiting `confirmPayment`. Do not treat `{ status: "succeeded" }` as settlement proof — verify payment success on your backend via webhooks. Recoverable field errors stay in the iframe; `confirmPayment` still resolves `{ status: "failed" }`.
|
|
48
48
|
|
|
49
49
|
### Google Pay & Apple Pay
|
|
50
50
|
|
|
@@ -61,10 +61,10 @@ The key differences between the express and non-express payment flows are:
|
|
|
61
61
|
Setup intents are used to save payment methods for future use (e.g. recurring payments, subscriptions) without charging the customer immediately. The flow is identical to a payment intent, except:
|
|
62
62
|
|
|
63
63
|
- On the server, call `POST /setup_intents` instead of `POST /payment_intents`.
|
|
64
|
-
- On the client, `await confirmSetup({ iframeRef, token })` instead of `confirmPayment({ iframeRef, token })`.
|
|
64
|
+
- On the client, `await confirmSetup({ iframeRef, token })` instead of `confirmPayment({ iframeRef, token })`.
|
|
65
65
|
- Both resolve `{ status: "succeeded" | "failed" }`.
|
|
66
66
|
|
|
67
|
-
The same `AmosCreditCardPaymentMethodForm` / `AmosBankAccountPaymentMethodForm` components support both payment intents and setup intents — they are differentiated by which confirmation function you call. For bank setup, pass `intent="setup"` so
|
|
67
|
+
The same `AmosCreditCardPaymentMethodForm` / `AmosBankAccountPaymentMethodForm` components support both payment intents and setup intents — they are differentiated by which confirmation function you call. For bank setup, pass `intent="setup"` so Plaid is always shown (unless the render token disables verification).
|
|
68
68
|
|
|
69
69
|
## Understanding PCI DSS compliance requirements
|
|
70
70
|
|
|
@@ -82,7 +82,7 @@ In short, your app orchestrates the payment flow, while sensitive payment data s
|
|
|
82
82
|
|
|
83
83
|
## Appearance
|
|
84
84
|
|
|
85
|
-
Card and bank components accept an optional `appearance` prop that controls the look of the iframe UI
|
|
85
|
+
Card and bank components accept an optional `appearance` prop that controls the look of the iframe UI. It contains a `themeVariables` object whose keys are CSS custom-property names and whose values are strings, and an optional `labels` setting for field label placement. You can update this prop after page load to update the iframe appearance. Wallet buttons do not take `appearance`.
|
|
86
86
|
|
|
87
87
|
```tsx
|
|
88
88
|
<AmosCreditCardPaymentMethodForm
|
|
@@ -151,7 +151,7 @@ Radio groups (e.g. account type) always use an above-style group label regardles
|
|
|
151
151
|
| `--control-gap` | Horizontal gap between side-by-side controls | `0.5rem` |
|
|
152
152
|
| `--error-font-size` | Font size of field-level error messages | `0.875rem` |
|
|
153
153
|
| `--radio-size` | Size of radio buttons on the bank account form | `1rem` |
|
|
154
|
-
| `--ring` | Focus ring and outline color (inputs
|
|
154
|
+
| `--ring` | Focus ring and outline color (inputs) | `oklch(0.708 0 0)` |
|
|
155
155
|
| `--ring-width` | Focus ring width | `3px` |
|
|
156
156
|
| `--radius` | Base border-radius (derived into sm/md/lg/xl) | `0.625rem` |
|
|
157
157
|
|
|
@@ -433,7 +433,7 @@ Validates the embedded card/bank iframe form before payment confirmation.
|
|
|
433
433
|
|
|
434
434
|
### `confirmPayment({ iframeRef, token })`
|
|
435
435
|
|
|
436
|
-
Confirms a payment intent in the embedded iframe flow. Resolves `{ status: "succeeded" }` or `{ status: "failed" }`.
|
|
436
|
+
Confirms a payment intent in the embedded iframe flow. Resolves `{ status: "succeeded" }` or `{ status: "failed" }`.
|
|
437
437
|
|
|
438
438
|
**Parameters:**
|
|
439
439
|
|
|
@@ -444,7 +444,7 @@ Confirms a payment intent in the embedded iframe flow. Resolves `{ status: "succ
|
|
|
444
444
|
|
|
445
445
|
### `confirmSetup({ iframeRef, token })`
|
|
446
446
|
|
|
447
|
-
Confirms a setup intent in the embedded iframe flow. Use this when saving a payment method for future use.
|
|
447
|
+
Confirms a setup intent in the embedded iframe flow. Use this when saving a payment method for future use.
|
|
448
448
|
|
|
449
449
|
**Parameters:**
|
|
450
450
|
|
|
@@ -455,7 +455,7 @@ Confirms a setup intent in the embedded iframe flow. Use this when saving a paym
|
|
|
455
455
|
|
|
456
456
|
### `resetForm({ iframeRef })`
|
|
457
457
|
|
|
458
|
-
Clears all field values and API errors in the embedded card/bank iframe form. Call after a failed
|
|
458
|
+
Clears all field values and API errors in the embedded card/bank iframe form. Call after a failed confirm when the customer wants to try again (for example, after a successful payment when starting a new one).
|
|
459
459
|
|
|
460
460
|
**Parameters:**
|
|
461
461
|
|
|
@@ -477,7 +477,6 @@ Renders the secure credit card iframe form. A field-shaped skeleton is shown imm
|
|
|
477
477
|
|
|
478
478
|
- `additionalFields` (`{ cardholderName: boolean }`) — set `additionalFields={{ cardholderName: true }}` to render the cardholder name field in the iframe (`false` by default)
|
|
479
479
|
- `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.
|
|
480
|
-
- `onResult` (`(result: ConfirmationResult) => void`) — **deprecated.** Prefer `await confirmPayment()` / `await confirmSetup()`. Still fired for existing hosts (`succeeded`, `failed`, or `incomplete` with `reason`). Not settlement proof; verify via webhooks.
|
|
481
480
|
- `onValidityChange` (`(event: { isValid: boolean }) => void`) — called when form validity changes. `isValid` is true when all required fields are present and valid. Does not include PCI data. Use this to enable or disable your checkout button.
|
|
482
481
|
- `onCardBrandChanged` (`(event: { brand: CardBrand | null }) => void`) — called when the detected card brand changes. `brand` is `"visa"`, `"mastercard"`, `"amex"`, `"discover"`, `"diners"`, or `"jcb"`, or `null` when the field is empty or the number does not match a known brand. Does not include PCI data.
|
|
483
482
|
|
|
@@ -487,25 +486,23 @@ Renders the secure credit card iframe form. A field-shaped skeleton is shown imm
|
|
|
487
486
|
|
|
488
487
|
Renders the secure bank account iframe form. A field-shaped skeleton is shown immediately and replaced by the iframe once appearance is applied.
|
|
489
488
|
|
|
490
|
-
When
|
|
489
|
+
When `requireAchVerification` is true (or `intent` is `"setup"`), and the render token allows verification, the SDK hides the routing/account iframe and mounts [Plaid Embedded Institution Search](https://plaid.com/docs/link/embedded-institution-search/) in the parent. Hosts do not proxy Pay API (`GET /merchants`, `POST /plaid_link_tokens`); embed does that with `PAY_API_KEY`. Do not put Plaid secrets in the browser.
|
|
491
490
|
|
|
492
|
-
**Required props:** same as `AmosCreditCardPaymentMethodForm` — `renderToken
|
|
491
|
+
**Required props:** same as `AmosCreditCardPaymentMethodForm` — `renderToken`.
|
|
493
492
|
|
|
494
|
-
|
|
495
|
-
- `intent` (`"payment" | "setup"`, defaults to `"payment"`) — `"setup"` always shows Connect / Plaid (no merchant ACH threshold lookup), unless the render token disables verification. Use this when saving a bank account for later charges.
|
|
493
|
+
**Optional props:** same as `AmosCreditCardPaymentMethodForm` — `appearance`, `billingAddressRequirement`, `onValidityChange` (`isValid` is also true after Plaid returns credentials) — plus:
|
|
496
494
|
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
Compare locally once the iframe posts `ACH_THRESHOLD`: Plaid when `requireVerification` is true (setup intents), or when the amount (converted to cents, default `0`) is `>= achThreshold`. No threshold (or `null`) keeps the manual bank form. Render tokens with Plaid verification disabled never require Connect. If `amount` later drops under the threshold, Plaid credentials are dropped and the iframe form is shown again.
|
|
495
|
+
- `requireAchVerification` (`boolean`, defaults to `false`) — when true, show Plaid Embedded Link instead of routing/account fields. Ignored for `intent="setup"` (always Plaid) and when the render token has bank `verification: false`. Hosts that still have an ACH threshold should compute this themselves and pass a new value when the charge changes.
|
|
496
|
+
- `intent` (`"payment" | "setup"`, defaults to `"payment"`) — `"setup"` always shows Plaid unless the render token disables verification. Use this when saving a bank account for later charges.
|
|
500
497
|
|
|
501
498
|
```tsx
|
|
502
499
|
<AmosBankAccountPaymentMethodForm
|
|
503
500
|
renderToken={renderToken}
|
|
504
|
-
|
|
501
|
+
requireAchVerification
|
|
505
502
|
/>
|
|
506
503
|
```
|
|
507
504
|
|
|
508
|
-
Setup (always
|
|
505
|
+
Setup (always Plaid, unless the render token disables verification):
|
|
509
506
|
|
|
510
507
|
```tsx
|
|
511
508
|
<AmosBankAccountPaymentMethodForm
|
|
@@ -585,15 +582,15 @@ Re-exports of the same advanced helpers exposed by `@amos.com/amos-js`. Most int
|
|
|
585
582
|
|
|
586
583
|
### Exported types
|
|
587
584
|
|
|
588
|
-
`@amos.com/react-amos-js` re-exports everything from `@amos.com/amos-js`, including `ConfirmResult`, `
|
|
585
|
+
`@amos.com/react-amos-js` re-exports everything from `@amos.com/amos-js`, including `ConfirmResult`, `PaymentMethodFormValidityChangeEvent`, `CardBrand`, `PaymentMethodFormCardBrandChangeEvent`, `FormattedGooglePayPaymentData`, `Message`, `Appearance`, `ThemeVariable`, and the per-form `*Options` / `*Controller` types. For OpenAPI schema types (e.g. `PaymentIntent`, `CreatePaymentIntentInput`), import `components` from `@amos.com/node`.
|
|
589
586
|
|
|
590
587
|
## Notes and potential gotchas
|
|
591
588
|
|
|
592
589
|
- **`ref` / `iframeRef`**: for card and bank forms, pass `ref={iframeRef}` to the form component. The same `iframeRef` must be used when calling `validateForm`, `confirmPayment`, `confirmSetup`, or `resetForm`. The component forwards the ref to the inner iframe.
|
|
593
|
-
- **`confirmPayment` / `confirmSetup` are not settlement proof**: `{ status: "succeeded" }` means authorization succeeded (capture may still finish asynchronously). Verify payment or setup success on your backend via webhooks. Recoverable field errors stay in the iframe; the Promise still resolves `{ status: "failed" }`.
|
|
590
|
+
- **`confirmPayment` / `confirmSetup` are not settlement proof**: `{ status: "succeeded" }` means authorization succeeded (capture may still finish asynchronously). Verify payment or setup success on your backend via webhooks. Recoverable field errors stay in the iframe; the Promise still resolves `{ status: "failed" }`.
|
|
594
591
|
- **Same components for payment vs setup intents**: `AmosCreditCardPaymentMethodForm` and `AmosBankAccountPaymentMethodForm` support both payment intents and setup intents. The flow differs only by which server call you make and which confirmation function you use (`confirmPayment` vs `confirmSetup`).
|
|
595
|
-
- **Amount format**: for `AmosGooglePayButton
|
|
596
|
-
- **Plaid Link (ACH verification)**: load `cdn.plaid.com` from the **parent** document (see CSP on `AmosBankAccountPaymentMethodForm`). Merchants do not proxy Pay API; the bank iframe
|
|
592
|
+
- **Amount format**: for `AmosGooglePayButton` and `AmosApplePayButton`, `amount` is a major-currency decimal string (e.g. `"50.00"` for $50.00). For `components["schemas"]["CreatePaymentIntentInput"]` on the server (card/bank create, and the object the wallet iframe sends to `onConfirm`), `amount` is a number in cents (e.g. `5000`).
|
|
593
|
+
- **Plaid Embedded Link (ACH verification)**: load `cdn.plaid.com` from the **parent** document (see CSP on `AmosBankAccountPaymentMethodForm`). Merchants do not proxy Pay API; the bank iframe mints link tokens. Pass `requireAchVerification` when the host wants Plaid, or `intent="setup"` to always show it, unless the render token disables verification. Confirm still goes through the bank iframe so Amos can attach `plaid` to the payment method.
|
|
597
594
|
- **Apple Pay waiting overlay**: on browsers where Apple's QR handoff opens in a popup (non-Safari), `AmosApplePayButton` shows a fixed full-viewport overlay on the host page until payment completes, the popup closes, or the user clicks **Cancel payment**. Avoid stacking other fixed UI above it.
|
|
598
595
|
- **Going framework-free**: if you need to use Amos outside of React (vanilla JS, another framework, etc.), use [`@amos.com/amos-js`](../amos-js) directly.
|
|
599
596
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="googlepay" />
|
|
2
|
-
import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement,
|
|
2
|
+
import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmResult, CreditCardAdditionalFields, GooglePayButtonElementProps } from '@amos.com/amos-js';
|
|
3
3
|
import { components } from '@amos.com/node';
|
|
4
4
|
import { ComponentProps, Ref, RefObject } from 'react';
|
|
5
5
|
export * from '@amos.com/amos-js';
|
|
@@ -33,21 +33,9 @@ export declare function confirmPayment({ iframeRef, token, }: {
|
|
|
33
33
|
export declare function confirmSetup({ iframeRef, token, }: {
|
|
34
34
|
iframeRef: IframeRef;
|
|
35
35
|
} & Pick<components["schemas"]["EmbedToken"], "token">): Promise<ConfirmResult>;
|
|
36
|
-
/**
|
|
37
|
-
* @deprecated Use {@link confirmPayment}.
|
|
38
|
-
*/
|
|
39
|
-
export declare function confirmPaymentIntent({ iframeRef, token, }: {
|
|
40
|
-
iframeRef: IframeRef;
|
|
41
|
-
} & Pick<components["schemas"]["EmbedToken"], "token">): Promise<ConfirmResult>;
|
|
42
|
-
/**
|
|
43
|
-
* @deprecated Use {@link confirmSetup}.
|
|
44
|
-
*/
|
|
45
|
-
export declare function confirmSetupIntent({ iframeRef, token, }: {
|
|
46
|
-
iframeRef: IframeRef;
|
|
47
|
-
} & Pick<components["schemas"]["EmbedToken"], "token">): Promise<ConfirmResult>;
|
|
48
36
|
/**
|
|
49
37
|
* Clear all field values and API errors in the embedded card/bank iframe
|
|
50
|
-
* form. Call after
|
|
38
|
+
* form. Call after a failed confirm when the customer wants to try again.
|
|
51
39
|
*/
|
|
52
40
|
export declare function resetForm({ iframeRef }: {
|
|
53
41
|
iframeRef: IframeRef;
|
|
@@ -57,10 +45,6 @@ type IframePassthroughProps = Omit<ComponentProps<"iframe">, "src" | "title" | "
|
|
|
57
45
|
type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
|
|
58
46
|
renderToken: string;
|
|
59
47
|
appearance?: Appearance;
|
|
60
|
-
/**
|
|
61
|
-
* @deprecated Prefer `await confirmPayment()` / `await confirmSetup()`.
|
|
62
|
-
*/
|
|
63
|
-
onResult?: (result: ConfirmationResult) => void;
|
|
64
48
|
/**
|
|
65
49
|
* Called when form validity changes. `isValid` is true when all
|
|
66
50
|
* required fields are present and valid. Does not include PCI data.
|
|
@@ -79,47 +63,38 @@ type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
|
|
|
79
63
|
additionalFields?: CreditCardAdditionalFields;
|
|
80
64
|
billingAddressRequirement?: BillingAddressRequirement;
|
|
81
65
|
};
|
|
82
|
-
export declare function AmosCreditCardPaymentMethodForm({ ref, renderToken, appearance,
|
|
66
|
+
export declare function AmosCreditCardPaymentMethodForm({ ref, renderToken, appearance, onValidityChange, onCardBrandChanged, additionalFields, billingAddressRequirement, style, ...rest }: AmosCreditCardPaymentMethodFormProps): import("react").JSX.Element;
|
|
83
67
|
type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
|
|
84
68
|
renderToken: string;
|
|
85
69
|
appearance?: Appearance;
|
|
86
|
-
/**
|
|
87
|
-
* @deprecated Prefer `await confirmPayment()` / `await confirmSetup()`.
|
|
88
|
-
*/
|
|
89
|
-
onResult?: (result: ConfirmationResult) => void;
|
|
90
70
|
/**
|
|
91
71
|
* Called when form validity changes. `isValid` is true when all
|
|
92
|
-
* required fields are present and valid, or when Plaid Link
|
|
93
|
-
* returned credentials. Does not include PCI data.
|
|
72
|
+
* required fields are present and valid, or when Plaid Embedded Link
|
|
73
|
+
* has returned credentials. Does not include PCI data.
|
|
94
74
|
*/
|
|
95
75
|
onValidityChange?: (event: {
|
|
96
76
|
isValid: boolean;
|
|
97
77
|
}) => void;
|
|
98
78
|
billingAddressRequirement?: BillingAddressRequirement;
|
|
99
79
|
/**
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
*
|
|
104
|
-
* stays hidden until the host passes a real charge.
|
|
105
|
-
*
|
|
106
|
-
* Ignored when {@link AmosBankAccountPaymentMethodFormProps.intent} is
|
|
107
|
-
* `"setup"`.
|
|
80
|
+
* When true, hide the routing/account iframe and mount Plaid Embedded
|
|
81
|
+
* Institution Search in the parent. Ignored when `intent` is `"setup"`
|
|
82
|
+
* (setup always shows Plaid) or when the render token disables
|
|
83
|
+
* verification.
|
|
108
84
|
*
|
|
109
|
-
* @default
|
|
85
|
+
* @default false
|
|
110
86
|
*/
|
|
111
|
-
|
|
87
|
+
requireAchVerification?: boolean;
|
|
112
88
|
/**
|
|
113
89
|
* `"setup"` saves a bank account for later charges and always shows
|
|
114
|
-
*
|
|
115
|
-
*
|
|
116
|
-
* merchant ACH threshold.
|
|
90
|
+
* Plaid (unless the render token disables verification). `"payment"`
|
|
91
|
+
* uses {@link AmosBankAccountPaymentMethodFormProps.requireAchVerification}.
|
|
117
92
|
*
|
|
118
93
|
* @default "payment"
|
|
119
94
|
*/
|
|
120
95
|
intent?: "payment" | "setup";
|
|
121
96
|
};
|
|
122
|
-
export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance,
|
|
97
|
+
export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance, onValidityChange, billingAddressRequirement, requireAchVerification, intent, style, ...rest }: AmosBankAccountPaymentMethodFormProps): import("react").JSX.Element;
|
|
123
98
|
type AmosGooglePayButtonProps = {
|
|
124
99
|
ref?: ForwardedIframeRef;
|
|
125
100
|
renderToken: string;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@amos.com/amos-js"),t=require("react"),n=require("react/jsx-runtime");function r(e){return e?e.current??null:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n}){return(0,e.confirmPayment)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){return(0,e.confirmSetup)({iframe:r(t),token:n})}function s({iframeRef:t
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@amos.com/amos-js"),t=require("react"),n=require("react/jsx-runtime");function r(e){return e?e.current??null:null}function i({iframeRef:t}){return(0,e.validateForm)({iframe:r(t)})}function a({iframeRef:t,token:n}){return(0,e.confirmPayment)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){return(0,e.confirmSetup)({iframe:r(t),token:n})}function s({iframeRef:t}){(0,e.resetForm)({iframe:r(t)})}function c(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function l(e,{style:t,className:n,id:r,...i}){n!=null&&(e.className=n),r!=null&&(e.id=r),Object.assign(e.style,t);for(let[t,n]of Object.entries(i))n!=null&&(t in e?Reflect.set(e,t,n):e.setAttribute(t,String(n)))}function u({containerRef:e,iframeRef:n,mount:r,options:i,remountDeps:a,iframePassthrough:o,updateDeps:s}){let u=(0,t.useRef)(null);(0,t.useLayoutEffect)(()=>{let t=e.current;if(!t)return;let a=r(t,i);return u.current=a,c(n,a.iframe),l(a.iframe,o),()=>{a.destroy(),u.current=null,c(n,null)}},[...a]),(0,t.useEffect)(()=>{u.current?.update(i)},[...s]),(0,t.useEffect)(()=>{let e=u.current?.iframe;e&&l(e,o)})}var d=`oklch(0.97 0 0)`;function f({height:r,borderRadius:i,containerRef:a}){return(0,t.useLayoutEffect)(()=>{(0,e.ensureSkeletonStyles)()},[]),(0,n.jsxs)(`div`,{style:{boxSizing:`border-box`,position:`relative`,width:`100%`,height:r,minHeight:r,overflow:`hidden`},children:[(0,n.jsx)(`div`,{className:`amos-js-form-skeleton-input amos-js-wallet-skeleton`,style:{position:`absolute`,inset:0,height:r,borderRadius:i,background:d,pointerEvents:`none`,zIndex:0},"aria-hidden":!0}),(0,n.jsx)(`div`,{ref:a,style:{position:`absolute`,inset:0,zIndex:1,width:`100%`,height:`100%`}})]})}function p({ref:r,renderToken:i,appearance:a,onValidityChange:o,onCardBrandChanged:s,additionalFields:c={cardholderName:!1},billingAddressRequirement:l=`country`,style:d,...f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:c,billingAddressRequirement:l,onValidityChange:o,onCardBrandChanged:s},remountDeps:[i,c.cardholderName,l],iframePassthrough:{style:d,...f},updateDeps:[a,c,l,o,s]}),(0,n.jsx)(`div`,{ref:p})}function m({ref:r,renderToken:i,appearance:a,onValidityChange:o,billingAddressRequirement:s=`country`,requireAchVerification:c=!1,intent:l=`payment`,style:d,...f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:s,requireAchVerification:c,intent:l,onValidityChange:o},remountDeps:[i,s,l],iframePassthrough:{style:d,...f},updateDeps:[a,s,c,l,o]}),(0,n.jsx)(`div`,{ref:p})}function h({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onConfirm:d}){let p=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:l?.style,buttonProps:c});return u({containerRef:p,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onConfirm:d},remountDeps:[i],iframePassthrough:l??{},updateDeps:[a,o,s,c,d]}),(0,n.jsx)(f,{height:s,borderRadius:m,containerRef:p})}function g({ref:r,renderToken:i,amount:a,merchantName:o,height:s=`48px`,buttonProps:c,iframeProps:l,onConfirm:d}){let p=(0,t.useRef)(null),m=(0,e.resolveWalletButtonSkeletonBorderRadius)({iframeStyle:l?.style,buttonProps:c});return u({containerRef:p,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,height:s,buttonProps:c,onConfirm:d},remountDeps:[i],iframePassthrough:l??{},updateDeps:[a,o,s,c,d]}),(0,n.jsx)(f,{height:s,borderRadius:m,containerRef:p})}exports.AmosApplePayButton=g,exports.AmosBankAccountPaymentMethodForm=m,exports.AmosCreditCardPaymentMethodForm=p,exports.AmosGooglePayButton=h,exports.confirmPayment=a,exports.confirmSetup=o,exports.resetForm=s,exports.validateForm=i,Object.keys(e).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});
|
package/dist/index.mjs
CHANGED
|
@@ -1,69 +1,57 @@
|
|
|
1
|
-
import { confirmPayment as e,
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import { jsx as
|
|
1
|
+
import { confirmPayment as e, confirmSetup as t, ensureSkeletonStyles as n, mountAmosApplePayButton as r, mountAmosBankAccountPaymentMethodForm as i, mountAmosCreditCardPaymentMethodForm as a, mountAmosGooglePayButton as o, resetForm as s, resolveWalletButtonSkeletonBorderRadius as c, validateForm as l } from "@amos.com/amos-js";
|
|
2
|
+
import { useEffect as u, useLayoutEffect as d, useRef as f } from "react";
|
|
3
|
+
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
4
4
|
export * from "@amos.com/amos-js";
|
|
5
5
|
//#region src/index.tsx
|
|
6
|
-
function
|
|
6
|
+
function h(e) {
|
|
7
7
|
return e ? e.current ?? null : null;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
return
|
|
9
|
+
function g({ iframeRef: e }) {
|
|
10
|
+
return l({ iframe: h(e) });
|
|
11
11
|
}
|
|
12
|
-
function
|
|
12
|
+
function _({ iframeRef: t, token: n }) {
|
|
13
13
|
return e({
|
|
14
|
-
iframe:
|
|
14
|
+
iframe: h(t),
|
|
15
15
|
token: n
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
|
-
function
|
|
19
|
-
return n({
|
|
20
|
-
iframe: _(e),
|
|
21
|
-
token: t
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
function x({ iframeRef: e, token: n }) {
|
|
18
|
+
function v({ iframeRef: e, token: n }) {
|
|
25
19
|
return t({
|
|
26
|
-
iframe:
|
|
20
|
+
iframe: h(e),
|
|
27
21
|
token: n
|
|
28
22
|
});
|
|
29
23
|
}
|
|
30
|
-
function
|
|
31
|
-
|
|
32
|
-
iframe: _(e),
|
|
33
|
-
token: t
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
function C({ iframeRef: e }) {
|
|
37
|
-
l({ iframe: _(e) });
|
|
24
|
+
function y({ iframeRef: e }) {
|
|
25
|
+
s({ iframe: h(e) });
|
|
38
26
|
}
|
|
39
|
-
function
|
|
27
|
+
function b(e, t) {
|
|
40
28
|
typeof e == "function" ? e(t) : e && (e.current = t);
|
|
41
29
|
}
|
|
42
|
-
function
|
|
30
|
+
function x(e, { style: t, className: n, id: r, ...i }) {
|
|
43
31
|
n != null && (e.className = n), r != null && (e.id = r), Object.assign(e.style, t);
|
|
44
32
|
for (let [t, n] of Object.entries(i)) n != null && (t in e ? Reflect.set(e, t, n) : e.setAttribute(t, String(n)));
|
|
45
33
|
}
|
|
46
|
-
function
|
|
47
|
-
let s =
|
|
48
|
-
|
|
34
|
+
function S({ containerRef: e, iframeRef: t, mount: n, options: r, remountDeps: i, iframePassthrough: a, updateDeps: o }) {
|
|
35
|
+
let s = f(null);
|
|
36
|
+
d(() => {
|
|
49
37
|
let i = e.current;
|
|
50
38
|
if (!i) return;
|
|
51
39
|
let o = n(i, r);
|
|
52
|
-
return s.current = o,
|
|
53
|
-
o.destroy(), s.current = null,
|
|
40
|
+
return s.current = o, b(t, o.iframe), x(o.iframe, a), () => {
|
|
41
|
+
o.destroy(), s.current = null, b(t, null);
|
|
54
42
|
};
|
|
55
|
-
}, [...i]),
|
|
43
|
+
}, [...i]), u(() => {
|
|
56
44
|
s.current?.update(r);
|
|
57
|
-
}, [...o]),
|
|
45
|
+
}, [...o]), u(() => {
|
|
58
46
|
let e = s.current?.iframe;
|
|
59
|
-
e &&
|
|
47
|
+
e && x(e, a);
|
|
60
48
|
});
|
|
61
49
|
}
|
|
62
|
-
var
|
|
63
|
-
function
|
|
64
|
-
return
|
|
65
|
-
|
|
66
|
-
}, []), /* @__PURE__ */
|
|
50
|
+
var C = "oklch(0.97 0 0)";
|
|
51
|
+
function w({ height: e, borderRadius: t, containerRef: r }) {
|
|
52
|
+
return d(() => {
|
|
53
|
+
n();
|
|
54
|
+
}, []), /* @__PURE__ */ m("div", {
|
|
67
55
|
style: {
|
|
68
56
|
boxSizing: "border-box",
|
|
69
57
|
position: "relative",
|
|
@@ -72,20 +60,20 @@ function O({ height: e, borderRadius: t, containerRef: n }) {
|
|
|
72
60
|
minHeight: e,
|
|
73
61
|
overflow: "hidden"
|
|
74
62
|
},
|
|
75
|
-
children: [/* @__PURE__ */
|
|
63
|
+
children: [/* @__PURE__ */ p("div", {
|
|
76
64
|
className: "amos-js-form-skeleton-input amos-js-wallet-skeleton",
|
|
77
65
|
style: {
|
|
78
66
|
position: "absolute",
|
|
79
67
|
inset: 0,
|
|
80
68
|
height: e,
|
|
81
69
|
borderRadius: t,
|
|
82
|
-
background:
|
|
70
|
+
background: C,
|
|
83
71
|
pointerEvents: "none",
|
|
84
72
|
zIndex: 0
|
|
85
73
|
},
|
|
86
74
|
"aria-hidden": !0
|
|
87
|
-
}), /* @__PURE__ */
|
|
88
|
-
ref:
|
|
75
|
+
}), /* @__PURE__ */ p("div", {
|
|
76
|
+
ref: r,
|
|
89
77
|
style: {
|
|
90
78
|
position: "absolute",
|
|
91
79
|
inset: 0,
|
|
@@ -96,137 +84,133 @@ function O({ height: e, borderRadius: t, containerRef: n }) {
|
|
|
96
84
|
})]
|
|
97
85
|
});
|
|
98
86
|
}
|
|
99
|
-
function
|
|
100
|
-
let
|
|
101
|
-
return
|
|
102
|
-
containerRef:
|
|
87
|
+
function T({ ref: e, renderToken: t, appearance: n, onValidityChange: r, onCardBrandChanged: i, additionalFields: o = { cardholderName: !1 }, billingAddressRequirement: s = "country", style: c, ...l }) {
|
|
88
|
+
let u = f(null);
|
|
89
|
+
return S({
|
|
90
|
+
containerRef: u,
|
|
103
91
|
iframeRef: e,
|
|
104
|
-
mount:
|
|
92
|
+
mount: a,
|
|
105
93
|
options: {
|
|
106
94
|
renderToken: t,
|
|
107
95
|
appearance: n,
|
|
108
96
|
additionalFields: o,
|
|
109
|
-
billingAddressRequirement:
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
onCardBrandChanged: a
|
|
97
|
+
billingAddressRequirement: s,
|
|
98
|
+
onValidityChange: r,
|
|
99
|
+
onCardBrandChanged: i
|
|
113
100
|
},
|
|
114
101
|
remountDeps: [
|
|
115
102
|
t,
|
|
116
103
|
o.cardholderName,
|
|
117
|
-
|
|
104
|
+
s
|
|
118
105
|
],
|
|
119
106
|
iframePassthrough: {
|
|
120
|
-
style:
|
|
121
|
-
...
|
|
107
|
+
style: c,
|
|
108
|
+
...l
|
|
122
109
|
},
|
|
123
110
|
updateDeps: [
|
|
124
111
|
n,
|
|
125
112
|
o,
|
|
126
|
-
|
|
113
|
+
s,
|
|
127
114
|
r,
|
|
128
|
-
i
|
|
129
|
-
a
|
|
115
|
+
i
|
|
130
116
|
]
|
|
131
|
-
}), /* @__PURE__ */
|
|
117
|
+
}), /* @__PURE__ */ p("div", { ref: u });
|
|
132
118
|
}
|
|
133
|
-
function
|
|
134
|
-
let
|
|
135
|
-
return
|
|
136
|
-
containerRef:
|
|
119
|
+
function E({ ref: e, renderToken: t, appearance: n, onValidityChange: r, billingAddressRequirement: a = "country", requireAchVerification: o = !1, intent: s = "payment", style: c, ...l }) {
|
|
120
|
+
let u = f(null);
|
|
121
|
+
return S({
|
|
122
|
+
containerRef: u,
|
|
137
123
|
iframeRef: e,
|
|
138
|
-
mount:
|
|
124
|
+
mount: i,
|
|
139
125
|
options: {
|
|
140
126
|
renderToken: t,
|
|
141
127
|
appearance: n,
|
|
142
128
|
billingAddressRequirement: a,
|
|
143
|
-
|
|
144
|
-
intent:
|
|
145
|
-
|
|
146
|
-
onValidityChange: i
|
|
129
|
+
requireAchVerification: o,
|
|
130
|
+
intent: s,
|
|
131
|
+
onValidityChange: r
|
|
147
132
|
},
|
|
148
133
|
remountDeps: [
|
|
149
134
|
t,
|
|
150
135
|
a,
|
|
151
|
-
|
|
136
|
+
s
|
|
152
137
|
],
|
|
153
138
|
iframePassthrough: {
|
|
154
|
-
style:
|
|
155
|
-
...
|
|
139
|
+
style: c,
|
|
140
|
+
...l
|
|
156
141
|
},
|
|
157
142
|
updateDeps: [
|
|
158
143
|
n,
|
|
159
144
|
a,
|
|
145
|
+
o,
|
|
160
146
|
s,
|
|
161
|
-
|
|
162
|
-
r,
|
|
163
|
-
i
|
|
147
|
+
r
|
|
164
148
|
]
|
|
165
|
-
}), /* @__PURE__ */
|
|
149
|
+
}), /* @__PURE__ */ p("div", { ref: u });
|
|
166
150
|
}
|
|
167
|
-
function
|
|
168
|
-
let
|
|
169
|
-
iframeStyle:
|
|
151
|
+
function D({ ref: e, renderToken: t, amount: n, merchantName: r, height: i = "48px", buttonProps: a, iframeProps: s, onConfirm: l }) {
|
|
152
|
+
let u = f(null), d = c({
|
|
153
|
+
iframeStyle: s?.style,
|
|
170
154
|
buttonProps: a
|
|
171
155
|
});
|
|
172
|
-
return
|
|
173
|
-
containerRef:
|
|
156
|
+
return S({
|
|
157
|
+
containerRef: u,
|
|
174
158
|
iframeRef: e,
|
|
175
|
-
mount:
|
|
159
|
+
mount: o,
|
|
176
160
|
options: {
|
|
177
161
|
renderToken: t,
|
|
178
162
|
amount: n,
|
|
179
163
|
merchantName: r,
|
|
180
164
|
height: i,
|
|
181
165
|
buttonProps: a,
|
|
182
|
-
onConfirm:
|
|
166
|
+
onConfirm: l
|
|
183
167
|
},
|
|
184
168
|
remountDeps: [t],
|
|
185
|
-
iframePassthrough:
|
|
169
|
+
iframePassthrough: s ?? {},
|
|
186
170
|
updateDeps: [
|
|
187
171
|
n,
|
|
188
172
|
r,
|
|
189
173
|
i,
|
|
190
174
|
a,
|
|
191
|
-
|
|
175
|
+
l
|
|
192
176
|
]
|
|
193
|
-
}), /* @__PURE__ */
|
|
177
|
+
}), /* @__PURE__ */ p(w, {
|
|
194
178
|
height: i,
|
|
195
179
|
borderRadius: d,
|
|
196
|
-
containerRef:
|
|
180
|
+
containerRef: u
|
|
197
181
|
});
|
|
198
182
|
}
|
|
199
|
-
function
|
|
200
|
-
let
|
|
183
|
+
function O({ ref: e, renderToken: t, amount: n, merchantName: i, height: a = "48px", buttonProps: o, iframeProps: s, onConfirm: l }) {
|
|
184
|
+
let u = f(null), d = c({
|
|
201
185
|
iframeStyle: s?.style,
|
|
202
186
|
buttonProps: o
|
|
203
187
|
});
|
|
204
|
-
return
|
|
205
|
-
containerRef:
|
|
188
|
+
return S({
|
|
189
|
+
containerRef: u,
|
|
206
190
|
iframeRef: e,
|
|
207
|
-
mount:
|
|
191
|
+
mount: r,
|
|
208
192
|
options: {
|
|
209
193
|
renderToken: t,
|
|
210
194
|
amount: n,
|
|
211
|
-
merchantName:
|
|
212
|
-
height:
|
|
195
|
+
merchantName: i,
|
|
196
|
+
height: a,
|
|
213
197
|
buttonProps: o,
|
|
214
|
-
onConfirm:
|
|
198
|
+
onConfirm: l
|
|
215
199
|
},
|
|
216
200
|
remountDeps: [t],
|
|
217
201
|
iframePassthrough: s ?? {},
|
|
218
202
|
updateDeps: [
|
|
219
203
|
n,
|
|
220
|
-
r,
|
|
221
204
|
i,
|
|
205
|
+
a,
|
|
222
206
|
o,
|
|
223
|
-
|
|
207
|
+
l
|
|
224
208
|
]
|
|
225
|
-
}), /* @__PURE__ */
|
|
226
|
-
height:
|
|
209
|
+
}), /* @__PURE__ */ p(w, {
|
|
210
|
+
height: a,
|
|
227
211
|
borderRadius: d,
|
|
228
|
-
containerRef:
|
|
212
|
+
containerRef: u
|
|
229
213
|
});
|
|
230
214
|
}
|
|
231
215
|
//#endregion
|
|
232
|
-
export {
|
|
216
|
+
export { O as AmosApplePayButton, E as AmosBankAccountPaymentMethodForm, T as AmosCreditCardPaymentMethodForm, D as AmosGooglePayButton, _ as confirmPayment, v as confirmSetup, y as resetForm, g as validateForm };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amos.com/react-amos-js",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"vite-plugin-dts": "5.0.3"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@amos.com/amos-js": "0.11.
|
|
51
|
+
"@amos.com/amos-js": "0.11.4",
|
|
52
52
|
"@types/googlepay": "0.7.12"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
package/src/index.tsx
CHANGED
|
@@ -4,13 +4,10 @@ import {
|
|
|
4
4
|
type Appearance,
|
|
5
5
|
type ApplePayButtonElementProps,
|
|
6
6
|
confirmPayment as amosConfirmPayment,
|
|
7
|
-
confirmPaymentIntent as amosConfirmPaymentIntent,
|
|
8
7
|
confirmSetup as amosConfirmSetup,
|
|
9
|
-
confirmSetupIntent as amosConfirmSetupIntent,
|
|
10
8
|
resetForm as amosResetForm,
|
|
11
9
|
validateForm as amosValidateForm,
|
|
12
10
|
type BillingAddressRequirement,
|
|
13
|
-
type ConfirmationResult,
|
|
14
11
|
type ConfirmResult,
|
|
15
12
|
type CreditCardAdditionalFields,
|
|
16
13
|
ensureSkeletonStyles,
|
|
@@ -94,39 +91,9 @@ export function confirmSetup({
|
|
|
94
91
|
return amosConfirmSetup({ iframe: resolveIframe(iframeRef), token });
|
|
95
92
|
}
|
|
96
93
|
|
|
97
|
-
/**
|
|
98
|
-
* @deprecated Use {@link confirmPayment}.
|
|
99
|
-
*/
|
|
100
|
-
export function confirmPaymentIntent({
|
|
101
|
-
iframeRef,
|
|
102
|
-
token,
|
|
103
|
-
}: {
|
|
104
|
-
iframeRef: IframeRef;
|
|
105
|
-
} & Pick<
|
|
106
|
-
components["schemas"]["EmbedToken"],
|
|
107
|
-
"token"
|
|
108
|
-
>): Promise<ConfirmResult> {
|
|
109
|
-
return amosConfirmPaymentIntent({ iframe: resolveIframe(iframeRef), token });
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
/**
|
|
113
|
-
* @deprecated Use {@link confirmSetup}.
|
|
114
|
-
*/
|
|
115
|
-
export function confirmSetupIntent({
|
|
116
|
-
iframeRef,
|
|
117
|
-
token,
|
|
118
|
-
}: {
|
|
119
|
-
iframeRef: IframeRef;
|
|
120
|
-
} & Pick<
|
|
121
|
-
components["schemas"]["EmbedToken"],
|
|
122
|
-
"token"
|
|
123
|
-
>): Promise<ConfirmResult> {
|
|
124
|
-
return amosConfirmSetupIntent({ iframe: resolveIframe(iframeRef), token });
|
|
125
|
-
}
|
|
126
|
-
|
|
127
94
|
/**
|
|
128
95
|
* Clear all field values and API errors in the embedded card/bank iframe
|
|
129
|
-
* form. Call after
|
|
96
|
+
* form. Call after a failed confirm when the customer wants to try again.
|
|
130
97
|
*/
|
|
131
98
|
export function resetForm({ iframeRef }: { iframeRef: IframeRef }): void {
|
|
132
99
|
amosResetForm({ iframe: resolveIframe(iframeRef) });
|
|
@@ -286,10 +253,6 @@ function WalletButtonSlot({
|
|
|
286
253
|
type AmosCreditCardPaymentMethodFormProps = IframePassthroughProps & {
|
|
287
254
|
renderToken: string;
|
|
288
255
|
appearance?: Appearance;
|
|
289
|
-
/**
|
|
290
|
-
* @deprecated Prefer `await confirmPayment()` / `await confirmSetup()`.
|
|
291
|
-
*/
|
|
292
|
-
onResult?: (result: ConfirmationResult) => void;
|
|
293
256
|
/**
|
|
294
257
|
* Called when form validity changes. `isValid` is true when all
|
|
295
258
|
* required fields are present and valid. Does not include PCI data.
|
|
@@ -318,7 +281,6 @@ export function AmosCreditCardPaymentMethodForm({
|
|
|
318
281
|
ref,
|
|
319
282
|
renderToken,
|
|
320
283
|
appearance,
|
|
321
|
-
onResult,
|
|
322
284
|
onValidityChange,
|
|
323
285
|
onCardBrandChanged,
|
|
324
286
|
additionalFields = { cardholderName: false },
|
|
@@ -337,7 +299,6 @@ export function AmosCreditCardPaymentMethodForm({
|
|
|
337
299
|
appearance,
|
|
338
300
|
additionalFields,
|
|
339
301
|
billingAddressRequirement,
|
|
340
|
-
onResult,
|
|
341
302
|
onValidityChange,
|
|
342
303
|
onCardBrandChanged,
|
|
343
304
|
},
|
|
@@ -351,7 +312,6 @@ export function AmosCreditCardPaymentMethodForm({
|
|
|
351
312
|
appearance,
|
|
352
313
|
additionalFields,
|
|
353
314
|
billingAddressRequirement,
|
|
354
|
-
onResult,
|
|
355
315
|
onValidityChange,
|
|
356
316
|
onCardBrandChanged,
|
|
357
317
|
],
|
|
@@ -363,35 +323,26 @@ export function AmosCreditCardPaymentMethodForm({
|
|
|
363
323
|
type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
|
|
364
324
|
renderToken: string;
|
|
365
325
|
appearance?: Appearance;
|
|
366
|
-
/**
|
|
367
|
-
* @deprecated Prefer `await confirmPayment()` / `await confirmSetup()`.
|
|
368
|
-
*/
|
|
369
|
-
onResult?: (result: ConfirmationResult) => void;
|
|
370
326
|
/**
|
|
371
327
|
* Called when form validity changes. `isValid` is true when all
|
|
372
|
-
* required fields are present and valid, or when Plaid Link
|
|
373
|
-
* returned credentials. Does not include PCI data.
|
|
328
|
+
* required fields are present and valid, or when Plaid Embedded Link
|
|
329
|
+
* has returned credentials. Does not include PCI data.
|
|
374
330
|
*/
|
|
375
331
|
onValidityChange?: (event: { isValid: boolean }) => void;
|
|
376
332
|
billingAddressRequirement?: BillingAddressRequirement;
|
|
377
333
|
/**
|
|
378
|
-
*
|
|
379
|
-
*
|
|
380
|
-
*
|
|
381
|
-
*
|
|
382
|
-
* stays hidden until the host passes a real charge.
|
|
334
|
+
* When true, hide the routing/account iframe and mount Plaid Embedded
|
|
335
|
+
* Institution Search in the parent. Ignored when `intent` is `"setup"`
|
|
336
|
+
* (setup always shows Plaid) or when the render token disables
|
|
337
|
+
* verification.
|
|
383
338
|
*
|
|
384
|
-
*
|
|
385
|
-
* `"setup"`.
|
|
386
|
-
*
|
|
387
|
-
* @default "0"
|
|
339
|
+
* @default false
|
|
388
340
|
*/
|
|
389
|
-
|
|
341
|
+
requireAchVerification?: boolean;
|
|
390
342
|
/**
|
|
391
343
|
* `"setup"` saves a bank account for later charges and always shows
|
|
392
|
-
*
|
|
393
|
-
*
|
|
394
|
-
* merchant ACH threshold.
|
|
344
|
+
* Plaid (unless the render token disables verification). `"payment"`
|
|
345
|
+
* uses {@link AmosBankAccountPaymentMethodFormProps.requireAchVerification}.
|
|
395
346
|
*
|
|
396
347
|
* @default "payment"
|
|
397
348
|
*/
|
|
@@ -402,10 +353,9 @@ export function AmosBankAccountPaymentMethodForm({
|
|
|
402
353
|
ref,
|
|
403
354
|
renderToken,
|
|
404
355
|
appearance,
|
|
405
|
-
onResult,
|
|
406
356
|
onValidityChange,
|
|
407
357
|
billingAddressRequirement = "country",
|
|
408
|
-
|
|
358
|
+
requireAchVerification = false,
|
|
409
359
|
intent = "payment",
|
|
410
360
|
style,
|
|
411
361
|
...rest
|
|
@@ -420,9 +370,8 @@ export function AmosBankAccountPaymentMethodForm({
|
|
|
420
370
|
renderToken,
|
|
421
371
|
appearance,
|
|
422
372
|
billingAddressRequirement,
|
|
423
|
-
|
|
373
|
+
requireAchVerification,
|
|
424
374
|
intent,
|
|
425
|
-
onResult,
|
|
426
375
|
onValidityChange,
|
|
427
376
|
},
|
|
428
377
|
remountDeps: [renderToken, billingAddressRequirement, intent],
|
|
@@ -430,9 +379,8 @@ export function AmosBankAccountPaymentMethodForm({
|
|
|
430
379
|
updateDeps: [
|
|
431
380
|
appearance,
|
|
432
381
|
billingAddressRequirement,
|
|
433
|
-
|
|
382
|
+
requireAchVerification,
|
|
434
383
|
intent,
|
|
435
|
-
onResult,
|
|
436
384
|
onValidityChange,
|
|
437
385
|
],
|
|
438
386
|
});
|