integrate sdk with payment-iframe

src/app.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="@sveltejs/kit" />
 
-import type { StringPay } from "$lib/StringPay";
+import type { StringPay } from "$lib/sdk";
 declare global {
-	interface Window {
-		StringPay: StringPay;
-		ethereum: any;
-	}
+    interface Window {
+        StringPay: StringPay;
+        ethereum: any;
+    }
 }

src/lib/StringPayButton.svelte

@@ -1,34 +1,39 @@
-<script lang='ts'>
-	import type { StringPay, StringPayload } from '$lib/StringPay';
-	import { onMount } from 'svelte'
-
-	export let payload: StringPayload;
-	export let disabled = false;
-
-	let StringPay: StringPay;
-
-	onMount(() => {
-		StringPay = window.StringPay;
-
-		if (!StringPay) {
-			console.error("[String Pay] Cannot find stringpay module in DOM");
-		}
-	});
-
-	const init = (payload: StringPayload) => {
-		StringPay?.loadFrame(payload);
-	}
+<script lang="ts">
+    import * as stringSdk from "$lib/sdk";
+    import { onMount } from "svelte";
+
+    export let payload: stringSdk.StringPayload;
+    export let disabled = false;
+
+    // let StringPay: StringPay;
+
+    // onMount(() => {
+    // 	StringPay = window.StringPay;
+
+    // 	if (!StringPay) {
+    // 		console.error("[String Pay] Cannot find stringpay module in DOM");
+    // 	}
+    // });
+
+    const init = (payload: stringSdk.StringPayload) => {
+        const stringPay = stringSdk.init({
+            env: "LOCAL",
+            apiKeyPublic: "str.b91b21dedf1640b488296bf2a0996197",
+            bypassDeviceCheck: true,
+            payload,
+        });
+
+        stringPay.loadIframe();
+
+        window.StringPay = stringPay;
+    };
 </script>
 
-<button
-	class="btn btn-primary rounded border-2 tracking-wider text-white h-11"
-	{disabled}
-	on:click={() => init(payload)}>Mint with Card
-</button>
+<button class="btn btn-primary rounded border-2 tracking-wider text-white h-11" {disabled} on:click={() => init(payload)}>Mint with Card </button>
 
 <style>
-	.btn[disabled] {
-		background-color: #B6D5EC;
-		color: #FAF9F9;
-	}
-</style>
+    .btn[disabled] {
+        background-color: #b6d5ec;
+        color: #faf9f9;
+    }
+</style>

src/lib/index.ts

@@ -1,4 +1,3 @@
-import StringPayButton from './StringPayButton.svelte';
-import type { StringPayload } from './StringPay';
+import StringPayButton from "./StringPayButton.svelte";
 
-export { StringPayButton, type StringPayload };
+export { StringPayButton };

src/lib/sdk/actions.ts

@@ -0,0 +1,79 @@
+import type { Config } from "./config";
+import type { StringIframe } from "./iframe/common";
+import type { Services } from "./services";
+import type { ExecutionRequest, Quote } from "./services/apiClient.service";
+
+export interface StringPayActions {
+    authorizeUser(): Promise<void>;
+    submitCard(): Promise<void>;
+    getQuote(): Promise<void>;
+    subscribeToQuote(callback: (quote: Quote) => void): void;
+    unsubscribeFromQuote(callback: (quote: Quote) => void): void;
+    subscribeTo: (eventName: string, callback: (event: any) => void) => void;
+    unsubscribeFrom: (eventName: string, callback: (event: any) => void) => void;
+    setStyle(style: any): Promise<void>;
+}
+
+export function createActions(iframe: StringIframe, config: Config, services: Services): StringPayActions {
+    const events = services.events;
+
+    async function authorizeUser() {
+        const walletAddress = await services.wallet.getWalletAddress();
+        return services.auth.authorizeUser(walletAddress);
+    }
+
+    /**
+     * Notify the payment iframe to submit the card details
+     */
+    async function submitCard() {
+        return new Promise<string>((resolve, reject) => {
+            iframe.submitCard();
+
+            events.once(events.CARD_TOKENIZED, (token: string) => {
+                return resolve(token);
+            });
+
+            events.once(events.CARD_TOKENIZE_FAILED, (error) => {
+                return reject(error);
+            });
+        });
+    }
+
+    async function setStyle(style: any) {
+        iframe.setStyle();
+    }
+
+    async function getQuote() {
+        const payload = <ExecutionRequest>config.payload;
+        services.quote.getQuote(payload);
+    }
+
+    function subscribeToQuote(callback: (quote: Quote) => void) {
+        const payload = <ExecutionRequest>config.payload;
+        services.quote.startQuote(payload, callback);
+    }
+
+    function unsubscribeFromQuote() {
+        services.quote.stopQuote();
+    }
+
+    function subscribeTo(eventName: string, callback: (data: any) => void) {
+        events.on(eventName, callback);
+    }
+
+    function unsubscribeFrom(eventName: string) {
+        // TODOX
+        // events.off(eventName);
+    }
+
+    return {
+        authorizeUser,
+        getQuote,
+        subscribeToQuote,
+        unsubscribeFromQuote,
+        subscribeTo,
+        unsubscribeFrom,
+        submitCard,
+        setStyle,
+    };
+}