xendit · simon-paris · Feb 26, 2026 · xen-gaurang · May 4, 2026
@@ -409,6 +409,18 @@ You can customize the appearance of the button using the options parameter of `c
 To use Google Pay, you must adhere to the Google Pay and Wallet API's [Acceptable Use Policy](https://payments.developers.google.com/terms/aup) and accept the terms defined in the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos). Additionally, please ensure you follow the [Google Pay brand guidelines](https://developers.google.com/pay/api/web/guides/brand-guidelines).
 -->
 
+<!--
+### Apple Pay™
+
+Apple Pay is available to Sessions that meet the following requirements:
+
+- Your Session country is a country where Apple Pay is supported.
+- You have cards available as a payment method and your available cards include at least one card network supported by Apple Pay.
+- You've provided your Apple MerchantID to Xendit on the Xendit Dashboard.
+- The [Apple Pay SDK](https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js) is loaded. (You need to include the SDK yourself, we don't bundle it. There's no need to wait for it to finish loading, if it's still loading when you create the component, it'll have `display:none` until it finishes loading)
+- The user is using a compatible browser. (The component will have `display:none` if the user is using an incompatible browser)
+-->
+
 ## Troubleshooting
 
 ### Usage with React Strict Mode

@@ -77,6 +77,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/applepayjs": "^14.0.9",
     "@types/googlepay": "^0.7.10",
     "@types/mime-types": "^3.0.1",
     "@types/node": "^25.5.0",

@@ -243,6 +243,7 @@ async function generateTestPage() {
   </head>
   <body>
     <script async src="https://pay.google.com/gp/p/js/pay.js"></script>
+    <script async src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"></script>
     <script type="module">${stripTypeScriptTypes(code)}</script>
   </body>
 </html>`;

@@ -7,4 +7,8 @@ export type BffDigitalWallets = {
       payment_method_specification: google.payments.api.PaymentMethodSpecification;
     }[];
   };
+  apple_pay?: {
+    merchant_id: "mock-applepay-merchant-id";
+    apple_pay_payment_request: ApplePayJS.ApplePayPaymentRequest;
+  };
 };
@@ -34,6 +34,14 @@ export const ChannelPickerDigitalWalletSection: FunctionComponent = (props) => {
     }
   }, []);
 
+  useLayoutEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.appendChild(
+        sdk.createDigitalWalletComponent("APPLE_PAY"),
+      );
+    }
+  }, [sdk]);
+
   return (
     <div
       ref={containerRef}

@@ -0,0 +1,89 @@
+import { FunctionComponent } from "preact";
+import { DigitalWalletOptions } from "../public-options-types";
+import { useDigitalWallets, useSession } from "./session-provider";
+import { assert } from "../utils";
+import { useLayoutEffect, useRef } from "preact/hooks";
+
+type Props = {
+  options?: DigitalWalletOptions<"APPLE_PAY">;
+  onReady: () => void;
+};
+
+export const DigitalWalletApplepay: FunctionComponent<Props> = (props) => {
+  const { onReady } = props;
+
+  const session = useSession();
+
+  const digitalWallets = useDigitalWallets();
+  assert(digitalWallets);
+  const digitalWalletsApplePay = digitalWallets.apple_pay;
+  assert(digitalWalletsApplePay);
+
+  const didCallReady = useRef(false);
+
+  const onClick = () => {
+    const applePayData = digitalWalletsApplePay;
+    assert(applePayData);
+
+    const applePaySession = new ApplePaySession(
+      3,
+      digitalWalletsApplePay.apple_pay_payment_request,
+    );
+
+    applePaySession.onvalidatemerchant = async (event) => {
+      try {
+        // const validationURL = event.validationURL;
+        // TODO: call merchant validation endpoint to get merchant session
+        applePaySession.completeMerchantValidation({});
+      } catch (err) {
+        console.error("Error validating Apple Pay merchant:", err);
+        applePaySession.abort();
+      }
+    };
+
+    applePaySession.onpaymentauthorized = async (event) => {
+      // TODO: submit payment
+    };
+
+    applePaySession.begin();
+  };
+
+  useLayoutEffect(() => {
+    if (didCallReady.current) {
+      return;
+    }
+    if (
+      ApplePaySession.supportsVersion(3) &&
+      ApplePaySession.canMakePayments()
+    ) {
+      onReady();
+      didCallReady.current = true;
+    }
+  }, [onReady]);
+
+  return (
+    <apple-pay-button
+      onClick={onClick}
+      className="xendit-apple-pay-button"
+      type="plain"
+      locale={session.locale}
+    />
+  );
+};
+
+declare module "react/jsx-runtime" {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      "apple-pay-button": preact.DetailedHTMLProps<
+        {
+          onClick: () => void;
+          className?: string;
+          type?: "plain" | "buy" | "donate" | "checkout";
+          locale?: string;
+        },
+        HTMLDivElement
+      >;
+    }
+  }
+}
@@ -2,8 +2,9 @@ import { FunctionComponent, JSX } from "preact";
 import { DigitalWalletGooglepay } from "./digital-wallet-googlepay";
 import { DigitalWalletOptions } from "../public-options-types";
 import { XenditDigitalWalletCode } from "../public-data-types";
-import { useCallback, useRef } from "preact/hooks";
 import { DigitalWalletWaitForLoad } from "./digital-wallet-wait-for-load";
+import { DigitalWalletApplepay } from "./digital-wallet-applepay";
+import { useCallback, useRef } from "preact/hooks";
 
 type Props<T extends XenditDigitalWalletCode> = {
   digitalWalletCode: T;
@@ -41,6 +42,20 @@ export const DigitalWalletContainer: FunctionComponent<
       );
       break;
     }
+    case "APPLE_PAY": {
+      el = (
+        <DigitalWalletWaitForLoad
+          scriptTagRegex={sdkStatusCheckers.APPLE_PAY.scriptTagRegex}
+          checkLoaded={sdkStatusCheckers.APPLE_PAY.checkLoaded}
+        >
+          <DigitalWalletApplepay
+            onReady={onReady}
+            options={digitalWalletOptions}
+          />
+        </DigitalWalletWaitForLoad>
+      );
+      break;
+    }
   }
 
   return <div ref={containerRef}>{el}</div>;
@@ -52,6 +67,11 @@ const sdkStatusCheckers = {
     checkLoaded: () =>
       typeof google !== "undefined" && typeof google.payments !== "undefined",
   },
+  APPLE_PAY: {
+    scriptTagRegex:
+      /https:\/\/applepay.cdn-apple.com\/jsapi\/.*\/apple-pay-sdk.js/,
+    checkLoaded: () => typeof ApplePaySession !== "undefined",
+  },
 };
 
 export class InternalDigitalWalletReady extends Event {

@@ -1343,6 +1343,19 @@ export function makeTestBffData(): BffResponse {
           },
         ],
       },
+      apple_pay: {
+        merchant_id: "mock-applepay-merchant-id",
+        apple_pay_payment_request: {
+          merchantCapabilities: ["supports3DS"],
+          supportedNetworks: ["VISA", "MASTERCARD", "AMEX"],
+          countryCode: "ID",
+          currencyCode: "IDR",
+          total: {
+            label: "Total",
+            amount: "10000",
+          },
+        } satisfies ApplePayJS.ApplePayPaymentRequest,
+      },
     },
   };
 }
@@ -265,7 +265,7 @@ export interface XenditPaymentChannelGroup {
 /**
  * @public
  */
-export type XenditDigitalWalletCode = "GOOGLE_PAY";
+export type XenditDigitalWalletCode = "GOOGLE_PAY" | "APPLE_PAY";
 
 /**
  * @public

@@ -116,4 +116,6 @@ export type DigitalWalletOptions<T extends XenditDigitalWalletCode> =
         buttonSizeMode?: "fill" | "static";
         buttonBorderType?: "no_border" | "default_border";
       }
-    : never;
+    : T extends "APPLE_PAY"
+      ? object
+      : never;
@@ -1189,3 +1189,18 @@ xendit-payment-channel[inert] {
 .gpay-card-info-container-fill {
   display: flex;
 }
+
+/* applepay */
+
+.xendit-apple-pay-button {
+  --apple-pay-button-height: 42px;
+  --apple-pay-button-border-radius: 999px;
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  margin: -1px 0;
+  overflow: hidden;
+}
@@ -13,7 +13,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["googlepay"],
+    "types": ["googlepay", "applepayjs"],
     "paths": {
       "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"]
     }