@amos.com/react-amos-js 0.9.8 → 0.9.9

package/README.md

@@ -457,12 +457,40 @@ Renders the secure Google Pay iframe button (express checkout flow).
 **Optional props:**
 
 - `appearance` (`{ themeVariables?: Partial<Record<ThemeVariable, string>>; labels?: "above" | "floating" | "placeholder" }`)
+- `buttonType` (`"book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "short" | "long"`, defaults to `"short"`)
+- `buttonColor` (`"default" | "black" | "white"`)
+- `buttonRadius` (`number`, 0–20)
+- `buttonSizeMode` (`"static" | "fill"`)
+- `buttonLocale` (`string`)
+- `buttonBorderType` (`"no_border" | "default_border"`)
+- `style` — forwarded to the Google Pay button **inside** the iframe (not the iframe element). Example: `style={{ height: "48px", width: "100%" }}` with `buttonSizeMode="fill"`.
 
-**Also accepts:** standard iframe props, minus the ones controlled by the SDK (`src`, `title`, `name`, `role`, `allow`).
+**Also accepts:** standard iframe props, minus `src`, `title`, `name`, `role`, `allow`, and `style` (which is the inner button style).
 
 ### `AmosApplePayButton`
 
-Renders the secure Apple Pay iframe button (express checkout flow). Same props and callbacks as `AmosGooglePayButton`.
+Renders the secure Apple Pay iframe button (express checkout flow). Same required props and callbacks as `AmosGooglePayButton`.
+
+**Optional visual props** use Apple's `<apple-pay-button>` attribute names:
+
+- `buttonstyle` (`"black" | "white" | "white-outline"`, defaults to `"black"`)
+- `type` (`"plain" | "buy" | "set-up" | "donate" | "check-out" | "book" | "subscribe" | "reload" | "add-money" | "top-up" | "order" | "rent" | "support" | "contribute" | "tip"`, defaults to `"plain"`)
+- `locale` (`string`, BCP 47, defaults to `"en-US"`)
+- `style` — forwarded to the `<apple-pay-button>` inside the iframe. Apple sizes the button with CSS custom properties:
+
+```tsx
+<AmosApplePayButton
+  buttonstyle="white-outline"
+  type="buy"
+  locale="en-GB"
+  style={{
+    "--apple-pay-button-height": "48px",
+    "--apple-pay-button-width": "100%",
+    width: "100%",
+  }}
+  // ...required props
+/>
+```
 
 Only Amos domains need Apple merchant registration. The button and `ApplePaySession` run inside the Amos embed iframe. On Safari, the native payment sheet is used. On other browsers, Apple's QR handoff opens in a popup (`pay.apple.com`); while that popup is open, the SDK automatically shows a full-viewport waiting overlay on the host page with instructions and a **Cancel payment** button. You do not need to implement popup or overlay handling yourself.
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="googlepay" />
-import { Appearance, BillingAddressRequirement, ConfirmationResult, CreditCardAdditionalFields } from '@amos.com/amos-js';
+import { Appearance, ApplePayButtonElementProps, BillingAddressRequirement, ConfirmationResult, CreditCardAdditionalFields, GooglePayButtonElementProps } from '@amos.com/amos-js';
 import { components } from '@amos.com/node';
 import { ComponentProps, RefObject } from 'react';
 export * from '@amos.com/amos-js';
@@ -56,7 +56,7 @@ type AmosBankAccountPaymentMethodFormProps = IframePassthroughProps & {
     billingAddressRequirement?: BillingAddressRequirement;
 };
 export declare function AmosBankAccountPaymentMethodForm({ ref, renderToken, appearance, onResult, billingAddressRequirement, style, ...rest }: AmosBankAccountPaymentMethodFormProps): import("react").JSX.Element;
-type AmosGooglePayButtonProps = IframePassthroughProps & {
+type AmosGooglePayButtonProps = Omit<IframePassthroughProps, "style"> & GooglePayButtonElementProps & {
     renderToken: string;
     amount: string;
     merchantName: string;
@@ -67,8 +67,8 @@ type AmosGooglePayButtonProps = IframePassthroughProps & {
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
     onResult: (result: ConfirmationResult) => void;
 };
-export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
-type AmosApplePayButtonProps = IframePassthroughProps & {
+export declare function AmosGooglePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, buttonType, buttonColor, buttonRadius, buttonSizeMode, buttonLocale, buttonBorderType, style, ...rest }: AmosGooglePayButtonProps): import("react").JSX.Element;
+type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> & ApplePayButtonElementProps & {
     renderToken: string;
     amount: string;
     merchantName: string;
@@ -79,4 +79,4 @@ type AmosApplePayButtonProps = IframePassthroughProps & {
     }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
     onResult: (result: ConfirmationResult) => void;
 };
-export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, style, ...rest }: AmosApplePayButtonProps): import("react").JSX.Element;
+export declare function AmosApplePayButton({ ref, renderToken, amount, merchantName, appearance, onInitiatePaymentIntentRequest, onResult, buttonstyle, type, locale, style, ...rest }: AmosApplePayButtonProps): import("react").JSX.Element;

package/dist/index.js

@@ -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}){(0,e.confirmPaymentIntent)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){(0,e.confirmSetupIntent)({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),t!=null&&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.useEffect)(()=>{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)})}function d({ref:r,renderToken:i,appearance:a,onResult:o,additionalFields:s={cardholderName:!1},billingAddressRequirement:c=`country`,style:l,...d}){let f=(0,t.useRef)(null);return u({containerRef:f,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:s,billingAddressRequirement:c,onResult:o},remountDeps:[i,s.cardholderName,c],iframePassthrough:{style:l,...d},updateDeps:[a,s,c,o]}),(0,n.jsx)(`div`,{ref:f})}function f({ref:r,renderToken:i,appearance:a,onResult:o,billingAddressRequirement:s=`country`,style:c,...l}){let d=(0,t.useRef)(null);return u({containerRef:d,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:s,onResult:o},remountDeps:[i,s],iframePassthrough:{style:c,...l},updateDeps:[a,s,o]}),(0,n.jsx)(`div`,{ref:d})}function p({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,style:d,...f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l},remountDeps:[i],iframePassthrough:{style:d,...f},updateDeps:[a,o,s,c,l]}),(0,n.jsx)(`div`,{ref:p})}function m({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,style:d,...f}){let p=(0,t.useRef)(null);return u({containerRef:p,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l},remountDeps:[i],iframePassthrough:{style:d,...f},updateDeps:[a,o,s,c,l]}),(0,n.jsx)(`div`,{ref:p})}exports.AmosApplePayButton=m,exports.AmosBankAccountPaymentMethodForm=f,exports.AmosCreditCardPaymentMethodForm=d,exports.AmosGooglePayButton=p,exports.confirmPaymentIntent=a,exports.confirmSetupIntent=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]}})});
+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}){(0,e.confirmPaymentIntent)({iframe:r(t),token:n})}function o({iframeRef:t,token:n}){(0,e.confirmSetupIntent)({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),t!=null&&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.useEffect)(()=>{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)})}function d({ref:r,renderToken:i,appearance:a,onResult:o,additionalFields:s={cardholderName:!1},billingAddressRequirement:c=`country`,style:l,...d}){let f=(0,t.useRef)(null);return u({containerRef:f,iframeRef:r,mount:e.mountAmosCreditCardPaymentMethodForm,options:{renderToken:i,appearance:a,additionalFields:s,billingAddressRequirement:c,onResult:o},remountDeps:[i,s.cardholderName,c],iframePassthrough:{style:l,...d},updateDeps:[a,s,c,o]}),(0,n.jsx)(`div`,{ref:f})}function f({ref:r,renderToken:i,appearance:a,onResult:o,billingAddressRequirement:s=`country`,style:c,...l}){let d=(0,t.useRef)(null);return u({containerRef:d,iframeRef:r,mount:e.mountAmosBankAccountPaymentMethodForm,options:{renderToken:i,appearance:a,billingAddressRequirement:s,onResult:o},remountDeps:[i,s],iframePassthrough:{style:c,...l},updateDeps:[a,s,o]}),(0,n.jsx)(`div`,{ref:d})}function p({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonType:d,buttonColor:f,buttonRadius:p,buttonSizeMode:m,buttonLocale:h,buttonBorderType:g,style:_,...v}){let y=(0,t.useRef)(null);return u({containerRef:y,iframeRef:r,mount:e.mountAmosGooglePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonType:d,buttonColor:f,buttonRadius:p,buttonSizeMode:m,buttonLocale:h,buttonBorderType:g,style:_},remountDeps:[i],iframePassthrough:{...v},updateDeps:[a,o,s,c,l,d,f,p,m,h,g,_]}),(0,n.jsx)(`div`,{ref:y})}function m({ref:r,renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonstyle:d,type:f,locale:p,style:m,...h}){let g=(0,t.useRef)(null);return u({containerRef:g,iframeRef:r,mount:e.mountAmosApplePayButton,options:{renderToken:i,amount:a,merchantName:o,appearance:s,onInitiatePaymentIntentRequest:c,onResult:l,buttonstyle:d,type:f,locale:p,style:m},remountDeps:[i],iframePassthrough:{...h},updateDeps:[a,o,s,c,l,d,f,p,m]}),(0,n.jsx)(`div`,{ref:g})}exports.AmosApplePayButton=m,exports.AmosBankAccountPaymentMethodForm=f,exports.AmosCreditCardPaymentMethodForm=d,exports.AmosGooglePayButton=p,exports.confirmPaymentIntent=a,exports.confirmSetupIntent=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

@@ -101,10 +101,10 @@ function b({ ref: e, renderToken: t, appearance: n, onResult: i, billingAddressR
 		]
 	}), /* @__PURE__ */ u("div", { ref: c });
 }
-function x({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i, onInitiatePaymentIntentRequest: o, onResult: s, style: c, ...d }) {
-	let f = l(null);
+function x({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i, onInitiatePaymentIntentRequest: o, onResult: s, buttonType: c, buttonColor: d, buttonRadius: f, buttonSizeMode: p, buttonLocale: m, buttonBorderType: h, style: g, ..._ }) {
+	let y = l(null);
 	return v({
-		containerRef: f,
+		containerRef: y,
 		iframeRef: e,
 		mount: a,
 		options: {
@@ -113,26 +113,37 @@ function x({ ref: e, renderToken: t, amount: n, merchantName: r, appearance: i,
 			merchantName: r,
 			appearance: i,
 			onInitiatePaymentIntentRequest: o,
-			onResult: s
+			onResult: s,
+			buttonType: c,
+			buttonColor: d,
+			buttonRadius: f,
+			buttonSizeMode: p,
+			buttonLocale: m,
+			buttonBorderType: h,
+			style: g
 		},
 		remountDeps: [t],
-		iframePassthrough: {
-			style: c,
-			...d
-		},
+		iframePassthrough: { ..._ },
 		updateDeps: [
 			n,
 			r,
 			i,
 			o,
-			s
+			s,
+			c,
+			d,
+			f,
+			p,
+			m,
+			h,
+			g
 		]
-	}), /* @__PURE__ */ u("div", { ref: f });
+	}), /* @__PURE__ */ u("div", { ref: y });
 }
-function S({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a, onInitiatePaymentIntentRequest: o, onResult: s, style: c, ...d }) {
-	let f = l(null);
+function S({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a, onInitiatePaymentIntentRequest: o, onResult: s, buttonstyle: c, type: d, locale: f, style: p, ...m }) {
+	let h = l(null);
 	return v({
-		containerRef: f,
+		containerRef: h,
 		iframeRef: e,
 		mount: n,
 		options: {
@@ -141,21 +152,26 @@ function S({ ref: e, renderToken: t, amount: r, merchantName: i, appearance: a,
 			merchantName: i,
 			appearance: a,
 			onInitiatePaymentIntentRequest: o,
-			onResult: s
+			onResult: s,
+			buttonstyle: c,
+			type: d,
+			locale: f,
+			style: p
 		},
 		remountDeps: [t],
-		iframePassthrough: {
-			style: c,
-			...d
-		},
+		iframePassthrough: { ...m },
 		updateDeps: [
 			r,
 			i,
 			a,
 			o,
-			s
+			s,
+			c,
+			d,
+			f,
+			p
 		]
-	}), /* @__PURE__ */ u("div", { ref: f });
+	}), /* @__PURE__ */ u("div", { ref: h });
 }
 //#endregion
 export { S as AmosApplePayButton, b as AmosBankAccountPaymentMethodForm, y as AmosCreditCardPaymentMethodForm, x as AmosGooglePayButton, p as confirmPaymentIntent, m as confirmSetupIntent, h as resetForm, f as validateForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amos.com/react-amos-js",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "vite-plugin-dts": "5.0.3"
   },
   "dependencies": {
-    "@amos.com/amos-js": "0.9.9",
+    "@amos.com/amos-js": "0.9.10",
     "@types/googlepay": "0.7.11"
   },
   "peerDependencies": {

package/src/index.tsx

@@ -2,6 +2,7 @@
 
 import {
   type Appearance,
+  type ApplePayButtonElementProps,
   confirmPaymentIntent as amosConfirmPaymentIntent,
   confirmSetupIntent as amosConfirmSetupIntent,
   resetForm as amosResetForm,
@@ -9,6 +10,7 @@ import {
   type BillingAddressRequirement,
   type ConfirmationResult,
   type CreditCardAdditionalFields,
+  type GooglePayButtonElementProps,
   mountAmosApplePayButton,
   mountAmosBankAccountPaymentMethodForm,
   mountAmosCreditCardPaymentMethodForm,
@@ -272,20 +274,21 @@ export function AmosBankAccountPaymentMethodForm({
   return <div ref={containerRef} />;
 }
 
-type AmosGooglePayButtonProps = IframePassthroughProps & {
-  renderToken: string;
-  amount: string;
-  merchantName: string;
-  appearance?: Appearance;
-  onInitiatePaymentIntentRequest: ({
-    paymentIntentCreateAttributes,
-    customerCreateAttributes,
-  }: {
-    paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
-  }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-  onResult: (result: ConfirmationResult) => void;
-};
+type AmosGooglePayButtonProps = Omit<IframePassthroughProps, "style"> &
+  GooglePayButtonElementProps & {
+    renderToken: string;
+    amount: string;
+    merchantName: string;
+    appearance?: Appearance;
+    onInitiatePaymentIntentRequest: ({
+      paymentIntentCreateAttributes,
+      customerCreateAttributes,
+    }: {
+      paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+      customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+    onResult: (result: ConfirmationResult) => void;
+  };
 
 export function AmosGooglePayButton({
   ref,
@@ -295,6 +298,12 @@ export function AmosGooglePayButton({
   appearance,
   onInitiatePaymentIntentRequest,
   onResult,
+  buttonType,
+  buttonColor,
+  buttonRadius,
+  buttonSizeMode,
+  buttonLocale,
+  buttonBorderType,
   style,
   ...rest
 }: AmosGooglePayButtonProps) {
@@ -311,35 +320,50 @@ export function AmosGooglePayButton({
       appearance,
       onInitiatePaymentIntentRequest,
       onResult,
+      buttonType,
+      buttonColor,
+      buttonRadius,
+      buttonSizeMode,
+      buttonLocale,
+      buttonBorderType,
+      style,
     },
     remountDeps: [renderToken],
-    iframePassthrough: { style, ...rest },
+    iframePassthrough: { ...rest },
     updateDeps: [
       amount,
       merchantName,
       appearance,
       onInitiatePaymentIntentRequest,
       onResult,
+      buttonType,
+      buttonColor,
+      buttonRadius,
+      buttonSizeMode,
+      buttonLocale,
+      buttonBorderType,
+      style,
     ],
   });
 
   return <div ref={containerRef} />;
 }
 
-type AmosApplePayButtonProps = IframePassthroughProps & {
-  renderToken: string;
-  amount: string;
-  merchantName: string;
-  appearance?: Appearance;
-  onInitiatePaymentIntentRequest: ({
-    paymentIntentCreateAttributes,
-    customerCreateAttributes,
-  }: {
-    paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
-    customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
-  }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
-  onResult: (result: ConfirmationResult) => void;
-};
+type AmosApplePayButtonProps = Omit<IframePassthroughProps, "style" | "type"> &
+  ApplePayButtonElementProps & {
+    renderToken: string;
+    amount: string;
+    merchantName: string;
+    appearance?: Appearance;
+    onInitiatePaymentIntentRequest: ({
+      paymentIntentCreateAttributes,
+      customerCreateAttributes,
+    }: {
+      paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+      customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+    onResult: (result: ConfirmationResult) => void;
+  };
 
 export function AmosApplePayButton({
   ref,
@@ -349,6 +373,9 @@ export function AmosApplePayButton({
   appearance,
   onInitiatePaymentIntentRequest,
   onResult,
+  buttonstyle,
+  type,
+  locale,
   style,
   ...rest
 }: AmosApplePayButtonProps) {
@@ -365,15 +392,23 @@ export function AmosApplePayButton({
       appearance,
       onInitiatePaymentIntentRequest,
       onResult,
+      buttonstyle,
+      type,
+      locale,
+      style,
     },
     remountDeps: [renderToken],
-    iframePassthrough: { style, ...rest },
+    iframePassthrough: { ...rest },
     updateDeps: [
       amount,
       merchantName,
       appearance,
       onInitiatePaymentIntentRequest,
       onResult,
+      buttonstyle,
+      type,
+      locale,
+      style,
     ],
   });