@viur/shop-components 0.9.4 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/components/PaymentProviderUnzer.vue

@@ -1,93 +1,108 @@
 <template>
-  <div class="loading-wrapper" v-if="state.loading">
-    <sl-spinner class="loading"></sl-spinner>
-  </div>
-
-  <div class="loading-wrapper" v-if="PaymentCheckIsActive">
-    <sl-spinner class="loading"></sl-spinner>
-    {{ $t('messages.wait_for_payment') }}
-  </div>
-  <div class="form-wrapper">
-      <sl-alert :open="state.hasError" variant="danger">{{state.errorMessage}}</sl-alert>
-      <form class="unzerUI form" novalidate>
-          <template v-if="shopStore.state.order?.['payment_provider'] === 'unzer-card'">
-              <div class="field">
-                  <div id="card-element-id-number" class="unzerInput">
-                      <!-- Card number UI Element is inserted here. -->
-                  </div>
-              </div>
-              <div class="two fields">
-                  <div class="field ten wide">
-                      <div id="card-element-id-expiry" class="unzerInput">
-                          <!-- Card expiry date UI Element is inserted here. -->
-                      </div>
-                  </div>
-                  <div class="field six wide">
-                      <div id="card-element-id-cvc" class="unzerInput">
-                          <!-- Card CVC UI Element is inserted here. -->
-                      </div>
-                  </div>
-              </div>
-          </template>
-
-          <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-paypal'">
-              <sl-alert open variant="danger">{{$t('viur.shop.paypal_client_popup_info')}}</sl-alert>
-              <div id="paypal-element" class="field"></div>
-          </template>
-
-          <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-ideal'">
-              <div id="ideal-element" class="field"></div>
-          </template>
-        <p
-          v-if="!!shopStore.state?.paymentProviderData?.redirectUrl"
-          v-html="$t('viur.shop.payment_link', {url: shopStore.state.paymentProviderData.redirectUrl})"
-        />
-      </form>
-
-        <button :disabled="state.loading" class="unzerUI primary button fluid" @click="submitFormToUnzer">{{ $t('viur.shop.pay') }}</button>
-        <sl-button :disabled="state.loading" variant="danger" @click="cancelPayment">{{ $t('actions.cancel') }}</sl-button>
-  </div>
+    <div class="loading-wrapper" v-if="state.loading">
+        <sl-spinner class="loading"></sl-spinner>
+    </div>
+
+    <div class="loading-wrapper" v-if="PaymentCheckIsActive">
+        <sl-spinner class="loading"></sl-spinner>
+        {{ $t('messages.wait_for_payment') }}
+    </div>
+    <div class="form-wrapper">
+        <sl-alert :open="state.hasError" variant="danger">{{ state.errorMessage }}</sl-alert>
+        <form class="unzerUI form" novalidate>
+            <template v-if="shopStore.state.order?.['payment_provider'] === 'unzer-card'">
+                <div class="field">
+                    <div id="card-element-id-number" class="unzerInput">
+                        <!-- Card number UI Element is inserted here. -->
+                    </div>
+                </div>
+                <div class="two fields">
+                    <div class="field ten wide">
+                        <div id="card-element-id-expiry" class="unzerInput">
+                            <!-- Card expiry date UI Element is inserted here. -->
+                        </div>
+                    </div>
+                    <div class="field six wide">
+                        <div id="card-element-id-cvc" class="unzerInput">
+                            <!-- Card CVC UI Element is inserted here. -->
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-paypal'">
+                <sl-alert open variant="danger">{{ $t('viur.shop.paypal_client_popup_info') }}</sl-alert>
+                <div id="paypal-element" class="field"></div>
+            </template>
+
+            <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-ideal'">
+                <div id="ideal-element" class="field"></div>
+            </template>
+
+            <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-googlepay'">
+                <div id="googlepay-element" class="field"></div>
+            </template>
+            <p
+                v-if="!!shopStore.state?.paymentProviderData?.redirectUrl"
+                v-html="$t('viur.shop.payment_link', {url: shopStore.state.paymentProviderData.redirectUrl})"
+            />
+        </form>
+
+        <button
+            v-if="shopStore.state.order?.['payment_provider'] !== 'unzer-googlepay'"
+            :disabled="state.loading"
+            class="unzerUI primary button fluid"
+            @click="submitFormToUnzer"
+        >{{ $t('viur.shop.pay') }}
+        </button>
+        <sl-button :disabled="state.loading" variant="danger" @click="cancelPayment">
+            {{ $t('actions.cancel') }}
+        </sl-button>
+    </div>
 </template>
 
 <script setup>
-import {computed, onBeforeMount, onMounted, reactive} from 'vue'
-import { useViurShopStore } from '../shop';
-import { useOrder } from '../composables/order';
-import {Request} from '@viur/vue-utils'
-import { useIntervalFn } from '@vueuse/core'
-const shopStore = useViurShopStore()
-const {fetchOrder} = useOrder()
-
-const emits = defineEmits(['cancel'])
-
-const { pause:PaymentCheckPause, resume:PaymentCheckResume, isActive:PaymentCheckIsActive } = useIntervalFn(() => {
-  console.debug('checking ...')
-
-  fetchOrder(shopStore.state.orderKey).then(()=>{
-    if (shopStore.state.order?.['is_paid']){
-      console.debug('Order is paid')
-      shopStore.navigateToTab('complete');
-      PaymentCheckPause();
-    }
-  })
+import {Request} from '@viur/vue-utils';
+import {useIntervalFn} from '@vueuse/core';
+import {computed, onBeforeMount, reactive} from 'vue';
+import {useOrder} from '../composables/order';
+import {useViurShopStore} from '../shop';
 
-}, 2000,{immediate:false})
+const shopStore = useViurShopStore();
+const {fetchOrder} = useOrder();
+
+const emits = defineEmits(['cancel']);
+
+const {pause: PaymentCheckPause, resume: PaymentCheckResume, isActive: PaymentCheckIsActive} = useIntervalFn(() => {
+    console.debug('checking ...');
+
+    fetchOrder(shopStore.state.orderKey).then(() => {
+        if (shopStore.state.order?.['is_paid']) {
+            console.debug('Order is paid');
+            shopStore.navigateToTab('complete');
+            PaymentCheckPause();
+        }
+    });
+
+}, 2000, {immediate: false});
 
 
 const state = reactive({
-    unzer:computed(()=>{
-        if (!shopStore.state.paymentProviderData) return null
-        return new unzer(shopStore.state.paymentProviderData["public_key"], {locale: shopStore.state.locale})
+    unzer: computed(() => {
+        if (!shopStore.state.paymentProviderData) return null;
+        return new unzer(shopStore.state.paymentProviderData['public_key'], {locale: shopStore.state.locale});
     }),
-    paymentHandler:{},
-    loading:false,
-    hasError:false,
-    errorMessage:"Bei der Zahlung ist ein Fehler aufgetreten.",
-    waitPayment:false
-})
-
+    paymentHandler: {},
+    loading: false,
+    hasError: false,
+    errorMessage: null,
+    waitPayment: false,
+});
 
-function initUnzerForm(){
+/**
+ * Initialize the payment type creation with Unzer-UI components
+ */
+function initUnzerForm() {
     //Unzer field definition
     if (shopStore.state.order?.['payment_provider'] === 'unzer-card') {
         const card = state.unzer.Card();
@@ -106,21 +121,20 @@ function initUnzerForm(){
             containerId: 'card-element-id-cvc',
             onlyIframe: false,
         });
-
-        state.paymentHandler['unzer-card'] = card
+        state.paymentHandler['unzer-card'] = card;
     } else if (shopStore.state.order?.['payment_provider'] === 'unzer-paypal') {
         // Creating a PayPal instance
-        const paypal = state.unzer.Paypal()
+        const paypal = state.unzer.Paypal();
         // Rendering input field
         //paypal.create('email', {
         //     containerId: 'paypal-element',
         //});
-        state.paymentHandler['unzer-paypal']= paypal;
+        state.paymentHandler['unzer-paypal'] = paypal;
     } else if (shopStore.state.order?.['payment_provider'] === 'unzer-sofort') {
-        const sofort = state.unzer.Sofort()
+        const sofort = state.unzer.Sofort();
         state.paymentHandler['unzer-sofort'] = sofort;
     } else if (shopStore.state.order?.['payment_provider'] === 'unzer-ideal') {
-        const ideal = state.unzer.Ideal()
+        const ideal = state.unzer.Ideal();
         ideal.create('ideal', {
             containerId: 'ideal-element',
         });
@@ -128,95 +142,176 @@ function initUnzerForm(){
     } else if (shopStore.state.order?.['payment_provider'] === 'unzer-bancontact') {
         const bancontact = state.unzer.Bancontact();
         state.paymentHandler['unzer-bancontact'] = bancontact;
+    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-googlepay') {
+        const googlepayScriptPromise = new Promise((resolve, reject) => {
+            const googlepayScript = document.createElement('script');
+            googlepayScript.setAttribute('src', 'https://pay.google.com/gp/p/js/pay.js');
+            googlepayScript.onload = () => {
+                resolve(googlepayScript);
+            };
+            googlepayScript.onerror = reject;
+            document.head.appendChild(googlepayScript);
+        });
+        const googlepay = state.unzer.Googlepay();
+        state.paymentHandler['unzer-googlepay'] = googlepay;
+        const paymentDataRequestObject = googlepay.initPaymentDataRequestObject({
+            gatewayMerchantId: shopStore.state.paymentProviderData.channel,
+            merchantInfo: {
+                merchantId: shopStore.state.paymentProviderData.merchant_id,
+                merchantName: shopStore.state.paymentProviderData.merchant_name,
+            },
+            transactionInfo: {
+                countryCode: shopStore.state.order.billing_address.dest['country'].toUpperCase(),
+                currencyCode: 'EUR',
+                totalPrice: shopStore.state.order.total.toString(),
+                totalPriceStatus: 'ESTIMATED',  // backend should have the last words
+                // totalPriceStatus: 'FINAL',
+                // checkoutOption: 'COMPLETE_IMMEDIATE_PURCHASE',
+            },
+            // buttonColor: 'white',
+            allowedCardNetworks: shopStore.state.paymentProviderData.brands,
+            allowCreditCards: shopStore.state.paymentProviderData.allow_credit_cards,
+            allowPrepaidCards: shopStore.state.paymentProviderData.allow_prepaid_cards,
+
+            onPaymentAuthorizedCallback: (paymentData) => {
+                PaymentCheckPause();
+                state.loading = true;
+                state.hasError = false;
+
+                return googlepay.createResource(paymentData)
+                    .then(result => {
+                        console.debug(result);
+                        saveType(result.id);
+                        return {status: 'success'};  // Tell Google Pay we could handle it
+                    })
+                    .catch(function (error) {
+                        paymentError(error);
+                        return {  // Tell Google Pay we could NOT handle it
+                            status: 'error',
+                            message: error.customerMessage || error.message || error || 'Unexpected error',
+                        };
+                    });
+            },
+        });
+        console.debug('unzer-googlepay', googlepay, paymentDataRequestObject);
+        // TODO: How can we catch >Uncaught (in promise) AbortError: User closed the Payment Request UI.< ?
+        googlepayScriptPromise.then(() => {
+            // gpay script has been loaded, we can start the payment
+            googlepay.create(
+                {containerId: 'googlepay-element'},
+                paymentDataRequestObject,
+            );
+        });
     } else {
         console.warn(`Unknown payment provider: ${shopStore.state.order?.['payment_provider']}`);
     }
-    state.loading = false
+    state.loading = false;
 }
 
-function paymentError(error){
-  console.error(error)
-  state.loading = false
-  state.hasError = true
+/**
+ * Handle an error
+ *
+ * @param error The error. In best cases an object from unzer
+ *              with a translated (and detailed) description for the customer
+ */
+function paymentError(error) {
+    console.error(error);
+    state.loading = false;
+    state.hasError = true;
+    state.errorMessage = error.customerMessage || error.message || error || 'Error';
 }
 
+/**
+ * Create the payment Type (ressource) on behalf of the Unzer-UI components.
+ *
+ * This function is used by all unzer pyment types, except Google Pay.
+ */
+function submitFormToUnzer() {
+    PaymentCheckPause();
+    state.loading = true;
+    state.hasError = false;
+    state.paymentHandler[shopStore.state.order?.['payment_provider']].createResource().then((result) => {
+        saveType(result.id);
+    }).catch((error) => {
+        paymentError(error);
+    });
+}
 
-function submitFormToUnzer(){
-    PaymentCheckPause()
-    state.loading = true
-    state.hasError = false
-    let paymenttarget = shopStore.state.order?.['payment_provider'].split("-")[1]
-    //send to unzer
-    state.paymentHandler[shopStore.state.order?.['payment_provider']].createResource().then((result)=>{
-        Request.post(`${shopStore.state.shopUrl}/pp_unzer_${paymenttarget}/save_type`, {dataObj:{
+/**
+ * Save type-id on the order
+ *
+ * After the Unzer-UI components have collected the customer data and created the payment Type this function
+ * has to be called to send the type-id to the viur-shop backend and store it.
+ * @param typeId The type-id of the created Type, e.g. ``s-crd-abc123def456``
+ */
+function saveType(typeId) {
+    const paymenttarget = shopStore.state.order?.['payment_provider'].split('-')[1];
+    Request.post(`${shopStore.state.shopUrl}/pp_unzer_${paymenttarget}/save_type`, {
+        dataObj: {
             order_key: shopStore.state.orderKey,
-            type_id: result.id,
-        }}).then(async (resp)=>{
-            let data = await resp.json()
-            shopStore.state.order = data
-
-            shopStore.checkoutOrder().then((resp)=>{
-              state.loading = false
-              state.hasError = false
-              if(shopStore.state.paymentProviderData?.redirectUrl){
-                state.waitPayment = true
-                window.open(shopStore.state.paymentProviderData.redirectUrl,"_blank","popup")
-                PaymentCheckResume()
-              }
-            }).catch(async (error)=>{
-              paymentError(error)
-            })
-
-        }).catch(error => {
-            paymentError(error)
-        })
-    }).catch((error)=> {
-        paymentError(error)
-    })
+            type_id: typeId,
+        },
+    }).then(async (resp) => {
+        shopStore.state.order = await resp.json();
+        shopStore.checkoutOrder().then((resp) => {
+            state.loading = false;
+            state.hasError = false;
+            if (shopStore.state.paymentProviderData?.redirectUrl) {
+                state.waitPayment = true;
+                window.open(shopStore.state.paymentProviderData.redirectUrl, '_blank', 'popup');
+                PaymentCheckResume();
+            }
+        }).catch(async (error) => {
+            paymentError(error);
+        });
+
+    }).catch(error => {
+        paymentError(error);
+    });
 }
 
 
-function cancelPayment(){
-    PaymentCheckPause()
-    emits('cancel')
+function cancelPayment() {
+    PaymentCheckPause();
+    emits('cancel');
 }
 
-onBeforeMount(()=>{
-    state.loading = true
-    if (!shopStore.state.paymentProviderData){
-        shopStore.checkout().then(()=>{
-            initUnzerForm()
-        }).catch((error)=>{
-            console.log(error)
-        })
-    }else{
-      initUnzerForm()
+onBeforeMount(() => {
+    state.loading = true;
+    if (!shopStore.state.paymentProviderData) {
+        shopStore.checkout().then(() => {
+            initUnzerForm();
+        }).catch((error) => {
+            console.log(error);
+        });
+    } else {
+        initUnzerForm();
     }
-})
+});
 
 </script>
 
 <style scoped>
-.loading-wrapper{
-  display:flex;
-  flex-direction: column;
-  align-items: center;
+.loading-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.form-wrapper{
-  display:flex;
-  flex-direction: column;
-  gap:20px;
+.form-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 }
 
-.loading{
-  font-size:3rem;
+.loading {
+    font-size: 3rem;
 }
 </style>
 
 <style>
 /* global style to overwrite UnzerCSS */
 .unzerUI.primary.button, .unzerUI.primary.buttons .button {
-  background-color: var(--ignt-color-primary) !important;
+    background-color: var(--ignt-color-primary) !important;
 }
 </style>

package/src/shop.js

@@ -11,6 +11,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
     const state = reactive({
         //shop module name
         showNodes:false,
+        locale: 'de-DE',
         language:"de",
         moduleName:'shop',
         hostUrl: computed(()=>(import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : window.location.origin)),