@amos.com/react-amos-js 0.1.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/src/index.d.ts +1 -1
- package/package.json +52 -52
- package/src/index.tsx +1 -0
package/README.md
CHANGED
|
@@ -80,7 +80,7 @@ In short, your app orchestrates the payment flow, while sensitive payment data s
|
|
|
80
80
|
|
|
81
81
|
## Appearance
|
|
82
82
|
|
|
83
|
-
Every component accepts 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. You can update this prop after page load to update the iframe appearance.
|
|
83
|
+
Every component accepts 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 (`"above"`, `"floating"`, or `"placeholder"`) for field label placement. You can update this prop after page load to update the iframe appearance.
|
|
84
84
|
|
|
85
85
|
```tsx
|
|
86
86
|
<AmosCreditCardPaymentMethodForm
|
|
@@ -113,6 +113,8 @@ Only the variables you provide are sent; omitted variables keep their defaults.
|
|
|
113
113
|
| `--destructive` | Error/invalid state borders and icons | `oklch(0.577 0.245 27.325)` |
|
|
114
114
|
| `--border` | General border color | `oklch(0.922 0 0)` |
|
|
115
115
|
| `--input` | Input field border color | `oklch(0.922 0 0)` |
|
|
116
|
+
| `--input-background` | Input field background fill | `var(--background)` |
|
|
117
|
+
| `--input-height` | Height of text inputs and form controls | `2.25rem` |
|
|
116
118
|
| `--ring` | Focus ring and outline color | `oklch(0.708 0 0)` |
|
|
117
119
|
| `--radius` | Base border-radius (derived into sm/md/lg/xl) | `0.625rem` |
|
|
118
120
|
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Appearance, CreditCardAdditionalFields } from '@amos.com/amos-js';
|
|
2
2
|
import { components } from '@amos.com/node';
|
|
3
3
|
import { ComponentProps, RefObject } from 'react';
|
|
4
|
-
export type { Appearance, CreateCustomerInput, CreatePaymentIntentInput, CreateSetupIntentInput, CreditCardAdditionalFields, EmbedToken, EmbedTokenJwt, Message, PaymentIntent, RenderTokenJwt, SetupIntent, ThemeVariable, } from '@amos.com/amos-js';
|
|
4
|
+
export type { Appearance, AppearanceLabels, CreateCustomerInput, CreatePaymentIntentInput, CreateSetupIntentInput, CreditCardAdditionalFields, EmbedToken, EmbedTokenJwt, Message, PaymentIntent, RenderTokenJwt, SetupIntent, ThemeVariable, } from '@amos.com/amos-js';
|
|
5
5
|
export { createMessage, decodeJwt, formatGooglePayPaymentData, getEmbedOrigin, } from '@amos.com/amos-js';
|
|
6
6
|
type IframeRef = RefObject<HTMLIFrameElement | null> | undefined;
|
|
7
7
|
/**
|
package/package.json
CHANGED
|
@@ -1,54 +1,54 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
2
|
+
"name": "@amos.com/react-amos-js",
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/amos/react-amos-js"
|
|
8
|
+
},
|
|
9
|
+
"module": "dist/index.mjs",
|
|
10
|
+
"types": "dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"import": "./dist/index.mjs",
|
|
15
|
+
"require": "./dist/index.js"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"src"
|
|
21
|
+
],
|
|
22
|
+
"scripts": {
|
|
23
|
+
"biome": "biome check --write",
|
|
24
|
+
"dev": "vite",
|
|
25
|
+
"prebuild": "npm run typecheck",
|
|
26
|
+
"build": "vite build",
|
|
27
|
+
"preview": "vite preview",
|
|
28
|
+
"test": "vitest",
|
|
29
|
+
"typecheck": "tsc --noEmit",
|
|
30
|
+
"prepack": "npm run build",
|
|
31
|
+
"changeset": "changeset",
|
|
32
|
+
"version": "changeset version",
|
|
33
|
+
"release": "npm run build && changeset publish"
|
|
34
|
+
},
|
|
35
|
+
"author": "Amos",
|
|
36
|
+
"description": "React SDK for embedding Amos payment methods via iframes. Wraps @amos.com/amos-js.",
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@changesets/cli": "2.31.0",
|
|
39
|
+
"@biomejs/biome": "2.4.15",
|
|
40
|
+
"@types/node": "25.9.1",
|
|
41
|
+
"@types/react": "19.2.15",
|
|
42
|
+
"typescript": "6.0.3",
|
|
43
|
+
"vite": "7.3.3",
|
|
44
|
+
"vite-plugin-dts": "4.5.4"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@amos.com/amos-js": "0.3.0",
|
|
48
|
+
"@amos.com/node": "0.1.6",
|
|
49
|
+
"@types/googlepay": "0.7.10"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"react": "^17 || ^18 || ^19"
|
|
53
|
+
}
|
|
54
54
|
}
|