@bcc-code/payment-client 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,6 @@
 # @bcc-code/payment-client
 
-Client SDK for BCC Payment Orchestrator API
+Client SDK for BCC Payment Orchestrator API with Vue 3 payment components.
 
 ## Installation
 
@@ -10,7 +10,29 @@ pnpm add @bcc-code/payment-client
 npm install @bcc-code/payment-client
 ```
 
-## Usage
+### Peer Dependencies
+
+This package requires the following peer dependencies. Install them based on which payment providers you use:
+
+**Required:**
+- `vue` ^3.0.0
+
+**For Stripe payments:**
+```bash
+pnpm add @stripe/stripe-js@^3.0.0
+```
+
+**For Adyen payments:**
+```bash
+pnpm add @adyen/adyen-web@^6.0.0
+```
+
+**Install all at once:**
+```bash
+pnpm add @bcc-code/payment-client vue@^3.0.0 @stripe/stripe-js@^3.0.0 @adyen/adyen-web@^6.0.0
+```
+
+## API Client Usage
 
 ```typescript
 import { PaymentClient } from '@bcc-code/payment-client'
@@ -46,6 +68,311 @@ const status = await client.getPayment(payment.paymentId)
 const receipt = await client.getReceipt(payment.paymentId)
 ```
 
+## Vue Components Usage
+
+The SDK includes pre-built Vue 3 components for Stripe and Adyen payments.
+
+### Import CSS (Required for Adyen)
+
+If you're using Adyen payments, import the CSS file:
+
+```typescript
+import '@bcc-code/payment-client/styles/adyen.css'
+```
+
+### Stripe Payment Component
+
+```vue
+<template>
+  <StripePayment
+    :payment-id="payment.paymentId"
+    :client-data="payment.clientData"
+    :amount="99.99"
+    currency="EUR"
+    :publishable-key="stripePublishableKey"
+    :return-url="returnUrl"
+    @success="handleSuccess"
+    @error="handleError"
+    @ready="handleReady"
+  />
+</template>
+
+<script setup lang="ts">
+import { PaymentClient } from '@bcc-code/payment-client'
+import { StripePayment } from '@bcc-code/payment-client/components'
+
+const paymentClient = new PaymentClient({
+  baseUrl: 'http://localhost:3200',
+  tenantId: 'your-tenant-uuid',
+  getAuthToken: async () => getBccAuthToken()
+})
+
+const payment = await paymentClient.createPayment({
+  amount: 99.99,
+  currency: 'EUR',
+  paymentMethodType: 'stripe',
+  returnUrl: 'https://yourapp.com/success'
+})
+
+const stripePublishableKey = 'pk_test_...' // Your Stripe publishable key
+const returnUrl = 'https://yourapp.com/payment/success'
+
+const handleSuccess = (result: any) => {
+  console.log('Payment succeeded:', result)
+}
+
+const handleError = (error: any) => {
+  console.error('Payment error:', error)
+}
+
+const handleReady = () => {
+  console.log('Payment form ready')
+}
+</script>
+```
+
+### Adyen Payment Component
+
+```vue
+<template>
+  <AdyenPayment
+    :payment-id="payment.paymentId"
+    :client-data="payment.clientData"
+    :client-key="adyenClientKey"
+    :amount="99.99"
+    currency="EUR"
+    @success="handleSuccess"
+    @error="handleError"
+    @ready="handleReady"
+  />
+</template>
+
+<script setup lang="ts">
+import '@bcc-code/payment-client/styles/adyen.css'
+import { PaymentClient } from '@bcc-code/payment-client'
+import { AdyenPayment } from '@bcc-code/payment-client/components'
+
+const paymentClient = new PaymentClient({
+  baseUrl: 'http://localhost:3200',
+  tenantId: 'your-tenant-uuid',
+  getAuthToken: async () => getBccAuthToken()
+})
+
+const payment = await paymentClient.createPayment({
+  amount: 99.99,
+  currency: 'EUR',
+  paymentMethodType: 'adyen',
+  returnUrl: 'https://yourapp.com/success'
+})
+
+const adyenClientKey = payment.clientKey || 'test_...' // From payment response
+
+const handleSuccess = (result: any) => {
+  console.log('Payment succeeded:', result)
+}
+
+const handleError = (error: any) => {
+  console.error('Payment error:', error)
+}
+
+const handleReady = () => {
+  console.log('Payment form ready')
+}
+</script>
+```
+
+### Component Props
+
+#### StripePayment Props
+
+- `paymentId` (string, required) - Payment ID from CreatePaymentResponse
+- `clientData` (string, optional) - Client data from CreatePaymentResponse
+- `clientKey` (string, optional) - Client key (alternative to publishableKey)
+- `amount` (number, required) - Payment amount
+- `currency` (string, required) - Currency code (EUR, USD, etc.)
+- `publishableKey` (string, optional) - Stripe publishable key
+- `appearance` (object, optional) - Stripe Elements appearance configuration
+- `showPayButton` (boolean, default: true) - Show payment button
+- `locale` (string, default: 'en') - Locale for Stripe Elements
+- `loader` ('auto' | 'always' | 'never', default: 'auto') - Loading indicator
+- `returnUrl` (string, optional) - Return URL after payment
+
+#### AdyenPayment Props
+
+- `paymentId` (string, required) - Payment ID from CreatePaymentResponse
+- `clientData` (string, optional) - Client data from CreatePaymentResponse (contains session data)
+- `clientKey` (string, required) - Adyen client key
+- `amount` (number, optional) - Payment amount
+- `currency` (string, optional) - Currency code
+- `paymentData` (any, optional) - Additional payment data
+- `onCancel` (function, optional) - Cancel callback
+
+### Component Events
+
+Both components emit the following events:
+
+- `@success` - Payment completed successfully
+- `@error` - Payment error occurred
+- `@ready` - Payment form is ready
+- `@submit` - Payment submitted (Stripe only)
+- `@additionalDetails` - Additional details required (Adyen only)
+
+### Tree-shaking
+
+You can import only the components you need:
+
+```typescript
+// Import only Stripe component
+import { StripePayment } from '@bcc-code/payment-client/components'
+
+// Import only Adyen component
+import { AdyenPayment } from '@bcc-code/payment-client/components'
+
+// Import both
+import { StripePayment, AdyenPayment } from '@bcc-code/payment-client/components'
+
+// Note: Components must be imported from the '/components' entry point
+// The main entry point only exports the API client and types
+```
+
+## TypeScript Types
+
+```typescript
+import type {
+  PaymentClient,
+  PaymentClientOptions,
+  CreatePaymentRequest,
+  CreatePaymentResponse,
+  PaymentResponse,
+  StripePaymentProps,
+  AdyenPaymentProps
+} from '@bcc-code/payment-client'
+```
+
+## Examples
+
+### Complete Payment Flow
+
+```vue
+<template>
+  <div>
+    <div v-if="loading">Creating payment...</div>
+    <div v-else-if="error">{{ error }}</div>
+    <StripePayment
+      v-else-if="payment && provider === 'stripe'"
+      :payment-id="payment.paymentId"
+      :client-data="payment.clientData"
+      :amount="amount"
+      :currency="currency"
+      :publishable-key="stripePublishableKey"
+      @success="handlePaymentSuccess"
+      @error="handlePaymentError"
+    />
+    <AdyenPayment
+      v-else-if="payment && provider === 'adyen'"
+      :payment-id="payment.paymentId"
+      :client-data="payment.clientData"
+      :client-key="payment.clientKey"
+      :amount="amount"
+      :currency="currency"
+      @success="handlePaymentSuccess"
+      @error="handlePaymentError"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import '@bcc-code/payment-client/styles/adyen.css'
+import { PaymentClient } from '@bcc-code/payment-client'
+import { StripePayment, AdyenPayment } from '@bcc-code/payment-client/components'
+import type { CreatePaymentResponse } from '@bcc-code/payment-client'
+
+const paymentClient = new PaymentClient({
+  baseUrl: 'http://localhost:3200',
+  tenantId: 'your-tenant-uuid',
+  getAuthToken: async () => getBccAuthToken()
+})
+
+const amount = 99.99
+const currency = 'EUR'
+const provider = 'stripe' // or 'adyen'
+const loading = ref(false)
+const error = ref<string | null>(null)
+const payment = ref<CreatePaymentResponse | null>(null)
+const stripePublishableKey = 'pk_test_...'
+
+const createPayment = async () => {
+  loading.value = true
+  error.value = null
+  
+  try {
+    payment.value = await paymentClient.createPayment({
+      amount,
+      currency,
+      paymentMethodType: provider,
+      returnUrl: `${window.location.origin}/payment/success`
+    })
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to create payment'
+  } finally {
+    loading.value = false
+  }
+}
+
+const handlePaymentSuccess = (result: any) => {
+  console.log('Payment successful:', result)
+  // Redirect or update UI
+}
+
+const handlePaymentError = (err: any) => {
+  console.error('Payment error:', err)
+  error.value = err.message || 'Payment failed'
+}
+
+// Create payment on mount
+createPayment()
+</script>
+```
+
+## Troubleshooting
+
+### Peer Dependency Warnings
+
+If you see peer dependency warnings, make sure you've installed the required packages:
+
+```bash
+pnpm add vue@^3.0.0 @stripe/stripe-js@^3.0.0 @adyen/adyen-web@^6.0.0
+```
+
+### CSS Not Loading (Adyen)
+
+Make sure you import the Adyen CSS:
+
+```typescript
+import '@bcc-code/payment-client/styles/adyen.css'
+```
+
+### Component Not Rendering
+
+1. Ensure Vue 3 is installed and properly configured
+2. Check that you've installed the required peer dependencies
+3. Verify that `clientData` or `clientKey` props are provided correctly
+4. Check browser console for errors
+
+### TypeScript Errors
+
+If you see TypeScript errors about `.vue` files, ensure your `tsconfig.json` includes:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["vite/client"]
+  },
+  "include": ["**/*.vue"]
+}
+```
+
 
 
 

package/dist/components/index.js

@@ -0,0 +1 @@
+"use strict";var w=Object.create;var _=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var F=(s,u,i,n)=>{if(u&&typeof u=="object"||typeof u=="function")for(let o of B(u))!N.call(s,o)&&o!==i&&_(s,o,{get:()=>u[o],enumerable:!(n=A(u,o))||n.enumerable});return s};var E=(s,u,i)=>(i=s!=null?w(K(s)):{},F(u||!s||!s.__esModule?_(i,"default",{value:s,enumerable:!0}):i,s));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),R={class:"stripe-elements"},U={key:0,class:"elements-loading"},V={key:1,class:"elements-error"},M={key:2,class:"payment-button-container"},x=["disabled"],I=t.defineComponent({__name:"StripePayment",props:{paymentId:{},clientData:{default:void 0},clientKey:{default:void 0},amount:{},currency:{},publishableKey:{default:void 0},appearance:{default:void 0},showPayButton:{type:Boolean,default:!0},locale:{default:"en"},loader:{default:"auto"},returnUrl:{default:void 0}},emits:["submit","success","error","ready"],setup(s,{expose:u,emit:i}){const n=s,o=i,b=t.ref(),p=t.ref(!0),l=t.ref(!1),c=t.ref("");let d=null,f=null,m=null;const h=t.computed(()=>({EUR:"€",USD:"$",GBP:"£",CHF:"CHF",NOK:"kr",SEK:"kr",DKK:"kr",PLN:"zł",CZK:"Kč",HUF:"Ft"})[n.currency]||n.currency),P=t.computed(()=>n.amount.toFixed(2)),C=t.computed(()=>{if(n.clientData)try{const a=JSON.parse(n.clientData);return a.clientSecret||a.client_secret}catch{return}}),v=async()=>{if(!b.value)return;let a=n.publishableKey;if(!a&&n.clientData)try{const r=JSON.parse(n.clientData);a=r.publishableKey||r.publishable_key}catch{}if(!a){c.value="Publishable key is required",p.value=!1;return}try{p.value=!0,c.value="";const{loadStripe:r}=await import("@stripe/stripe-js");if(d=await r(a),!d)throw new Error("Failed to load Stripe");const e=C.value,y={appearance:n.appearance||{theme:"stripe",variables:{colorPrimary:"#0570de",colorBackground:"#ffffff",colorText:"#30313d",colorDanger:"#df1b41",fontFamily:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',spacingUnit:"4px",borderRadius:"4px"}},loader:n.loader,locale:n.locale};e&&(y.clientSecret=e),f=d.elements(y),m=f.create("payment",{layout:"tabs",defaultValues:{billingDetails:{name:"",email:"",phone:""}}}),m.mount(b.value),m.on("ready",()=>{p.value=!1,o("ready")}),m.on("change",k=>{k.error?(c.value=k.error.message,o("error",k.error)):c.value=""})}catch(r){c.value=r instanceof Error?r.message:"Failed to initialize payment form",p.value=!1,o("error",r)}},D=async()=>{if(!(!d||!m)){l.value=!0,c.value="";try{const a=n.returnUrl||`${window.location.origin}/payment/return`,{error:r,paymentIntent:e}=await d.confirmPayment({elements:f,confirmParams:{return_url:a},redirect:"if_required"});r?(c.value=r.message||"Payment failed",o("error",r)):e?e.status==="succeeded"?o("success",{paymentIntent:e,status:"succeeded",message:"Payment completed successfully!"}):e.status==="processing"?o("success",{paymentIntent:e,status:"processing",message:"Payment is being processed..."}):o("submit",{paymentIntent:e,status:e.status}):o("submit",m)}catch(a){c.value=a instanceof Error?a.message:"Payment failed",o("error",a)}finally{l.value=!1}}},g=()=>{m&&(m.destroy(),m=null),f&&(f=null),d&&(d=null)};return t.onMounted(()=>{v()}),t.onUnmounted(()=>{g()}),t.watch(()=>n.currency,()=>{g(),v()}),t.watch([()=>n.publishableKey,()=>n.clientData],()=>{(n.publishableKey||n.clientData)&&(g(),v())}),u({destroyElements:g}),(a,r)=>(t.openBlock(),t.createElementBlock("div",R,[t.createElementVNode("div",{ref_key:"elementsContainer",ref:b,class:"elements-container"},null,512),p.value?(t.openBlock(),t.createElementBlock("div",U,[...r[0]||(r[0]=[t.createElementVNode("div",{class:"loading-spinner"},null,-1),t.createElementVNode("p",null,"Loading payment form...",-1)])])):t.createCommentVNode("",!0),c.value?(t.openBlock(),t.createElementBlock("div",V,[r[1]||(r[1]=t.createElementVNode("div",{class:"error-icon"}," ⚠️ ",-1)),t.createElementVNode("p",null,t.toDisplayString(c.value),1),t.createElementVNode("button",{class:"retry-btn",onClick:v}," Retry ")])):t.createCommentVNode("",!0),s.showPayButton&&!p.value&&!c.value?(t.openBlock(),t.createElementBlock("div",M,[t.createElementVNode("button",{disabled:l.value,class:"payment-button",onClick:D},t.toDisplayString(l.value?"Processing...":`Pay ${h.value}${P.value}`),9,x)])):t.createCommentVNode("",!0)]))}}),S=(s,u)=>{const i=s.__vccOpts||s;for(const[n,o]of u)i[n]=o;return i},O=S(I,[["__scopeId","data-v-adbdf3c5"]]),q=t.defineComponent({__name:"AdyenPayment",props:{paymentId:{},clientData:{},clientKey:{},environment:{},amount:{},currency:{},paymentData:{},onCancel:{type:Function}},emits:["submit","additionalDetails","error","ready","success"],setup(s,{emit:u}){const i=s,n=u,o=t.ref(null),b=()=>{if(!i.clientData)return console.error("No clientData provided"),null;try{const l=JSON.parse(i.clientData);return console.log("Parsed Adyen session data:",l),{id:l.id,sessionData:l.sessionData,amount:l.amount,reference:l.reference,returnUrl:l.returnUrl,merchantAccount:l.merchantAccount}}catch(l){return console.error("Failed to parse clientData:",l),null}},p=async()=>{var c;if(!i.clientKey||!o.value){console.error("Initialization failed: Missing clientKey or container.");return}const l=b();if(!l){console.error("Failed to parse session data"),n("error",new Error("Failed to parse session data"));return}try{const{AdyenCheckout:d,Card:f,ApplePay:m,GooglePay:h,Klarna:P,Blik:C,Dropin:v}=await import("@adyen/adyen-web"),D={environment:i.environment||"test",clientKey:i.clientKey,session:l,onPaymentCompleted:(e,y)=>{console.info("Payment Completed:",e,y),n("submit",e),e.resultCode==="Authorised"||e.resultCode==="Received"?(console.info("Payment Successful:",e),n("success",{status:"succeeded",message:"Payment completed successfully",resultCode:e.resultCode,pspReference:e.pspReference,paymentData:e})):e.resultCode==="Pending"?(console.info("Payment Pending:",e),n("success",{status:"processing",message:"Payment is being processed",resultCode:e.resultCode,pspReference:e.pspReference,paymentData:e})):(e.resultCode==="Refused"||e.resultCode==="Error")&&(console.error("Payment Failed:",e),n("error",{message:e.refusalReason||"Payment was declined",resultCode:e.resultCode,paymentData:e}))},onAdditionalDetails:(e,y)=>{console.info("Additional Details:",e,y),n("additionalDetails",e)},onError:(e,y)=>{console.error("Adyen Error:",e.name,e.message,e.stack,y),n("error",e)}},g={showPayButton:!0,paymentMethodComponents:[f,m,h,P,C],paymentMethodsConfiguration:{card:{hasHolderName:!0,holderNameRequired:!0,billingAddressRequired:!1,enableStoreDetails:!1},applePay:{showPayButton:!0},googlePay:{showPayButton:!0},klarna:{useKlarnaWidget:!0},blik:{}}},a=await d(D);console.log("Adyen Checkout created:",a),console.log("Available payment methods from session:",(c=a.paymentMethodsResponse)==null?void 0:c.paymentMethods);const r=new v(a,g);console.log("Adyen Drop-in created with session payment methods"),o.value&&(r.mount(o.value),console.log("Adyen Drop-in mounted successfully"),n("ready"))}catch(d){console.error("Error creating Adyen Drop-in:",d),n("error",d)}};return t.onMounted(()=>{p()}),t.watch(()=>i.clientData,()=>{o.value&&(o.value.innerHTML="",p())}),(l,c)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"dropinContainer",ref:o,class:"payment-dropin"},null,512))}}),z=S(q,[["__scopeId","data-v-3e73f212"]]);exports.AdyenPayment=z;exports.StripePayment=O;

package/dist/components/index.mjs

@@ -0,0 +1,287 @@
+import { defineComponent as R, ref as h, computed as w, onMounted as B, onUnmounted as N, watch as E, createElementBlock as P, openBlock as D, createElementVNode as p, createCommentVNode as A, toDisplayString as F } from "vue";
+const x = { class: "stripe-elements" }, M = {
+  key: 0,
+  class: "elements-loading"
+}, I = {
+  key: 1,
+  class: "elements-error"
+}, z = {
+  key: 2,
+  class: "payment-button-container"
+}, H = ["disabled"], O = /* @__PURE__ */ R({
+  __name: "StripePayment",
+  props: {
+    paymentId: {},
+    clientData: { default: void 0 },
+    clientKey: { default: void 0 },
+    amount: {},
+    currency: {},
+    publishableKey: { default: void 0 },
+    appearance: { default: void 0 },
+    showPayButton: { type: Boolean, default: !0 },
+    locale: { default: "en" },
+    loader: { default: "auto" },
+    returnUrl: { default: void 0 }
+  },
+  emits: ["submit", "success", "error", "ready"],
+  setup(m, { expose: g, emit: i }) {
+    const t = m, o = i, b = h(), u = h(!0), r = h(!1), s = h("");
+    let l = null, y = null, c = null;
+    const C = w(() => ({
+      EUR: "€",
+      USD: "$",
+      GBP: "£",
+      CHF: "CHF",
+      NOK: "kr",
+      SEK: "kr",
+      DKK: "kr",
+      PLN: "zł",
+      CZK: "Kč",
+      HUF: "Ft"
+    })[t.currency] || t.currency), _ = w(() => t.amount.toFixed(2)), k = w(() => {
+      if (t.clientData)
+        try {
+          const n = JSON.parse(t.clientData);
+          return n.clientSecret || n.client_secret;
+        } catch {
+          return;
+        }
+    }), f = async () => {
+      if (!b.value) return;
+      let n = t.publishableKey;
+      if (!n && t.clientData)
+        try {
+          const a = JSON.parse(t.clientData);
+          n = a.publishableKey || a.publishable_key;
+        } catch {
+        }
+      if (!n) {
+        s.value = "Publishable key is required", u.value = !1;
+        return;
+      }
+      try {
+        u.value = !0, s.value = "";
+        const { loadStripe: a } = await import("@stripe/stripe-js");
+        if (l = await a(n), !l)
+          throw new Error("Failed to load Stripe");
+        const e = k.value, d = {
+          appearance: t.appearance || {
+            theme: "stripe",
+            variables: {
+              colorPrimary: "#0570de",
+              colorBackground: "#ffffff",
+              colorText: "#30313d",
+              colorDanger: "#df1b41",
+              fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+              spacingUnit: "4px",
+              borderRadius: "4px"
+            }
+          },
+          loader: t.loader,
+          locale: t.locale
+        };
+        e && (d.clientSecret = e), y = l.elements(d), c = y.create("payment", {
+          layout: "tabs",
+          defaultValues: {
+            billingDetails: {
+              name: "",
+              email: "",
+              phone: ""
+            }
+          }
+        }), c.mount(b.value), c.on("ready", () => {
+          u.value = !1, o("ready");
+        }), c.on("change", (K) => {
+          K.error ? (s.value = K.error.message, o("error", K.error)) : s.value = "";
+        });
+      } catch (a) {
+        s.value = a instanceof Error ? a.message : "Failed to initialize payment form", u.value = !1, o("error", a);
+      }
+    }, S = async () => {
+      if (!(!l || !c)) {
+        r.value = !0, s.value = "";
+        try {
+          const n = t.returnUrl || `${window.location.origin}/payment/return`, { error: a, paymentIntent: e } = await l.confirmPayment({
+            elements: y,
+            confirmParams: {
+              return_url: n
+            },
+            redirect: "if_required"
+          });
+          a ? (s.value = a.message || "Payment failed", o("error", a)) : e ? e.status === "succeeded" ? o("success", {
+            paymentIntent: e,
+            status: "succeeded",
+            message: "Payment completed successfully!"
+          }) : e.status === "processing" ? o("success", {
+            paymentIntent: e,
+            status: "processing",
+            message: "Payment is being processed..."
+          }) : o("submit", { paymentIntent: e, status: e.status }) : o("submit", c);
+        } catch (n) {
+          s.value = n instanceof Error ? n.message : "Payment failed", o("error", n);
+        } finally {
+          r.value = !1;
+        }
+      }
+    }, v = () => {
+      c && (c.destroy(), c = null), y && (y = null), l && (l = null);
+    };
+    return B(() => {
+      f();
+    }), N(() => {
+      v();
+    }), E(() => t.currency, () => {
+      v(), f();
+    }), E([() => t.publishableKey, () => t.clientData], () => {
+      (t.publishableKey || t.clientData) && (v(), f());
+    }), g({
+      destroyElements: v
+    }), (n, a) => (D(), P("div", x, [
+      p("div", {
+        ref_key: "elementsContainer",
+        ref: b,
+        class: "elements-container"
+      }, null, 512),
+      u.value ? (D(), P("div", M, [...a[0] || (a[0] = [
+        p("div", { class: "loading-spinner" }, null, -1),
+        p("p", null, "Loading payment form...", -1)
+      ])])) : A("", !0),
+      s.value ? (D(), P("div", I, [
+        a[1] || (a[1] = p("div", { class: "error-icon" }, " ⚠️ ", -1)),
+        p("p", null, F(s.value), 1),
+        p("button", {
+          class: "retry-btn",
+          onClick: f
+        }, " Retry ")
+      ])) : A("", !0),
+      m.showPayButton && !u.value && !s.value ? (D(), P("div", z, [
+        p("button", {
+          disabled: r.value,
+          class: "payment-button",
+          onClick: S
+        }, F(r.value ? "Processing..." : `Pay ${C.value}${_.value}`), 9, H)
+      ])) : A("", !0)
+    ]));
+  }
+}), U = (m, g) => {
+  const i = m.__vccOpts || m;
+  for (const [t, o] of g)
+    i[t] = o;
+  return i;
+}, L = /* @__PURE__ */ U(O, [["__scopeId", "data-v-adbdf3c5"]]), $ = /* @__PURE__ */ R({
+  __name: "AdyenPayment",
+  props: {
+    paymentId: {},
+    clientData: {},
+    clientKey: {},
+    environment: {},
+    amount: {},
+    currency: {},
+    paymentData: {},
+    onCancel: { type: Function }
+  },
+  emits: ["submit", "additionalDetails", "error", "ready", "success"],
+  setup(m, { emit: g }) {
+    const i = m, t = g, o = h(null), b = () => {
+      if (!i.clientData)
+        return console.error("No clientData provided"), null;
+      try {
+        const r = JSON.parse(i.clientData);
+        return console.log("Parsed Adyen session data:", r), {
+          id: r.id,
+          sessionData: r.sessionData,
+          amount: r.amount,
+          reference: r.reference,
+          returnUrl: r.returnUrl,
+          merchantAccount: r.merchantAccount
+        };
+      } catch (r) {
+        return console.error("Failed to parse clientData:", r), null;
+      }
+    }, u = async () => {
+      var s;
+      if (!i.clientKey || !o.value) {
+        console.error("Initialization failed: Missing clientKey or container.");
+        return;
+      }
+      const r = b();
+      if (!r) {
+        console.error("Failed to parse session data"), t("error", new Error("Failed to parse session data"));
+        return;
+      }
+      try {
+        const { AdyenCheckout: l, Card: y, ApplePay: c, GooglePay: C, Klarna: _, Blik: k, Dropin: f } = await import("@adyen/adyen-web"), S = {
+          environment: i.environment || "test",
+          clientKey: i.clientKey,
+          session: r,
+          onPaymentCompleted: (e, d) => {
+            console.info("Payment Completed:", e, d), t("submit", e), e.resultCode === "Authorised" || e.resultCode === "Received" ? (console.info("Payment Successful:", e), t("success", {
+              status: "succeeded",
+              message: "Payment completed successfully",
+              resultCode: e.resultCode,
+              pspReference: e.pspReference,
+              paymentData: e
+            })) : e.resultCode === "Pending" ? (console.info("Payment Pending:", e), t("success", {
+              status: "processing",
+              message: "Payment is being processed",
+              resultCode: e.resultCode,
+              pspReference: e.pspReference,
+              paymentData: e
+            })) : (e.resultCode === "Refused" || e.resultCode === "Error") && (console.error("Payment Failed:", e), t("error", {
+              message: e.refusalReason || "Payment was declined",
+              resultCode: e.resultCode,
+              paymentData: e
+            }));
+          },
+          onAdditionalDetails: (e, d) => {
+            console.info("Additional Details:", e, d), t("additionalDetails", e);
+          },
+          onError: (e, d) => {
+            console.error("Adyen Error:", e.name, e.message, e.stack, d), t("error", e);
+          }
+        }, v = {
+          showPayButton: !0,
+          paymentMethodComponents: [y, c, C, _, k],
+          paymentMethodsConfiguration: {
+            card: {
+              hasHolderName: !0,
+              holderNameRequired: !0,
+              billingAddressRequired: !1,
+              enableStoreDetails: !1
+            },
+            applePay: {
+              showPayButton: !0
+            },
+            googlePay: {
+              showPayButton: !0
+            },
+            klarna: {
+              useKlarnaWidget: !0
+            },
+            blik: {
+              // BLIK configuration for Polish market
+            }
+          }
+        }, n = await l(S);
+        console.log("Adyen Checkout created:", n), console.log("Available payment methods from session:", (s = n.paymentMethodsResponse) == null ? void 0 : s.paymentMethods);
+        const a = new f(n, v);
+        console.log("Adyen Drop-in created with session payment methods"), o.value && (a.mount(o.value), console.log("Adyen Drop-in mounted successfully"), t("ready"));
+      } catch (l) {
+        console.error("Error creating Adyen Drop-in:", l), t("error", l);
+      }
+    };
+    return B(() => {
+      u();
+    }), E(() => i.clientData, () => {
+      o.value && (o.value.innerHTML = "", u());
+    }), (r, s) => (D(), P("div", {
+      ref_key: "dropinContainer",
+      ref: o,
+      class: "payment-dropin"
+    }, null, 512));
+  }
+}), J = /* @__PURE__ */ U($, [["__scopeId", "data-v-3e73f212"]]);
+export {
+  J as AdyenPayment,
+  L as StripePayment
+};

package/dist/index.d.mts

@@ -37,6 +37,7 @@ interface CreatePaymentResponse {
     paymentId: string;
     clientData?: string;
     clientKey?: string;
+    environment?: string;
 }
 interface PaymentResponse {
     uid: string;
@@ -106,4 +107,27 @@ declare class PaymentClient {
     getReceipt(paymentId: string): Promise<PaymentReceiptResponse | null>;
 }
 
-export { type CreatePaymentRequest, type CreatePaymentResponse, type LineItemRequest, type LineItemResponse, PaymentClient, type PaymentClientOptions, type PaymentReceiptResponse, type PaymentResponse, type PersonInfoRequest };
+interface StripePaymentProps {
+    paymentId: string;
+    clientData?: string;
+    clientKey?: string;
+    amount: number;
+    currency: string;
+    publishableKey?: string;
+    appearance?: any;
+    showPayButton?: boolean;
+    locale?: string;
+    loader?: 'auto' | 'always' | 'never';
+    returnUrl?: string;
+}
+interface AdyenPaymentProps {
+    paymentId: string;
+    clientData?: string;
+    clientKey?: string;
+    amount?: number;
+    currency?: string;
+    paymentData?: any;
+    onCancel?: () => void;
+}
+
+export { type AdyenPaymentProps, type CreatePaymentRequest, type CreatePaymentResponse, type LineItemRequest, type LineItemResponse, PaymentClient, type PaymentClientOptions, type PaymentReceiptResponse, type PaymentResponse, type PersonInfoRequest, type StripePaymentProps };