@solvimon/solvimon-web 0.1.0-alpha.8 → 0.1.0-alpha.9

package/README.md

@@ -69,6 +69,31 @@ export default function Page() {
 }
 ```
 
+## CSS overrides
+
+Solvimon components render inside shadow DOM, so CSS from the host page cannot style them directly. Pass `cssOverrides` to `createSolvimonCore` to inject customer CSS into each SDK shadow root.
+
+```ts
+import { createSolvimonCore } from '@solvimon/solvimon-web/core';
+
+const solvimon = createSolvimonCore({
+    environment: 'TEST',
+    cssOverrides: `
+        .sv-root {
+            font-family: Inter, sans-serif;
+        }
+
+        .sv-checkout__submit {
+            border-radius: 24px !important;
+        }
+    `,
+});
+```
+
+Use the public `sv-*` classes as styling hooks. Do not rely on internal Tailwind utility classes, because those can change.
+
+For more details, see [`@solvimon/solvimon-web/core`](./src/public/core/README.md).
+
 ## Available components
 
 ### Screens
@@ -99,6 +124,66 @@ Embeddable building blocks.
 | `@solvimon/solvimon-web/components/subscriptions-list`       | `<solvimon-subscriptions-list>`       |
 | `@solvimon/solvimon-web/components/wallet-balances`          | `<solvimon-wallet-balances>`          |
 
+## Supported Adyen payment methods
+
+### Cards
+
+- American Express
+- Bancontact
+- Carnet
+- Cartes Bancaires
+- China UnionPay
+- Dankort
+- Diners Club
+- Discover
+- EFTPOS
+- Elo
+- Girocard
+- Hipercard
+- JCB
+- Maestro
+- Mastercard
+- NYCE
+- Pulse
+- Star
+- UnionPay
+- V Pay
+- Visa
+
+### Digital wallets
+
+- Amazon Pay
+- Apple Pay
+- Bancontact Mobile
+- Cash App Pay
+- DANA
+- GCash
+- Google Pay
+- GoPay
+- KakaoPay
+- MOMO
+- PayPal
+- TWINT
+
+### Direct debit
+
+- ACH (US)
+- Bacs Direct Debit (UK)
+- SEPA Direct Debit
+- Pay by Bank (US)
+
+### Online banking
+
+- EPS
+- iDEAL
+- Pay by Bank
+- Trustly
+
+### Buy now, pay later
+
+- Klarna
+- Zip
+
 ## Release pipeline
 
 Releases are published to [npm](https://www.npmjs.com/package/@solvimon/solvimon-web)
@@ -106,3 +191,42 @@ automatically via GitHub Actions. See the
 [publishing documentation](./docs/development/publish.md) for the release flow.
 
 Want to contribute? Check the [developer documentation](./docs/development/readme.md).
+
+<!-- log-codes:start — DO NOT EDIT: auto-generated by `npm run logs:list` -->
+## Error logging
+
+The SDK emits structured log entries via the [`onLog`](#error-logging) callback. Subscribe to receive all log events and filter by `code` for programmatic handling.
+
+### Error codes
+
+| Code | Description |
+| :--- | :---------- |
+| `ADYEN_SUBMIT_FAILED` | Failed to submit Adyen drop-in |
+| `APPLE_PAY_AUTHORIZATION_FAILED` | Payment authorization failed |
+| `APPLE_PAY_ERROR` | Apple Pay error |
+| `CUSTOMER_FETCH_FAILED` | Failed to fetch customer billing information |
+| `EXPRESS_CHECKOUT_GOOGLE_PAY_ERROR` | The Google Pay button reference is not found and cannot be mounted |
+| `EXPRESS_CHECKOUT_PAYPAL_ERROR` | The PayPal button reference is not found and cannot be mounted |
+| `INITIAL_DATA_LOAD_FAILED` | Failed to load initial data |
+| `INTEGRATION_ERROR` | Unhandled error in payment submission flow |
+| `INVALID_COUNTRY_CODE` | invalid country code provided:… |
+| `INVALID_EMAIL` | invalid email provided:… |
+| `INVALID_REDIRECT_RESULT` | Redirect result is set but payment acceptor id is missing |
+| `INVALID_TOKEN` | Failed to fetch access token |
+| `INVOICE_PREVIEW_FAILED` | Failed to load invoice preview |
+| `PAYMENT_AUTHORIZATION_FAILED` | Failed payment authorization for payment acceptor with id… |
+| `PAYMENT_DETAILS_CALL_FAILED` | Failed fetching payment details |
+| `PAYMENT_INTEGRATION_INITIALIZATION_FAILED` | Failed to mount Adyen web drop-in |
+| `PURCHASE_FAILED` | Failed to complete upgrade subscription purchase |
+| `REQUEST_PARSE_FAILED` | Failed to parse JSON response |
+| `RESOURCE_REVOKED` | Failed to load portal resource |
+| `TOKENIZATION_FAILED` | Missing customer id for payment acceptor with id… |
+
+### Warning codes
+
+| Code | Description |
+| :--- | :---------- |
+| `ADYEN_INVALID_CONFIGURATION` | No environment set for adyen advanced flow, defaulted to live |
+| `APPLE_PAY_ACTION_REQUIRED` | Payment requires additional action |
+| `TRANSLATION_LOAD_FAILED` | Failed to load translations for locale… |
+<!-- log-codes:end — DO NOT EDIT: auto-generated by `npm run logs:list` -->

package/dist/{BillingInformation.vue_vue_type_script_setup_true_lang-CT0Tjsnw.mjs → BillingInformation.vue_vue_type_script_setup_true_lang-CX8vlY2Z.mjs}

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, createSlots, withCtx, createVNode, createTextVNode, toDisplayString } from "vue";
-import { u as useIntl, c as _sfc_main$2, e as _sfc_main$3 } from "./vendor-ui-BwxuPDg8.mjs";
-import { _ as _sfc_main$1 } from "./Skeleton.vue_vue_type_script_setup_true_lang-DXJcL7x6.mjs";
-import { u as useActionDispatchProvider } from "./useActionDispatchProvider-B4gszz0Q.mjs";
+import { u as useIntl, c as _sfc_main$2, e as _sfc_main$3 } from "./vendor-ui-C0K3osvz.mjs";
+import { _ as _sfc_main$1 } from "./Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs";
+import { u as useActionDispatchProvider } from "./useActionDispatchProvider-BC57-Ufn.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BillingInformation",
   props: {
@@ -19,10 +19,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return __props.isLoading ? (openBlock(), createBlock(_sfc_main$1, {
         key: 0,
         variant: "section",
-        class: "min-h-[100px]",
+        class: "sv-billing-information sv-root sv-component sv-loading min-h-[100px]",
         "data-testid": "billing-information-skeleton"
       })) : (openBlock(), createBlock(unref(_sfc_main$2), {
         key: 1,
+        class: "sv-billing-information sv-root sv-component",
         customer: __props.customer,
         "fallback-to-reference": false
       }, createSlots({ _: 2 }, [
@@ -34,6 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               variant: "ghost",
               color: "gray",
               "icon-prefix": "edit",
+              class: "sv-action sv-action--ghost sv-billing-information__edit",
               onClick: _cache[0] || (_cache[0] = ($event) => unref(dispatchAction)({ action: "edit-billing-information" }))
             }, {
               default: withCtx(() => [

package/dist/BillingInformation.vue_vue_type_script_setup_true_lang-DGisvmez.js

@@ -0,0 +1 @@
+const e=require("vue"),i=require("./vendor-ui-5pJF5KBP.js"),t=require("./Skeleton.vue_vue_type_script_setup_true_lang-DfMgIsGm.js"),o=require("./useActionDispatchProvider-rw9kWeE0.js"),n=e.defineComponent({__name:"BillingInformation",props:{customer:{type:Object},isLoading:{type:Boolean},configuration:{default:()=>({showEditButton:!0}),type:Object}},emits:["edit-billing-information"],setup(n){const{$t:s}=i.useIntl(),{dispatchAction:r}=o.useActionDispatchProvider();return(o,a)=>n.isLoading?(e.openBlock(),e.createBlock(t._sfc_main,{key:0,variant:"section",class:"sv-billing-information sv-root sv-component sv-loading min-h-[100px]","data-testid":"billing-information-skeleton"})):(e.openBlock(),e.createBlock(e.unref(i._sfc_main$2),{key:1,class:"sv-billing-information sv-root sv-component",customer:n.customer,"fallback-to-reference":!1},e.createSlots({_:2},[n.configuration.showEditButton?{name:"settings",fn:e.withCtx(()=>[e.createVNode(e.unref(i._sfc_main$3),{size:"sm",variant:"ghost",color:"gray","icon-prefix":"edit",class:"sv-action sv-action--ghost sv-billing-information__edit",onClick:a[0]||(a[0]=i=>e.unref(r)({action:"edit-billing-information"}))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"Edit",id:"customer_overview.billing_information_block.view_all_payment_methods_link_label",description:"The link text that links to the overview page of the customer billing information"})),1)]),_:1})]),key:"0"}:void 0]),1032,["customer"]))}});exports._sfc_main=n;

package/dist/ContentWithAsideLayout-B5B8Kwaw.js

@@ -0,0 +1 @@
+const e=require("vue"),t={class:"sv-layout grid w-full grid-cols-1 gap-4"},o={key:0,class:"sv-layout__header"},l={class:"sv-layout__body flex flex-col items-start gap-6 md:flex-row"},s={class:"sv-layout__content grid w-full grow grid-cols-1 gap-4 md:w-auto"},r={class:"sv-layout__aside grid w-full grid-cols-1 gap-4 md:w-80 md:shrink-0"};const d=((e,t)=>{const o=e.__vccOpts||e;for(const[l,s]of t)o[l]=s;return o})({},[["render",function(d,a){return e.openBlock(),e.createElementBlock("div",t,[d.$slots.header?(e.openBlock(),e.createElementBlock("div",o,[e.renderSlot(d.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",l,[e.createElementVNode("div",s,[e.renderSlot(d.$slots,"content")]),e.createElementVNode("aside",r,[e.renderSlot(d.$slots,"aside")])])])}]]);exports.ContentWithAsideLayout=d;

package/dist/{ContentWithAsideLayout-BTdixy3L.mjs → ContentWithAsideLayout-DhfUkZZg.mjs}

@@ -7,11 +7,14 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main = {};
-const _hoisted_1 = { class: "grid w-full grid-cols-1 gap-4" };
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = { class: "flex flex-col items-start gap-6 md:flex-row" };
-const _hoisted_4 = { class: "grid w-full grow grid-cols-1 gap-4 md:w-auto" };
-const _hoisted_5 = { class: "grid w-full grid-cols-1 gap-4 md:w-80 md:shrink-0" };
+const _hoisted_1 = { class: "sv-layout grid w-full grid-cols-1 gap-4" };
+const _hoisted_2 = {
+  key: 0,
+  class: "sv-layout__header"
+};
+const _hoisted_3 = { class: "sv-layout__body flex flex-col items-start gap-6 md:flex-row" };
+const _hoisted_4 = { class: "sv-layout__content grid w-full grow grid-cols-1 gap-4 md:w-auto" };
+const _hoisted_5 = { class: "sv-layout__aside grid w-full grid-cols-1 gap-4 md:w-80 md:shrink-0" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1, [
     _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_2, [

package/dist/{CustomerPaymentMethods.vue_vue_type_script_setup_true_lang-CK73bYUe.mjs → CustomerPaymentMethods.vue_vue_type_script_setup_true_lang-Bus-5gC3.mjs}

@@ -1,10 +1,10 @@
 import { defineComponent, computed, openBlock, createBlock, unref, createSlots, withCtx, createElementBlock, Fragment, renderList, createVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { u as useIntl, b as _sfc_main$2, j as _sfc_main$3, _ as _sfc_main$4, e as _sfc_main$5 } from "./vendor-ui-BwxuPDg8.mjs";
-import { _ as _sfc_main$6 } from "./Skeleton.vue_vue_type_script_setup_true_lang-DXJcL7x6.mjs";
-import { u as useActionDispatchProvider } from "./useActionDispatchProvider-B4gszz0Q.mjs";
+import { u as useIntl, b as _sfc_main$2, j as _sfc_main$3, _ as _sfc_main$4, e as _sfc_main$5 } from "./vendor-ui-C0K3osvz.mjs";
+import { _ as _sfc_main$6 } from "./Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs";
+import { u as useActionDispatchProvider } from "./useActionDispatchProvider-BC57-Ufn.mjs";
 const _hoisted_1 = {
   key: 0,
-  class: "flex flex-col gap-2"
+  class: "sv-payment-methods__list flex flex-col gap-2"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "CustomerPaymentMethodsBlock",
@@ -22,6 +22,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const hasPaymentMethods = computed(() => props.paymentMethods.length > 0);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$2), {
+        class: "sv-payment-methods",
         "no-spacing": "",
         "no-border": "",
         title: unref($t)(
@@ -37,20 +38,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hasPaymentMethods.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.paymentMethods, (paymentMethod) => {
               return openBlock(), createBlock(unref(_sfc_main$2), {
-                key: paymentMethod.id
+                key: paymentMethod.id,
+                class: "sv-payment-methods__item"
               }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$3), { "payment-method": paymentMethod }, null, 8, ["payment-method"])
+                  createVNode(unref(_sfc_main$3), {
+                    class: "sv-payment-methods__item-content",
+                    "payment-method": paymentMethod
+                  }, null, 8, ["payment-method"])
                 ]),
                 _: 2
               }, 1024);
             }), 128))
-          ])) : (openBlock(), createBlock(unref(_sfc_main$2), { key: 1 }, {
+          ])) : (openBlock(), createBlock(unref(_sfc_main$2), {
+            key: 1,
+            class: "sv-empty-state sv-payment-methods__empty"
+          }, {
             default: withCtx(() => [
               createVNode(unref(_sfc_main$4), {
                 variant: "body-sm",
                 shade: "lighter",
-                "no-spacing": ""
+                "no-spacing": "",
+                class: "sv-payment-methods__empty-message"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
@@ -63,7 +72,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }),
               __props.showAddButton ? (openBlock(), createBlock(unref(_sfc_main$5), {
                 key: 0,
-                class: "mt-4 w-full",
+                class: "sv-action sv-action--secondary sv-action--full-width sv-payment-methods__add mt-4 w-full",
                 variant: "outline",
                 color: "gray",
                 "icon-prefix": "add",
@@ -93,6 +102,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               variant: "ghost",
               color: "gray",
               "icon-suffix": "arrow_right_alt",
+              class: "sv-action sv-action--ghost sv-payment-methods__view-all",
               type: "button",
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("view-all-payment-methods"))
             }, {
@@ -130,10 +140,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return __props.isLoading ? (openBlock(), createBlock(_sfc_main$6, {
         key: 0,
         variant: "section",
-        class: "h-72",
+        class: "sv-payment-methods sv-root sv-component sv-loading h-72",
         "data-testid": "customer-payment-methods-skeleton"
       })) : (openBlock(), createBlock(_sfc_main$1, {
         key: 1,
+        class: "sv-payment-methods sv-root sv-component",
         "is-loading": __props.isLoading,
         "payment-methods": __props.paymentMethods,
         "show-view-all-button": (_a = __props.configuration) == null ? void 0 : _a.showViewAllButton,

package/dist/CustomerPaymentMethods.vue_vue_type_script_setup_true_lang-CkRsyMlJ.js

@@ -0,0 +1 @@
+const e=require("vue"),t=require("./vendor-ui-5pJF5KBP.js"),o=require("./Skeleton.vue_vue_type_script_setup_true_lang-DfMgIsGm.js"),n=require("./useActionDispatchProvider-rw9kWeE0.js"),a={key:0,class:"sv-payment-methods__list flex flex-col gap-2"},s=e.defineComponent({__name:"CustomerPaymentMethodsBlock",props:{paymentMethods:{type:Array},limit:{default:2,type:Number},isLoading:{type:Boolean},showViewAllButton:{type:Boolean},showAddButton:{type:Boolean}},emits:["view-all-payment-methods","add-payment-method"],setup(o){const n=o,{$t:s}=t.useIntl(),i=e.computed(()=>n.paymentMethods.length>0);return(n,d)=>(e.openBlock(),e.createBlock(e.unref(t._sfc_main$1),{class:"sv-payment-methods","no-spacing":"","no-border":"",title:e.unref(s)({defaultMessage:"{count, plural, one {Payment method} other {Payment methods}}",description:"Title for the payment methods block on the customer overview page",id:"customer_overview.payment_methods.title"},{count:String(o.paymentMethods.length)})},e.createSlots({default:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",a,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.paymentMethods,o=>(e.openBlock(),e.createBlock(e.unref(t._sfc_main$1),{key:o.id,class:"sv-payment-methods__item"},{default:e.withCtx(()=>[e.createVNode(e.unref(t._sfc_main$5),{class:"sv-payment-methods__item-content","payment-method":o},null,8,["payment-method"])]),_:2},1024))),128))])):(e.openBlock(),e.createBlock(e.unref(t._sfc_main$1),{key:1,class:"sv-empty-state sv-payment-methods__empty"},{default:e.withCtx(()=>[e.createVNode(e.unref(t._sfc_main),{variant:"body-sm",shade:"lighter","no-spacing":"",class:"sv-payment-methods__empty-message"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"Add a payment method for recurring invoice payments.",description:"Helper text for adding a payment method when no payment methods are configured",id:"customer_overview.payment_methods_block.add_payment_method_helper_text"})),1)]),_:1}),o.showAddButton?(e.openBlock(),e.createBlock(e.unref(t._sfc_main$3),{key:0,class:"sv-action sv-action--secondary sv-action--full-width sv-payment-methods__add mt-4 w-full",variant:"outline",color:"gray","icon-prefix":"add",type:"button",onClick:d[1]||(d[1]=e=>n.$emit("add-payment-method"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"Add payment method",description:"Text for the add payment method button that is shown when no payment methods have been configured",id:"customer_overview.payment_methods_block.add_payment_method_button_label"})),1)]),_:1})):e.createCommentVNode("",!0)]),_:1}))]),_:2},[o.showViewAllButton?{name:"right",fn:e.withCtx(()=>[e.createVNode(e.unref(t._sfc_main$3),{size:"sm",variant:"ghost",color:"gray","icon-suffix":"arrow_right_alt",class:"sv-action sv-action--ghost sv-payment-methods__view-all",type:"button",onClick:d[0]||(d[0]=e=>n.$emit("view-all-payment-methods"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({defaultMessage:"View all",id:"customer_overview.payment_methods_block.view_all_payment_methods_link_label",description:"The link text that links to the overview page of the customer invoices"})),1)]),_:1})]),key:"0"}:void 0]),1032,["title"]))}}),i=e.defineComponent({__name:"CustomerPaymentMethods",props:{isLoading:{type:Boolean},paymentMethods:{type:Array},maxPaymentMethods:{type:Number},configuration:{default:()=>({showViewAllButton:!0,showAddButton:!0}),type:Object}},setup(t){const{dispatchAction:a}=n.useActionDispatchProvider();return(n,i)=>{var d,m;return t.isLoading?(e.openBlock(),e.createBlock(o._sfc_main,{key:0,variant:"section",class:"sv-payment-methods sv-root sv-component sv-loading h-72","data-testid":"customer-payment-methods-skeleton"})):(e.openBlock(),e.createBlock(s,{key:1,class:"sv-payment-methods sv-root sv-component","is-loading":t.isLoading,"payment-methods":t.paymentMethods,"show-view-all-button":null==(d=t.configuration)?void 0:d.showViewAllButton,"show-add-button":null==(m=t.configuration)?void 0:m.showAddButton,onViewAllPaymentMethods:i[0]||(i[0]=t=>e.unref(a)({action:"view-all-payment-methods"})),onAddPaymentMethod:i[1]||(i[1]=t=>e.unref(a)({action:"add-payment-method"}))},null,8,["is-loading","payment-methods","show-view-all-button","show-add-button"]))}}});exports._sfc_main=i;

package/dist/{InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-Dt_Vb7Wz.mjs → InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-Bc2hkpTb.mjs}

@@ -1,9 +1,11 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, createElementVNode, createVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { u as useIntl, b as _sfc_main$1, _ as _sfc_main$2 } from "./vendor-ui-BwxuPDg8.mjs";
+import { u as useIntl, b as _sfc_main$1, _ as _sfc_main$2 } from "./vendor-ui-C0K3osvz.mjs";
 const _hoisted_1 = {
   key: 0,
-  class: "flex flex-col gap-2"
+  class: "sv-invoice-details__body flex flex-col gap-2"
 };
+const _hoisted_2 = { class: "sv-invoice-details__row" };
+const _hoisted_3 = { class: "sv-invoice-details__row" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "InvoiceDetailsBlock",
   props: {
@@ -13,6 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { $t, formatDate } = useIntl();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$1), {
+        class: "sv-invoice-details",
         title: unref($t)({
           defaultMessage: "Invoice details",
           description: "Title for the invoice details block on the invoice overview page",
@@ -21,8 +24,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           __props.invoice ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            createElementVNode("div", null, [
-              createVNode(unref(_sfc_main$2), { variant: "caps-heading" }, {
+            createElementVNode("div", _hoisted_2, [
+              createVNode(unref(_sfc_main$2), {
+                variant: "caps-heading",
+                class: "sv-invoice-details__label"
+              }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
                     defaultMessage: "Invoice date",
@@ -34,7 +40,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }),
               __props.invoice.invoice_date ? (openBlock(), createBlock(unref(_sfc_main$2), {
                 key: 0,
-                variant: "body-xs"
+                variant: "body-xs",
+                class: "sv-invoice-details__value"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref(formatDate)({
@@ -47,8 +54,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _: 1
               })) : createCommentVNode("", true)
             ]),
-            createElementVNode("div", null, [
-              createVNode(unref(_sfc_main$2), { variant: "caps-heading" }, {
+            createElementVNode("div", _hoisted_3, [
+              createVNode(unref(_sfc_main$2), {
+                variant: "caps-heading",
+                class: "sv-invoice-details__label"
+              }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref($t)({
                     defaultMessage: "Due date",
@@ -60,7 +70,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }),
               __props.invoice.due_date ? (openBlock(), createBlock(unref(_sfc_main$2), {
                 key: 0,
-                variant: "body-xs"
+                variant: "body-xs",
+                class: "sv-invoice-details__value"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(unref(formatDate)({

package/dist/InvoiceDetailsBlock.vue_vue_type_script_setup_true_lang-D0vVUHuY.js

@@ -0,0 +1 @@
+const e=require("vue"),i=require("./vendor-ui-5pJF5KBP.js"),t={key:0,class:"sv-invoice-details__body flex flex-col gap-2"},o={class:"sv-invoice-details__row"},a={class:"sv-invoice-details__row"},n=e.defineComponent({__name:"InvoiceDetailsBlock",props:{invoice:{type:Object}},setup(n){const{$t:c,formatDate:s}=i.useIntl();return(d,l)=>(e.openBlock(),e.createBlock(e.unref(i._sfc_main$1),{class:"sv-invoice-details",title:e.unref(c)({defaultMessage:"Invoice details",description:"Title for the invoice details block on the invoice overview page",id:"sdk.invoice_details.invoice_details_block.title"})},{default:e.withCtx(()=>[n.invoice?(e.openBlock(),e.createElementBlock("div",t,[e.createElementVNode("div",o,[e.createVNode(e.unref(i._sfc_main),{variant:"caps-heading",class:"sv-invoice-details__label"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(c)({defaultMessage:"Invoice date",description:"Title for the invoice date in invoice details block on the invoice overview page",id:"sdk.invoice_details.invoice_details_block.invoice_date"})),1)]),_:1}),n.invoice.invoice_date?(e.openBlock(),e.createBlock(e.unref(i._sfc_main),{key:0,variant:"body-xs",class:"sv-invoice-details__value"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({date:n.invoice.invoice_date,format:"date",timezone:n.invoice.customer.timezone,offsetType:"offsetted"})),1)]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",a,[e.createVNode(e.unref(i._sfc_main),{variant:"caps-heading",class:"sv-invoice-details__label"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(c)({defaultMessage:"Due date",description:"Title for the due date in invoice details block on the invoice overview page",id:"sdk.invoice_details.invoice_details_block.due_date"})),1)]),_:1}),n.invoice.due_date?(e.openBlock(),e.createBlock(e.unref(i._sfc_main),{key:0,variant:"body-xs",class:"sv-invoice-details__value"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(s)({date:n.invoice.due_date,format:"date",timezone:n.invoice.customer.timezone,offsetType:"offsetted"})),1)]),_:1})):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]),_:1},8,["title"]))}});exports._sfc_main=n;

package/dist/{PaymentHistoryBlock-DHM-3fh-.js → PaymentHistoryBlock-BiiFJkpT.js}

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-DFw8lrDv.js");exports.default=e._sfc_main;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-DWTEfLrE.js");exports.default=e._sfc_main;

package/dist/{PaymentHistoryBlock-YzJ6bxKr.mjs → PaymentHistoryBlock-D_B099M7.mjs}

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "./PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-D6Cr2Uga.mjs";
+import { _ as _sfc_main } from "./PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-CaMDtHrL.mjs";
 export {
   _sfc_main as default
 };

package/dist/{PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-D6Cr2Uga.mjs → PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-CaMDtHrL.mjs}

@@ -1,7 +1,8 @@
 import { defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock, createCommentVNode } from "vue";
-import { u as useIntl, _ as _sfc_main$1, b as _sfc_main$2, f as _sfc_main$3, h as formatEnum, j as _sfc_main$4 } from "./vendor-ui-BwxuPDg8.mjs";
-const _hoisted_1 = { class: "flex flex-col-reverse gap-1" };
-const _hoisted_2 = { class: "flex justify-between items-center mb-2" };
+import { u as useIntl, _ as _sfc_main$1, b as _sfc_main$2, f as _sfc_main$3, h as formatEnum, j as _sfc_main$4 } from "./vendor-ui-C0K3osvz.mjs";
+const _hoisted_1 = { class: "sv-payment-history" };
+const _hoisted_2 = { class: "sv-payment-history__items flex flex-col-reverse gap-1" };
+const _hoisted_3 = { class: "sv-payment-history__item-header mb-2 flex items-center justify-between" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PaymentHistoryBlock",
   props: {
@@ -21,10 +22,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       REFUSED: "red"
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
+      return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(unref(_sfc_main$1), {
           tag: "h2",
-          variant: "heading-3"
+          variant: "heading-3",
+          class: "sv-payment-history__title"
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(unref($t)({
@@ -35,15 +37,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.paymentAttempts, (paymentAttempt) => {
             return openBlock(), createBlock(unref(_sfc_main$2), {
               key: paymentAttempt.id,
-              class: "mt-1 md:mt-2"
+              class: "sv-payment-history__item mt-1 md:mt-2"
             }, {
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_2, [
-                  createVNode(unref(_sfc_main$1), { variant: "caps-heading" }, {
+                createElementVNode("div", _hoisted_3, [
+                  createVNode(unref(_sfc_main$1), {
+                    variant: "caps-heading",
+                    class: "sv-payment-history__item-title"
+                  }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(unref($t)({
                         defaultMessage: "Payment attempt",
@@ -54,6 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     _: 1
                   }),
                   createVNode(unref(_sfc_main$3), {
+                    class: "sv-payment-history__item-status",
                     color: colorMapping[paymentAttempt.result]
                   }, {
                     default: withCtx(() => [
@@ -64,6 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 paymentAttempt.payment_method_details ? (openBlock(), createBlock(unref(_sfc_main$4), {
                   key: 0,
+                  class: "sv-payment-history__payment-method",
                   "payment-method": paymentAttempt.payment_method_details
                 }, {
                   description: withCtx(() => [

package/dist/PaymentHistoryBlock.vue_vue_type_script_setup_true_lang-DWTEfLrE.js

@@ -0,0 +1 @@
+const e=require("vue"),t=require("./vendor-ui-5pJF5KBP.js"),a={class:"sv-payment-history"},n={class:"sv-payment-history__items flex flex-col-reverse gap-1"},s={class:"sv-payment-history__item-header mb-2 flex items-center justify-between"},r=e.defineComponent({__name:"PaymentHistoryBlock",props:{paymentAttempts:{type:Array},customer:{type:Object}},setup(r){const{$t:o,formatDate:i}=t.useIntl(),m={AUTHORIZED:"green",CANCELLED:"red",ERROR:"red",PENDING:"orange",PENDING_REFUND:"orange",REFUNDED:"orange",CHARGED_BACK:"orange",REFUSED:"red"};return(c,l)=>(e.openBlock(),e.createElementBlock("div",a,[e.createVNode(e.unref(t._sfc_main),{tag:"h2",variant:"heading-3",class:"sv-payment-history__title"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(o)({defaultMessage:"Payment history",description:"Title for the payment history block on the invoice details page",id:"sdk.invoice_details.payment_history.title"})),1)]),_:1}),e.createElementVNode("div",n,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.paymentAttempts,a=>(e.openBlock(),e.createBlock(e.unref(t._sfc_main$1),{key:a.id,class:"sv-payment-history__item mt-1 md:mt-2"},{default:e.withCtx(()=>[e.createElementVNode("div",s,[e.createVNode(e.unref(t._sfc_main),{variant:"caps-heading",class:"sv-payment-history__item-title"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(o)({defaultMessage:"Payment attempt",description:"Title for the payment attempt block",id:"sdk.invoice_details.payment_history.payment_attempt"})),1)]),_:1}),e.createVNode(e.unref(t._sfc_main$4),{class:"sv-payment-history__item-status",color:m[a.result]},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(t.formatEnum)(a.result)),1)]),_:2},1032,["color"])]),a.payment_method_details?(e.openBlock(),e.createBlock(e.unref(t._sfc_main$5),{key:0,class:"sv-payment-history__payment-method","payment-method":a.payment_method_details},{description:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(i)({date:a.created_at,format:"dateTime",offsetType:"offsetted",timezone:r.customer.timezone})),1)]),_:2},1032,["payment-method"])):e.createCommentVNode("",!0)]),_:2},1024))),128))])]))}});exports._sfc_main=r;

package/dist/{PaymentIntegrationForm-Cl5ua8v8.js → PaymentIntegrationForm-D1oJA9mC.js}

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-DifRn1ok.js");exports.default=e._sfc_main;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-D5bxFJ-p.js");exports.default=e._sfc_main;

package/dist/{PaymentIntegrationForm-ID4QnvA3.mjs → PaymentIntegrationForm-DNkjhqMF.mjs}

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "./PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-CVWPT3Ni.mjs";
+import { _ as _sfc_main } from "./PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-D37gDtY7.mjs";
 export {
   _sfc_main as default
 };

package/dist/{PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-CVWPT3Ni.mjs → PaymentIntegrationForm.vue_vue_type_script_setup_true_lang-D37gDtY7.mjs}

@@ -1,10 +1,9 @@
 import { defineComponent, computed, openBlock, createBlock, withCtx, unref, createVNode, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, inject, ref, onMounted, onBeforeUnmount, watch, createElementBlock, Fragment, renderList } from "vue";
-import { u as useIntl, _ as _sfc_main$5, t as _sfc_main$6, v as formatAmount, e as _sfc_main$7, Q as _sfc_main$8 } from "./vendor-ui-BwxuPDg8.mjs";
-import { i as isEqual } from "./useService-BuWWE5ND.mjs";
-import { _ as _sfc_main$4, l as loadAdyen, g as getQueryParam, t as transformToAdyenAmount, m as mapAdyenPaymentMethods, a as getAdyenEnvironmentFromPaymentMethodOptionsResponse, b as getAdyenClientKeyFromPaymentMethodOptionsResponse, R as REDIRECT_RESULT_QUERY_STRING, P as PAYMENT_ACCEPTOR_ID_QUERY_STRING, c as transformObjectToAdyenObject, d as createReturnUrl } from "./adyenLoader-gsbzSjYV.mjs";
-import { c as createPaymentsService } from "./payments-C5fD1PXB.mjs";
-import { c as createPaymentMethodsService } from "./paymentMethods-Di32oJ39.mjs";
-import { E as EXPERIMENTAL_FEATURE_INJECTION_KEY, a as useLogger } from "./component-CM9g6tbD.mjs";
+import { u as useIntl, _ as _sfc_main$5, l as _sfc_main$6, x as formatAmount, e as _sfc_main$7, k as isEqual, R as _sfc_main$8 } from "./vendor-ui-C0K3osvz.mjs";
+import { _ as _sfc_main$4, g as getQueryParam, t as transformToAdyenAmount, m as mapAdyenPaymentMethods, a as getAdyenEnvironmentFromPaymentMethodOptionsResponse, b as getAdyenClientKeyFromPaymentMethodOptionsResponse, R as REDIRECT_RESULT_QUERY_STRING, P as PAYMENT_ACCEPTOR_ID_QUERY_STRING, c as transformObjectToAdyenObject, d as createReturnUrl } from "./adyen-Bwewy3HC.mjs";
+import { c as createPaymentsService } from "./payments-Dq6R37Fz.mjs";
+import { c as createPaymentMethodsService } from "./paymentMethods-67b3UlTZ.mjs";
+import { E as EXPERIMENTAL_FEATURE_INJECTION_KEY, a as useLogger } from "./component-Djrf1L-Z.mjs";
 const getOverriddenTranslations = (variant) => {
   let result = {};
   if (variant === "TOKENIZE") {
@@ -331,7 +330,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       try {
         dropInInstance == null ? void 0 : dropInInstance.submit();
       } catch (error) {
-        console.error(error);
+        logger.error("ADYEN_SUBMIT_FAILED", "Failed to submit Adyen drop-in", {}, error);
       }
     }
     async function getConfiguration() {
@@ -347,7 +346,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             props.paymentMethodOptionResponseEntry
           ),
           environment: getAdyenEnvironmentFromPaymentMethodOptionsResponse(
-            props.paymentMethodOptionResponseEntry
+            props.paymentMethodOptionResponseEntry,
+            logger
           ),
           locale,
           translations: getOverriddenTranslations(props.variant),
@@ -387,15 +387,58 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (!dropInContainerRef.value) return;
       try {
         await unmountDropIn();
-        const [adyenModule, { default: adyenCss }] = await Promise.all([
-          loadAdyen(),
-          import("./adyen-51SvcyqV.mjs")
+        const [adyenModule, { default: adyenCssUrl }] = await Promise.all([
+          import("./index-DyvRdSR7.mjs"),
+          import("./adyen-B_QrYdaC.mjs")
         ]);
-        const { AdyenCheckout, Dropin } = adyenModule;
+        const {
+          AdyenCheckout,
+          Dropin,
+          Card,
+          Bancontact,
+          Ach,
+          AmazonPay,
+          ApplePay,
+          BcmcMobile,
+          BacsDirectDebit,
+          CashAppPay,
+          EPS,
+          GooglePay,
+          Klarna,
+          PayByBank,
+          PayPal,
+          SepaDirectDebit,
+          Trustly,
+          Twint,
+          PayByBankUS,
+          Redirect
+        } = adyenModule;
         const { checkoutConfig, dropInConfig } = await getConfiguration();
         checkoutInstance = await AdyenCheckout(checkoutConfig);
-        dropInInstance = new Dropin(checkoutInstance, dropInConfig).mount(dropInContainerRef.value);
-        injectStylesToShadowRoot(adyenCss);
+        dropInInstance = new Dropin(checkoutInstance, {
+          ...dropInConfig,
+          paymentMethodComponents: [
+            Card,
+            Bancontact,
+            Ach,
+            AmazonPay,
+            ApplePay,
+            BcmcMobile,
+            BacsDirectDebit,
+            CashAppPay,
+            EPS,
+            GooglePay,
+            Klarna,
+            PayByBank,
+            PayPal,
+            SepaDirectDebit,
+            Trustly,
+            Twint,
+            PayByBankUS,
+            Redirect
+          ]
+        }).mount(dropInContainerRef.value);
+        injectStylesToShadowRoot(adyenCssUrl);
       } catch (error) {
         logger.error(
           "PAYMENT_INTEGRATION_INITIALIZATION_FAILED",
@@ -413,12 +456,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         dropInContainerRef.value.innerHTML = "";
       }
     }
-    function injectStylesToShadowRoot(adyenCss) {
+    function injectStylesToShadowRoot(adyenCssUrl) {
       var _a;
       const root = (_a = dropInContainerRef.value) == null ? void 0 : _a.getRootNode();
       if (root instanceof ShadowRoot) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = adyenCssUrl;
+        root.appendChild(link);
         const style = document.createElement("style");
-        style.textContent = `${adyenCss}
+        style.textContent = `
             :host {
                 --adyen-sdk-color-background-secondary: transparent;
                 --adyen-sdk-color-background-primary: rgb(243 244 246 / 0.5);
@@ -653,7 +700,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             actions.resolve({ resultCode: "Error" });
           });
         }
-      }).catch(() => {
+      }).catch((error) => {
+        logger.error(
+          "INTEGRATION_ERROR",
+          "Unhandled error in payment submission flow",
+          {},
+          error
+        );
       });
     }
     function handleActionRequiredPaymentAction(response, paymentMethodType) {