feat: add HostedButtons component

types/components/hosted-buttons.d.ts

@@ -0,0 +1,7 @@
+export interface PayPalHostedButtonsComponentOptions {
+    hostedButtonId: string;
+}
+
+export interface PayPalHostedButtonsComponent {
+    render: (container: HTMLElement | string) => Promise<void>;
+}

types/index.d.ts

@@ -18,11 +18,18 @@ import type {
     rememberFunding,
 } from "./components/funding-eligibility";
 import type { PayPalHostedFieldsComponent } from "./components/hosted-fields";
+import type {
+    PayPalHostedButtonsComponentOptions,
+    PayPalHostedButtonsComponent,
+} from "./components/hosted-buttons";
 
 export interface PayPalNamespace {
     Buttons?: (
         options?: PayPalButtonsComponentOptions,
     ) => PayPalButtonsComponent;
+    HostedButtons?: (
+        options?: PayPalHostedButtonsComponentOptions,
+    ) => PayPalHostedButtonsComponent;
     Marks?: (options?: PayPalMarksComponentOptions) => PayPalMarksComponent;
     Messages?: (
         options?: PayPalMessagesComponentOptions,

types/tests/hosted-buttons.test.ts

@@ -0,0 +1,28 @@
+import { loadScript } from "../../src/index";
+import type { PayPalNamespace } from "../index";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function main() {
+    let paypal: PayPalNamespace | null;
+
+    try {
+        paypal = await loadScript({
+            clientId: "test",
+            components: "buttons",
+        });
+    } catch (err) {
+        throw new Error(`Failed to load the paypal sdk script: ${err}`);
+    }
+
+    if (!paypal?.HostedButtons) {
+        throw new Error("Invalid paypal object for buttons component");
+    }
+
+    paypal.HostedButtons().render("#container");
+    paypal.HostedButtons().render(document.createElement("div"));
+    paypal
+        .HostedButtons({
+            hostedButtonId: "B123456789",
+        })
+        .render("#container");
+}