@licklist/design 0.63.3-dev.0 → 0.63.3-dev.1

package/dist/iframe/ryft/RyftPaymentForm.d.ts

@@ -6,10 +6,13 @@ export type RyftPaymentFormValues = Record<string, never>;
 export interface RyftPaymentFormProps {
     accountId: any;
     isCreateLoading: boolean;
+    isAppUsingInIframe?: boolean;
+    onApplePayButtonClick: () => void;
+    applePayButtonDisabled?: boolean;
     initRyft: (onSuccess: () => void, onFailure: (error?: string) => void) => Promise<void>;
     onSubmit: () => Promise<AttemptPaymentResponse>;
     resetReferrer?: () => void;
     providerPaymentSettings?: ProviderPaymentSettings;
 }
-export declare const RyftPaymentForm: ({ accountId, isCreateLoading, providerPaymentSettings, initRyft, resetReferrer, onSubmit, }: RyftPaymentFormProps) => JSX.Element;
+export declare const RyftPaymentForm: ({ accountId, isCreateLoading, isAppUsingInIframe, providerPaymentSettings, onApplePayButtonClick, initRyft, resetReferrer, onSubmit, }: RyftPaymentFormProps) => JSX.Element;
 //# sourceMappingURL=RyftPaymentForm.d.ts.map

package/dist/iframe/ryft/RyftPaymentForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RyftPaymentForm.d.ts","sourceRoot":"","sources":["../../../src/iframe/ryft/RyftPaymentForm.tsx"],"names":[],"mappings":";AAOA,OAAO,EAKL,sBAAsB,EACvB,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0EAA0E,CAAC;AAKnH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IAEnC,SAAS,EAAE,GAAG,CAAC;IACf,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CACR,SAAS,EAAE,MAAM,IAAI,EACrB,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,KAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAED,eAAO,MAAM,eAAe,gGAOzB,oBAAoB,gBAsKtB,CAAC"}
+{"version":3,"file":"RyftPaymentForm.d.ts","sourceRoot":"","sources":["../../../src/iframe/ryft/RyftPaymentForm.tsx"],"names":[],"mappings":";AAOA,OAAO,EAKL,sBAAsB,EACvB,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0EAA0E,CAAC;AAKnH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IAEnC,SAAS,EAAE,GAAG,CAAC;IACf,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,CACR,SAAS,EAAE,MAAM,IAAI,EACrB,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,KAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAED,eAAO,MAAM,eAAe,2IASzB,oBAAoB,gBA0KtB,CAAC"}

package/dist/iframe/ryft/RyftPaymentForm.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=require("../../static/loader/BlockLoader.js"),o=require("react-i18next"),d=e(require("react-bootstrap/Button")),u=require("react-hook-form"),l=require("../../static/loader/ButtonLoader.js"),c=e(require("react-bootstrap/Alert"));require("../../static/index.js");var s=require("@licklist/plugins/dist/hooks/Ryft/useRyftPayment"),f=require("./utils/ryft-form.js"),m={insufficient_funds:"insufficientFunds",declined_do_not_honour:"declinedDoNotHonour",invalid_card_number:"invalidCardNumber",restricted_card:"restrictedCard",security_violation:"securityViolation",expired_card:"expiredCard",gateway_reject:"gatewayReject",bad_track_data:"badTrackData","3ds_authentication_failure":"3dsAuthenticationFailure",unknown_error:"unknownError"};exports.RyftPaymentForm=function(e){var v,y,_,E=e.accountId,g=e.isCreateLoading,h=e.providerPaymentSettings,p=e.initRyft,b=e.resetReferrer,R=e.onSubmit,q=o.useTranslation(["Design","Validation","Ryft"]).t,N=r.useRef(null),S=i.useHistory(),k=t.__read(r.useState(!1),2),w=k[0],P=k[1],T=t.__read(r.useState(!1),2),F=T[0],A=T[1],j=t.__read(r.useState(!1),2),x=j[0],C=j[1],D=t.__read(r.useState(void 0),2),M=D[0],L=D[1],U=s.useRyftPayment().addEventHandler,V=u.useForm(),B=function(){b&&b()},I=function(e){(null==e?void 0:e.id)&&(null==e?void 0:e.returnUrl)&&(window.location.href="".concat(e.returnUrl,"&ps=").concat(e.id),B())};return r.useEffect((function(){var e,t,r,n,i;!(null===(t=null===(e=N.current)||void 0===e?void 0:e.childNodes)||void 0===t?void 0:t.length)||(null===(n=null===(r=N.current)||void 0===r?void 0:r.childNodes)||void 0===n?void 0:n.length)<3||!(null===(i=E.data)||void 0===i?void 0:i.account_id)||f.injectComponentsInRyftForm({t:q,additionalPaymentMethodsEnabled:null==h?void 0:h.additionalPaymentMethodsEnabled})}),[null===(y=null===(v=N.current)||void 0===v?void 0:v.childNodes)||void 0===y?void 0:y.length]),r.useEffect((function(){var e;(null===(e=E.data)||void 0===e?void 0:e.account_id)&&!E.isError&&p((function(){U("cardValidationChanged",(function(e){P(e.isValid)})),C(!1)}),(function(){return C(!0)}))}),[null===(_=E.data)||void 0===_?void 0:_.account_id]),E.isLoading||E.isFetching||g?n.createElement("div",{className:"mt-5 pt-5"},n.createElement(a.BlockLoader,null)):E.isError?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(c,{key:"danger",variant:"danger"},n.createElement("h5",null,q("Ryft:errorMessage")),q("Ryft:noPaymentProviderFound"))):x?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(c,{key:"danger",variant:"danger"},n.createElement("h5",null,q("Ryft:errorMessage")),q("Ryft:initFailureMessage"),n.createElement("div",{className:"flex flex-column align-items-center mt-4"},n.createElement(d,{variant:"primary",onClick:function(){S.go(0)}},q("Ryft:refresh"))))):n.createElement(n.Fragment,null,n.createElement("form",{ref:N,id:"ryft-pay-form",noValidate:!0,onSubmit:V.handleSubmit((function(){return t.__awaiter(void 0,void 0,void 0,(function(){var e,r,n;return t.__generator(this,(function(t){switch(t.label){case 0:A(!0),t.label=1;case 1:return t.trys.push([1,3,4,5]),[4,R()];case 2:if((e=t.sent())||L("unknown_error"),"requiredAction"in e){if(e.status!==s.RYFT_STATUS_PENDING_ACTION||!(null===(n=e.requiredAction)||void 0===n?void 0:n.url))return I(e),[2];window.location.href=e.requiredAction.url,B()}return e.status===s.RYFT_STATUS_APPROVED||e.status===s.RYFT_STATUS_CAPTURED?(I(e),[2]):(e.lastError&&(L(e.lastError),B()),[3,5]);case 3:return r=t.sent(),L(r),[3,5];case 4:return A(!1),[7];case 5:return[2]}}))}))})),className:"ryft-payment-form"},n.createElement("div",{className:"submit-button-wrapper mt-4 p-1"},n.createElement(d,{type:"submit",disabled:F||!w},F&&n.createElement(l.ButtonLoader,null),q("Design:buyNow"))),M&&n.createElement("div",{id:"ryft-payment-error"},q("".concat(m[M])))))},exports.ryftErrorMap=m;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=require("../../static/loader/BlockLoader.js"),o=require("react-i18next"),d=e(require("react-bootstrap/Button")),l=require("react-hook-form"),u=require("../../static/loader/ButtonLoader.js"),s=e(require("react-bootstrap/Alert"));require("../../static/index.js");var c=require("@licklist/plugins/dist/hooks/Ryft/useRyftPayment"),f=require("./utils/ryft-form.js"),m={insufficient_funds:"insufficientFunds",declined_do_not_honour:"declinedDoNotHonour",invalid_card_number:"invalidCardNumber",restricted_card:"restrictedCard",security_violation:"securityViolation",expired_card:"expiredCard",gateway_reject:"gatewayReject",bad_track_data:"badTrackData","3ds_authentication_failure":"3dsAuthenticationFailure",unknown_error:"unknownError"};exports.RyftPaymentForm=function(e){var v,y,_,p=e.accountId,E=e.isCreateLoading,g=e.isAppUsingInIframe,h=e.providerPaymentSettings,b=e.onApplePayButtonClick,R=e.initRyft,P=e.resetReferrer,k=e.onSubmit,q=o.useTranslation(["Design","Validation","Ryft"]).t,A=r.useRef(null),N=g&&(null==h?void 0:h.additionalPaymentMethodsEnabled),S=i.useHistory(),w=t.__read(r.useState(!1),2),T=w[0],F=w[1],C=t.__read(r.useState(!1),2),j=C[0],x=C[1],I=t.__read(r.useState(!1),2),M=I[0],U=I[1],B=t.__read(r.useState(void 0),2),D=B[0],L=B[1],V=c.useRyftPayment().addEventHandler,H=l.useForm(),O=function(){P&&P()},Y=function(e){(null==e?void 0:e.id)&&(null==e?void 0:e.returnUrl)&&(window.location.href="".concat(e.returnUrl,"&ps=").concat(e.id),O())};return r.useEffect((function(){var e,t,r,n,i;!(null===(t=null===(e=A.current)||void 0===e?void 0:e.childNodes)||void 0===t?void 0:t.length)||(null===(n=null===(r=A.current)||void 0===r?void 0:r.childNodes)||void 0===n?void 0:n.length)<3||!(null===(i=p.data)||void 0===i?void 0:i.account_id)||f.injectComponentsInRyftForm({t:q,isAppUsingInIframe:g,onApplePayButtonClick:b,additionalPaymentMethodsEnabled:null==h?void 0:h.additionalPaymentMethodsEnabled})}),[null===(y=null===(v=A.current)||void 0===v?void 0:v.childNodes)||void 0===y?void 0:y.length,N]),r.useEffect((function(){var e;(null===(e=p.data)||void 0===e?void 0:e.account_id)&&!p.isError&&R((function(){V("cardValidationChanged",(function(e){F(e.isValid)})),U(!1)}),(function(){return U(!0)}))}),[null===(_=p.data)||void 0===_?void 0:_.account_id]),p.isLoading||p.isFetching||E?n.createElement("div",{className:"mt-5 pt-5"},n.createElement(a.BlockLoader,null)):p.isError?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(s,{key:"danger",variant:"danger"},n.createElement("h5",null,q("Ryft:errorMessage")),q("Ryft:noPaymentProviderFound"))):M?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(s,{key:"danger",variant:"danger"},n.createElement("h5",null,q("Ryft:errorMessage")),q("Ryft:initFailureMessage"),n.createElement("div",{className:"flex flex-column align-items-center mt-4"},n.createElement(d,{variant:"primary",onClick:function(){S.go(0)}},q("Ryft:refresh"))))):n.createElement(n.Fragment,null,n.createElement("form",{ref:A,id:"ryft-pay-form",noValidate:!0,onSubmit:H.handleSubmit((function(){return t.__awaiter(void 0,void 0,void 0,(function(){var e,r,n;return t.__generator(this,(function(t){switch(t.label){case 0:x(!0),t.label=1;case 1:return t.trys.push([1,3,4,5]),[4,k()];case 2:if((e=t.sent())||L("unknown_error"),"requiredAction"in e){if(e.status!==c.RYFT_STATUS_PENDING_ACTION||!(null===(n=e.requiredAction)||void 0===n?void 0:n.url))return Y(e),[2];window.location.href=e.requiredAction.url,O()}return e.status===c.RYFT_STATUS_APPROVED||e.status===c.RYFT_STATUS_CAPTURED?(Y(e),[2]):(e.lastError&&(L(e.lastError),O()),[3,5]);case 3:return r=t.sent(),L(r),[3,5];case 4:return x(!1),[7];case 5:return[2]}}))}))})),className:"ryft-payment-form"},n.createElement("div",{className:"submit-button-wrapper mt-4 p-1"},n.createElement(d,{type:"submit",disabled:j||!T},j&&n.createElement(u.ButtonLoader,null),q("Design:buyNow"))),D&&n.createElement("div",{id:"ryft-payment-error"},q("".concat(m[D])))))},exports.ryftErrorMap=m;

package/dist/iframe/ryft/utils/ryft-form.d.ts

@@ -1,6 +1,9 @@
 import { TFunction } from "react-i18next";
-export declare const injectComponentsInRyftForm: ({ t, additionalPaymentMethodsEnabled, }: {
+import { RyftPaymentFormProps } from "../RyftPaymentForm";
+interface InjectComponentsInRyftForm extends Pick<RyftPaymentFormProps, "onApplePayButtonClick" | "isAppUsingInIframe"> {
     t: TFunction<string[]>;
     additionalPaymentMethodsEnabled?: boolean;
-}) => void;
+}
+export declare const injectComponentsInRyftForm: ({ t, additionalPaymentMethodsEnabled, isAppUsingInIframe, onApplePayButtonClick, }: InjectComponentsInRyftForm) => void;
+export {};
 //# sourceMappingURL=ryft-form.d.ts.map

package/dist/iframe/ryft/utils/ryft-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ryft-form.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ryft/utils/ryft-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,0BAA0B;OAIlC,UAAU,MAAM,EAAE,CAAC;sCACY,OAAO;UA6C1C,CAAC"}
+{"version":3,"file":"ryft-form.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ryft/utils/ryft-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,UAAU,0BACR,SAAQ,IAAI,CACV,oBAAoB,EACpB,uBAAuB,GAAG,oBAAoB,CAC/C;IACD,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC;IACvB,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC3C;AAED,eAAO,MAAM,0BAA0B,uFAKpC,0BAA0B,SAsD5B,CAAC"}

package/dist/iframe/ryft/utils/ryft-form.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.injectComponentsInRyftForm=function(e){var t,n,i,d=e.t,o=e.additionalPaymentMethodsEnabled,r=document.getElementById("ryft-pay-iframe");if(r){null===(t=document.getElementById("card-title-container"))||void 0===t||t.remove();var a=document.createElement("div"),l=document.createElement("div"),m=document.createElement("div");m.id="card-title-container",a.textContent=d("Design:enterCardDetails"),l.className="bold-text form-label",l.innerText=d("Design:paymentDetails"),m.append(a,l),null==r||r.before(m);var c=document.getElementById("ryft-pay-grid");if(c&&o){null===(n=document.getElementById("mobile-pay-title"))||void 0===n||n.remove(),null===(i=document.getElementById("mobile-pay-divider-container"))||void 0===i||i.remove();var v=document.createElement("div"),u=document.createElement("div"),y=document.createElement("div"),p=document.createElement("div");v.className="mobile-pay-title",v.innerText=d("Design:expressCheckoutWith"),v.id="mobile-pay-title",u.id="mobile-pay-divider-text",u.innerText="or",y.id="mobile-pay-divider",p.id="mobile-pay-divider-container",p.append(u,y),c.before(v),c.after(p)}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.injectComponentsInRyftForm=function(e){var t,n,i,a,d=e.t,o=e.additionalPaymentMethodsEnabled,l=e.isAppUsingInIframe,r=e.onApplePayButtonClick,m=document.getElementById("ryft-pay-iframe");if(m){null===(t=document.getElementById("card-title-container"))||void 0===t||t.remove();var c=document.createElement("div"),p=document.createElement("div"),u=document.createElement("div");u.id="card-title-container",c.textContent=d("Design:enterCardDetails"),p.className="bold-text form-label",p.innerText=d("Design:paymentDetails"),u.append(c,p),null==m||m.before(u);var y=document.getElementById("ryft-pay-grid");if(y&&o){null===(n=document.getElementById("mobile-pay-title"))||void 0===n||n.remove(),null===(i=document.getElementById("mobile-pay-divider-container"))||void 0===i||i.remove(),null===(a=document.getElementById("apple-pay"))||void 0===a||a.remove();var v=document.createElement("div"),s=document.createElement("div"),b=document.createElement("div"),E=document.createElement("div");if(v.className="mobile-pay-title",v.innerText=d("Design:expressCheckoutWith"),v.id="mobile-pay-title",s.id="mobile-pay-divider-text",s.innerText="or",b.id="mobile-pay-divider",E.id="mobile-pay-divider-container",E.append(s,b),l){var f=document.createElement("button");f.id="apple-pay",f.type="button",f.className="bg-dark btn btn-primary apple-pay-button",f.textContent=d("Events:payWithApple"),f.onclick=r,y.append(f)}y.before(v),y.after(E)}}};

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -135,6 +135,14 @@
       margin-bottom: 0.5rem;
     }
   }
+  .ryft-pay-grid {
+    display: flex;
+    flex-direction: column;
+    .apple-pay-button {
+      height: 2.5rem;
+      margin-top: 1rem;
+    }
+  }
   .mobile-pay-title {
     display: block;
     font-weight: 600;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.63.3-dev.0",
+  "version": "0.63.3-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -36,6 +36,9 @@ export interface RyftPaymentFormProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   accountId: any;
   isCreateLoading: boolean;
+  isAppUsingInIframe?: boolean;
+  onApplePayButtonClick: () => void;
+  applePayButtonDisabled?: boolean;
   initRyft: (
     onSuccess: () => void,
     onFailure: (error?: string) => void
@@ -48,15 +51,19 @@ export interface RyftPaymentFormProps {
 export const RyftPaymentForm = ({
   accountId,
   isCreateLoading,
+  isAppUsingInIframe,
   providerPaymentSettings,
+  onApplePayButtonClick,
   initRyft,
   resetReferrer,
   onSubmit,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(["Design", "Validation", "Ryft"]);
   const formRef = useRef<HTMLFormElement | null>(null);
+  const showApplePayButton =
+    isAppUsingInIframe &&
+    providerPaymentSettings?.additionalPaymentMethodsEnabled;
   const history = useHistory();
-
   const [isValid, setIsValid] = useState(false);
   const [isBtnDisabled, setIsBtnDisabled] = useState(false);
   const [ryftInitFailure, setRyftInitFailure] = useState<boolean>(false);
@@ -133,12 +140,14 @@ export const RyftPaymentForm = ({
       }
       injectComponentsInRyftForm({
         t,
+        isAppUsingInIframe,
+        onApplePayButtonClick,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length]
+    [formRef.current?.childNodes?.length, showApplePayButton]
   );
 
   useEffect(() => {

package/src/iframe/ryft/utils/ryft-form.ts

@@ -1,12 +1,21 @@
 import { TFunction } from "react-i18next";
+import { RyftPaymentFormProps } from "../RyftPaymentForm";
+
+interface InjectComponentsInRyftForm
+  extends Pick<
+    RyftPaymentFormProps,
+    "onApplePayButtonClick" | "isAppUsingInIframe"
+  > {
+  t: TFunction<string[]>;
+  additionalPaymentMethodsEnabled?: boolean;
+}
 
 export const injectComponentsInRyftForm = ({
   t,
   additionalPaymentMethodsEnabled,
-}: {
-  t: TFunction<string[]>;
-  additionalPaymentMethodsEnabled?: boolean;
-}) => {
+  isAppUsingInIframe,
+  onApplePayButtonClick,
+}: InjectComponentsInRyftForm) => {
   const cardContainer = document.getElementById("ryft-pay-iframe");
 
   if (!cardContainer) {
@@ -34,6 +43,7 @@ export const injectComponentsInRyftForm = ({
   // Removing of the old mobile  title container  and divider container
   document.getElementById("mobile-pay-title")?.remove();
   document.getElementById("mobile-pay-divider-container")?.remove();
+  document.getElementById("apple-pay")?.remove();
 
   // Adding title and divider for apple and google pay button
   const mobilePayTitle = document.createElement("div");
@@ -48,6 +58,15 @@ export const injectComponentsInRyftForm = ({
   divider.id = "mobile-pay-divider";
   container.id = "mobile-pay-divider-container";
   container.append(dividerText, divider);
+  if (isAppUsingInIframe) {
+    const applePayButton = document.createElement("button");
+    applePayButton.id = "apple-pay";
+    applePayButton.type = "button";
+    applePayButton.className = "bg-dark btn btn-primary apple-pay-button";
+    applePayButton.textContent = t("Events:payWithApple");
+    applePayButton.onclick = onApplePayButtonClick;
+    payGrid.append(applePayButton);
+  }
   payGrid.before(mobilePayTitle);
   payGrid.after(container);
 };

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -135,6 +135,14 @@
       margin-bottom: 0.5rem;
     }
   }
+  .ryft-pay-grid {
+    display: flex;
+    flex-direction: column;
+    .apple-pay-button {
+      height: 2.5rem;
+      margin-top: 1rem;
+    }
+  }
   .mobile-pay-title {
     display: block;
     font-weight: 600;