Release 6.1.10

src/Resources/app/administration/src/core/service/api/vrpayment-configuration.service.js

@@ -0,0 +1,141 @@
+/* global Shopware */
+
+const ApiService = Shopware.Classes.ApiService;
+
+/**
+ * @class VRPaymentPayment\Core\Api\Config\Controller\ConfigurationController
+ */
+class VRPaymentConfigurationService extends ApiService {
+
+	/**
+	 * VRPaymentConfigurationService constructor
+	 *
+	 * @param httpClient
+	 * @param loginService
+	 * @param apiEndpoint
+	 */
+	constructor(httpClient, loginService, apiEndpoint = 'vrpayment') {
+		super(httpClient, loginService, apiEndpoint);
+	}
+
+	/**
+	 * Register web hooks
+	 *
+	 * @param {String|null} salesChannelId
+	 * @return {*}
+	 */
+	registerWebHooks(salesChannelId = null) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/configuration/register-web-hooks`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+
+	/**
+	 * Test API connection
+	 *
+	 * @param {int|null} spaceId
+	 * @param {int|null} userId
+	 * @param {String|null} applicationId
+	 * @return {*}
+	 */
+	checkApiConnection(spaceId = null, userId = null, applicationId = null) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/configuration/check-api-connection`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				spaceId: spaceId,
+				userId: userId,
+				applicationId: applicationId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+
+	/**
+	 * Set's the default payment method to VRPayment for the given salesChannel id.
+	 *
+	 * @param {String|null} salesChannelId
+	 *
+	 * @returns {Promise}
+	 */
+	setVRPaymentAsSalesChannelPaymentDefault(salesChannelId = null) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/configuration/set-vrpayment-as-sales-channel-payment-default`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+
+	/**
+	 *
+	 * @param salesChannelId
+	 * @return {Promise}
+	 */
+	synchronizePaymentMethodConfiguration(salesChannelId = null) {
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/configuration/synchronize-payment-method-configuration`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+
+	/**
+	 *
+	 * @return {*}
+	 */
+	installOrderDeliveryStates() {
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/configuration/install-order-delivery-states`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+}
+
+export default VRPaymentConfigurationService;

src/Resources/app/administration/src/core/service/api/vrpayment-refund.service.js

@@ -0,0 +1,110 @@
+/* global Shopware */
+
+const ApiService = Shopware.Classes.ApiService;
+
+/**
+ * @class VRPaymentPayment\Core\Api\Transaction\Controller\RefundController
+ */
+class VRPaymentRefundService extends ApiService {
+
+	/**
+	 * VRPaymentRefundService constructor
+	 *
+	 * @param httpClient
+	 * @param loginService
+	 * @param apiEndpoint
+	 */
+	constructor(httpClient, loginService, apiEndpoint = 'vrpayment') {
+		super(httpClient, loginService, apiEndpoint);
+	}
+
+	/**
+	 * Refund a transaction
+	 *
+	 * @param {String} salesChannelId
+	 * @param {int} transactionId
+	 * @param {int} quantity
+	 * @param {int} lineItemId
+	 * @return {*}
+	 */
+	createRefund(salesChannelId, transactionId, quantity, lineItemId) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/refund/create-refund/`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId,
+				transactionId: transactionId,
+				quantity: quantity,
+				lineItemId: lineItemId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+
+	/**
+	 * Refund a transaction
+	 *
+	 * @param {String} salesChannelId
+	 * @param {int} transactionId
+	 * @param {float} refundableAmount
+	 * @return {*}
+	 */
+	createRefundByAmount(salesChannelId, transactionId, refundableAmount) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/refund/create-refund-by-amount/`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId,
+				transactionId: transactionId,
+				refundableAmount: refundableAmount
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+
+	/**
+	 * Refund a transaction
+	 *
+	 * @param {String} salesChannelId
+	 * @param {int} transactionId
+	 * @param {float} refundableAmount
+	 * @param {String} lineItemId
+	 * @return {*}
+	 */
+	createPartialRefund(salesChannelId, transactionId, refundableAmount, lineItemId) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/refund/create-partial-refund/`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId,
+				transactionId: transactionId,
+				refundableAmount: refundableAmount,
+				lineItemId: lineItemId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+}
+
+export default VRPaymentRefundService;

src/Resources/app/administration/src/core/service/api/vrpayment-transaction-completion.service.js

@@ -0,0 +1,48 @@
+/* global Shopware */
+
+const ApiService = Shopware.Classes.ApiService;
+
+/**
+ * @class VRPaymentPayment\Core\Api\Transaction\Controller\TransactionCompletionController
+ */
+class VRPaymentTransactionCompletionService extends ApiService {
+
+	/**
+	 * VRPaymentTransactionCompletionService constructor
+	 *
+	 * @param httpClient
+	 * @param loginService
+	 * @param apiEndpoint
+	 */
+	constructor(httpClient, loginService, apiEndpoint = 'vrpayment') {
+		super(httpClient, loginService, apiEndpoint);
+	}
+
+	/**
+	 * Complete a transaction
+	 *
+	 * @param {String} salesChannelId
+	 * @param {int} transactionId
+	 * @return {*}
+	 */
+	createTransactionCompletion(salesChannelId, transactionId) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/transaction-completion/create-transaction-completion/`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId,
+				transactionId: transactionId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+}
+
+export default VRPaymentTransactionCompletionService;

src/Resources/app/administration/src/core/service/api/vrpayment-transaction-void.service.js

@@ -0,0 +1,48 @@
+/* global Shopware */
+
+const ApiService = Shopware.Classes.ApiService;
+
+/**
+ * @class VRPaymentPayment\Core\Api\Transaction\Controller\TransactionVoidController
+ */
+class VRPaymentTransactionVoidService extends ApiService {
+
+	/**
+	 * VRPaymentTransactionVoidService constructor
+	 *
+	 * @param httpClient
+	 * @param loginService
+	 * @param apiEndpoint
+	 */
+	constructor(httpClient, loginService, apiEndpoint = 'vrpayment') {
+		super(httpClient, loginService, apiEndpoint);
+	}
+
+	/**
+	 * Void a transaction
+	 *
+	 * @param {String} salesChannelId
+	 * @param {int} transactionId
+	 * @return {*}
+	 */
+	createTransactionVoid(salesChannelId, transactionId) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/transaction-void/create-transaction-void/`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId,
+				transactionId: transactionId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+}
+
+export default VRPaymentTransactionVoidService;

src/Resources/app/administration/src/core/service/api/vrpayment-transaction.service.js

@@ -0,0 +1,71 @@
+/* global Shopware */
+
+const ApiService = Shopware.Classes.ApiService;
+
+/**
+ * @class VRPaymentPayment\Core\Api\Transaction\Controller\TransactionController
+ */
+class VRPaymentTransactionService extends ApiService {
+
+	/**
+	 * VRPaymentTransactionService constructor
+	 *
+	 * @param httpClient
+	 * @param loginService
+	 * @param apiEndpoint
+	 */
+	constructor(httpClient, loginService, apiEndpoint = 'vrpayment') {
+		super(httpClient, loginService, apiEndpoint);
+	}
+
+	/**
+	 * Get transaction data
+	 *
+	 * @param {String} salesChannelId
+	 * @param {int} transactionId
+	 * @return {*}
+	 */
+	getTransactionData(salesChannelId, transactionId) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/transaction/get-transaction-data/`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{
+				salesChannelId: salesChannelId,
+				transactionId: transactionId
+			},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+
+	/**
+	 * Download Invoice Document
+	 *
+	 * @param context
+	 * @param salesChannelId
+	 * @param transactionId
+	 * @return {string}
+	 */
+	getInvoiceDocument(salesChannelId, transactionId) {
+		return `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/transaction/get-invoice-document/${salesChannelId}/${transactionId}`;
+	}
+
+	/**
+	 * Download Packing slip
+	 *
+	 * @param salesChannelId
+	 * @param transactionId
+	 * @return {string}
+	 */
+	getPackingSlip(salesChannelId, transactionId) {
+		return `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/transaction/get-packing-slip/${salesChannelId}/${transactionId}`;
+	}
+}
+
+export default VRPaymentTransactionService;

src/Resources/app/administration/src/core/service/api/vrpayment-webhook-register.service.js

@@ -0,0 +1,44 @@
+/* global Shopware */
+
+const ApiService = Shopware.Classes.ApiService;
+
+/**
+ * @class VRPaymentPayment\Core\Api\WebHooks\Controller\WebHookController
+ */
+class VRPaymentWebHookRegisterService extends ApiService {
+
+	/**
+	 * VRPaymentWebHookRegisterService
+	 *
+	 * @param httpClient
+	 * @param loginService
+	 * @param apiEndpoint
+	 */
+	constructor(httpClient, loginService, apiEndpoint = 'vrpayment') {
+		super(httpClient, loginService, apiEndpoint);
+	}
+
+	/**
+	 * Register a webhook
+	 *
+	 * @param {String|null} salesChannelId
+	 * @return {*}
+	 */
+	registerWebHook(salesChannelId) {
+
+		const headers = this.getBasicHeaders();
+		const apiRoute = `${Shopware.Context.api.apiPath}/_action/${this.getApiBasePath()}/webHook/register/${salesChannelId}`;
+
+		return this.httpClient.post(
+			apiRoute,
+			{},
+			{
+				headers: headers
+			}
+		).then((response) => {
+			return ApiService.handleResponse(response);
+		});
+	}
+}
+
+export default VRPaymentWebHookRegisterService;

src/Resources/app/administration/src/init/api-service.init.js

@@ -0,0 +1,42 @@
+/* global Shopware */
+
+import VRPaymentConfigurationService from '../core/service/api/vrpayment-configuration.service';
+import VRPaymentRefundService from '../core/service/api/vrpayment-refund.service';
+import VRPaymentTransactionService from '../core/service/api/vrpayment-transaction.service';
+import VRPaymentTransactionCompletionService
+	from '../core/service/api/vrpayment-transaction-completion.service';
+import VRPaymentTransactionVoidService
+	from '../core/service/api/vrpayment-transaction-void.service';
+
+
+const {Application} = Shopware;
+
+// noinspection JSUnresolvedFunction
+Application.addServiceProvider('VRPaymentConfigurationService', (container) => {
+	const initContainer = Application.getContainer('init');
+	return new VRPaymentConfigurationService(initContainer.httpClient, container.loginService);
+});
+
+// noinspection JSUnresolvedFunction
+Application.addServiceProvider('VRPaymentRefundService', (container) => {
+	const initContainer = Application.getContainer('init');
+	return new VRPaymentRefundService(initContainer.httpClient, container.loginService);
+});
+
+// noinspection JSUnresolvedFunction
+Application.addServiceProvider('VRPaymentTransactionService', (container) => {
+	const initContainer = Application.getContainer('init');
+	return new VRPaymentTransactionService(initContainer.httpClient, container.loginService);
+});
+
+// noinspection JSUnresolvedFunction
+Application.addServiceProvider('VRPaymentTransactionCompletionService', (container) => {
+	const initContainer = Application.getContainer('init');
+	return new VRPaymentTransactionCompletionService(initContainer.httpClient, container.loginService);
+});
+
+// noinspection JSUnresolvedFunction
+Application.addServiceProvider('VRPaymentTransactionVoidService', (container) => {
+	const initContainer = Application.getContainer('init');
+	return new VRPaymentTransactionVoidService(initContainer.httpClient, container.loginService);
+});

src/Resources/app/administration/src/main.js

@@ -0,0 +1,3 @@
+import './module/vrpayment-order';
+import './module/vrpayment-settings';
+import './init/api-service.init';

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-completion/index.html.twig

@@ -0,0 +1,24 @@
+{% block vrpayment_order_action_completion %}
+<sw-modal variant="small"
+		  :title="$tc(`vrpayment-order.modal.title.capture`)"
+		  @modal-close="$emit('modal-close')">
+
+	{% block vrpayment_order_action_completion_amount %}
+		<sw-checkbox-field
+				:label="$tc('vrpayment-order.captureAction.button.text')"
+				v-model:value="isCompletion">
+        </sw-checkbox-field>
+	{% endblock %}
+
+	{% block vrpayment_order_action_completion_confirm_button %}
+	<template #modal-footer>
+		<sw-button variant="primary"
+				   @click="completion">
+			{{ $tc('vrpayment-order.refundAction.confirmButton.text') }}
+		</sw-button>
+	</template>
+	{% endblock %}
+
+	<sw-loader v-if="isLoading"></sw-loader>
+</sw-modal>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-completion/index.js

@@ -0,0 +1,86 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+
+const {Component, Mixin, Filter, Utils} = Shopware;
+
+Component.register('vrpayment-order-action-completion', {
+
+	template: template,
+
+	inject: ['VRPaymentTransactionCompletionService'],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		transactionData: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			isLoading: true,
+			isCompletion: false
+		};
+	},
+
+	computed: {
+		dateFilter() {
+			return Filter.getByName('date');
+		}
+	},
+
+	created() {
+		this.createdComponent();
+	},
+
+	methods: {
+		createdComponent() {
+			this.isLoading = false;
+		},
+
+		completion() {
+			if (this.isCompletion) {
+				this.isLoading = true;
+				this.VRPaymentTransactionCompletionService.createTransactionCompletion(
+					this.transactionData.transactions[0].metaData.salesChannelId,
+					this.transactionData.transactions[0].id
+				).then(() => {
+					this.createNotificationSuccess({
+						title: this.$tc('vrpayment-order.captureAction.successTitle'),
+						message: this.$tc('vrpayment-order.captureAction.successMessage')
+					});
+					this.isLoading = false;
+					this.$emit('modal-close');
+					this.$nextTick(() => {
+						this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+					});
+				}).catch((errorResponse) => {
+					try {
+						this.createNotificationError({
+							title: errorResponse.response.data.errors[0].title,
+							message: errorResponse.response.data.errors[0].detail,
+							autoClose: false
+						});
+					} catch (e) {
+						this.createNotificationError({
+							title: errorResponse.title,
+							message: errorResponse.message,
+							autoClose: false
+						});
+					} finally {
+						this.isLoading = false;
+						this.$emit('modal-close');
+						this.$nextTick(() => {
+							this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+						});
+					}
+				});
+			}
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund-by-amount/index.html.twig

@@ -0,0 +1,26 @@
+{% block vrpayment_order_action_refund_by_amount %}
+<sw-modal variant="small"
+		  :title="$tc(`vrpayment-order.modal.title.refund`)"
+		  @modal-close="$emit('modal-close')">
+
+	{% block vrpayment_order_action_refund_amount_by_amount %}
+		<sw-number-field
+		 :max="refundableAmount"
+		 :min="0"
+		 v-model:value="refundAmount"
+		 :label="$tc('vrpayment-order.refund.refundAmount.label')"
+		 :suffix="currency">
+		</sw-number-field>
+	{% endblock %}
+
+	{% block vrpayment_order_action_refund_confirm_button_by_amount %}
+	<template #modal-footer>
+		<sw-button variant="primary" @click="refundByAmount()">
+			{{ $tc('vrpayment-order.refundAction.confirmButton.text') }}
+		</sw-button>
+	</template>
+	{% endblock %}
+
+	<sw-loader v-if="isLoading"></sw-loader>
+</sw-modal>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund-by-amount/index.js

@@ -0,0 +1,94 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+
+const {Component, Mixin, Filter, Utils} = Shopware;
+
+Component.register('vrpayment-order-action-refund-by-amount', {
+	template,
+
+	inject: ['VRPaymentRefundService'],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		transactionData: {
+			type: Object,
+			required: true
+		},
+
+		orderId: {
+			type: String,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			isLoading: true,
+			currency: this.transactionData.transactions[0].currency,
+			refundAmount: 0,
+			refundableAmount: 0,
+		};
+	},
+
+	computed: {
+		dateFilter() {
+			return Filter.getByName('date');
+		}
+	},
+
+	created() {
+		this.createdComponent();
+	},
+
+	methods: {
+		createdComponent() {
+			this.isLoading = false;
+			this.currency = this.transactionData.transactions[0].currency;
+			this.refundAmount = Number(this.transactionData.transactions[0].amountIncludingTax);
+			this.refundableAmount = Number(this.transactionData.transactions[0].amountIncludingTax);
+		},
+
+		refundByAmount() {
+			this.isLoading = true;
+			this.VRPaymentRefundService.createRefundByAmount(
+				this.transactionData.transactions[0].metaData.salesChannelId,
+				this.transactionData.transactions[0].id,
+				this.refundAmount
+			).then(() => {
+				this.createNotificationSuccess({
+					title: this.$tc('vrpayment-order.refundAction.successTitle'),
+					message: this.$tc('vrpayment-order.refundAction.successMessage')
+				});
+				this.isLoading = false;
+				this.$emit('modal-close');
+				this.$nextTick(() => {
+					this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+				});
+			}).catch((errorResponse) => {
+				try {
+					this.createNotificationError({
+						title: errorResponse.response.data.errors[0].title,
+						message: errorResponse.response.data.errors[0].detail,
+						autoClose: false
+					});
+				} catch (e) {
+					this.createNotificationError({
+						title: errorResponse.title,
+						message: errorResponse.message,
+						autoClose: false
+					});
+				} finally {
+					this.isLoading = false;
+					this.$emit('modal-close');
+					this.$nextTick(() => {
+						this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+					});
+				}
+			});
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund-partial/index.html.twig

@@ -0,0 +1,31 @@
+{% block vrpayment_order_action_refund_partial %}
+<sw-modal variant="small"
+		  :title="$tc(`vrpayment-order.modal.title.refund`)"
+		  @modal-close="$emit('modal-close')">
+
+	{% block vrpayment_order_action_refund_amount_partial %}
+		<sw-number-field
+		 :max="this.$parent.$parent.itemRefundableAmount"
+		 :min="0.00"
+		 v-model:value="refundAmount"
+		 :label="$tc('vrpayment-order.refund.refundAmount.label')"
+		 :suffix="currency">
+		</sw-number-field>
+
+		<div>
+			{{ $tc('vrpayment-order.refundAction.maxAvailableAmountToRefund') }}:
+			<b>{{ this.$parent.$parent.itemRefundableAmount }}</b>
+		</div>
+	{% endblock %}
+
+	{% block vrpayment_order_action_refund_confirm_button_partial %}
+	<template #modal-footer>
+		<sw-button variant="primary" @click="createPartialRefund(this.$parent.$parent.currentLineItem)">
+			{{ $tc('vrpayment-order.refundAction.confirmButton.text') }}
+		</sw-button>
+	</template>
+	{% endblock %}
+
+	<sw-loader v-if="isLoading"></sw-loader>
+</sw-modal>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund-partial/index.js

@@ -0,0 +1,101 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+
+const {Component, Mixin, Filter, Utils} = Shopware;
+
+Component.register('vrpayment-order-action-refund-partial', {
+	template,
+
+	inject: ['VRPaymentRefundService'],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		transactionData: {
+			type: Object,
+			required: true
+		},
+
+		orderId: {
+			type: String,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			isLoading: true,
+			currency: this.transactionData.transactions[0].currency,
+			refundAmount: 0.00,
+		};
+	},
+
+	computed: {
+		dateFilter() {
+			return Filter.getByName('date');
+		}
+	},
+
+	created() {
+		this.createdComponent();
+	},
+
+	methods: {
+        createdComponent() {
+            this.isLoading = false;
+            this.currency = this.transactionData.transactions[0].currency;
+            this.refundAmount = this.$parent.$parent.itemRefundableAmount;
+        },
+
+		createPartialRefund(itemUniqueId) {
+			this.isLoading = true;
+			this.VRPaymentRefundService.createPartialRefund(
+				this.transactionData.transactions[0].metaData.salesChannelId,
+				this.transactionData.transactions[0].id,
+				this.refundAmount,
+				itemUniqueId
+			).then(() => {
+				this.createNotificationSuccess({
+					title: this.$tc('vrpayment-order.refundAction.successTitle'),
+					message: this.$tc('vrpayment-order.refundAction.successMessage')
+				});
+				this.isLoading = false;
+				this.$emit('modal-close');
+				this.$nextTick(() => {
+					this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+				});
+			}).catch((errorResponse) => {
+				try {
+					this.createNotificationError({
+						title: errorResponse.response.data.errors[0].title,
+						message: errorResponse.response.data.errors[0].detail,
+						autoClose: false
+					});
+				} catch (e) {
+					this.createNotificationError({
+						title: errorResponse.title,
+						message: errorResponse.message,
+						autoClose: false
+					});
+				} finally {
+					this.isLoading = false;
+					this.$emit('modal-close');
+					this.$nextTick(() => {
+						this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+					});
+				}
+			});
+		}
+	},
+
+    watch: {
+        refundAmount(newValue) {
+            if (newValue !== null) {
+                this.refundAmount = Math.round(newValue * 100) / 100;
+            }
+        }
+    }
+});

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund-selected/index.html.twig

@@ -0,0 +1,16 @@
+{% block vrpayment_order_action_refund_selected %}
+<sw-modal variant="small"
+		  :title="$tc(`vrpayment-order.modal.title.refund`)"
+		  @modal-close="$emit('modal-close')">
+
+	{% block vrpayment_order_action_refund_confirm_button_selected %}
+	<template #modal-footer>
+		<sw-button variant="primary" @click="refundSelected()">
+			{{ $tc('vrpayment-order.refundAction.confirmButton.text') }}
+		</sw-button>
+	</template>
+	{% endblock %}
+
+	<sw-loader v-if="isLoading"></sw-loader>
+</sw-modal>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund-selected/index.js

@@ -0,0 +1,94 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+
+const {Component, Mixin, Filter, Utils} = Shopware;
+
+Component.register('vrpayment-order-action-refund-selected', {
+	template,
+
+	inject: ['VRPaymentRefundService'],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		transactionData: {
+			type: Object,
+			required: true
+		},
+
+		orderId: {
+			type: String,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			isLoading: true,
+			currency: this.transactionData.transactions[0].currency,
+			refundAmount: 0,
+			refundableAmount: 0,
+		};
+	},
+
+	computed: {
+		dateFilter() {
+			return Filter.getByName('date');
+		}
+	},
+
+	created() {
+		this.createdComponent();
+	},
+
+	methods: {
+		createdComponent() {
+			this.isLoading = false;
+			this.currency = this.transactionData.transactions[0].currency;
+			this.refundAmount = Number(this.transactionData.transactions[0].amountIncludingTax);
+			this.refundableAmount = Number(this.transactionData.transactions[0].amountIncludingTax);
+		},
+
+		refundSelected() {
+			this.isLoading = true;
+			this.VRPaymentRefundService.createRefundByAmount(
+				this.transactionData.transactions[0].metaData.salesChannelId,
+				this.transactionData.transactions[0].id,
+				this.refundAmount
+			).then(() => {
+				this.createNotificationSuccess({
+					title: this.$tc('vrpayment-order.refundAction.successTitle'),
+					message: this.$tc('vrpayment-order.refundAction.successMessage')
+				});
+				this.isLoading = false;
+				this.$emit('modal-close');
+				this.$nextTick(() => {
+					this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+				});
+			}).catch((errorResponse) => {
+				try {
+					this.createNotificationError({
+						title: errorResponse.response.data.errors[0].title,
+						message: errorResponse.response.data.errors[0].detail,
+						autoClose: false
+					});
+				} catch (e) {
+					this.createNotificationError({
+						title: errorResponse.title,
+						message: errorResponse.message,
+						autoClose: false
+					});
+				} finally {
+					this.isLoading = false;
+					this.$emit('modal-close');
+					this.$nextTick(() => {
+						this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+					});
+				}
+			});
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund/index.html.twig

@@ -0,0 +1,31 @@
+{% block vrpayment_order_action_refund %}
+<sw-modal variant="small"
+		  :title="$tc(`vrpayment-order.modal.title.refund`)"
+		  @modal-close="$emit('modal-close')">
+
+	{% block vrpayment_order_action_refund_amount %}
+
+		<sw-number-field
+			:max="this.$parent.$parent.itemRefundableQuantity"
+			:min="0"
+			 v-model:value="refundQuantity"
+			 :label="$tc('vrpayment-order.refund.refundQuantity.label')">
+		</sw-number-field>
+
+		<div>
+			{{ $tc('vrpayment-order.refundAction.maxAvailableItemsToRefund') }}:
+			<b>{{ this.$parent.$parent.itemRefundableQuantity }}</b>
+		</div>
+	{% endblock %}
+
+	{% block vrpayment_order_action_refund_confirm_button %}
+	<template #modal-footer>
+		<sw-button variant="primary" @click="refund()">
+			{{ $tc('vrpayment-order.refundAction.confirmButton.text') }}
+		</sw-button>
+	</template>
+	{% endblock %}
+
+	<sw-loader v-if="isLoading"></sw-loader>
+</sw-modal>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-refund/index.js

@@ -0,0 +1,92 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+
+const {Component, Mixin, Filter, Utils} = Shopware;
+
+Component.register('vrpayment-order-action-refund', {
+	template,
+
+	inject: ['VRPaymentRefundService'],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		transactionData: {
+			type: Object,
+			required: true
+		},
+
+		orderId: {
+			type: String,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			refundQuantity: 0,
+			isLoading: true,
+			currentLineItem: '',
+		};
+	},
+
+	computed: {
+		dateFilter() {
+			return Filter.getByName('date');
+		}
+	},
+
+	created() {
+		this.createdComponent();
+	},
+
+	methods: {
+		createdComponent() {
+			this.isLoading = false;
+			this.refundQuantity = 1;
+		},
+
+		refund() {
+			this.isLoading = true;
+			this.VRPaymentRefundService.createRefund(
+				this.transactionData.transactions[0].metaData.salesChannelId,
+				this.transactionData.transactions[0].id,
+				this.refundQuantity,
+				this.$parent.$parent.currentLineItem
+			).then(() => {
+				this.createNotificationSuccess({
+					title: this.$tc('vrpayment-order.refundAction.successTitle'),
+					message: this.$tc('vrpayment-order.refundAction.successMessage')
+				});
+				this.isLoading = false;
+				this.$emit('modal-close');
+				this.$nextTick(() => {
+					this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+				});
+			}).catch((errorResponse) => {
+				try {
+					this.createNotificationError({
+						title: errorResponse.response.data.errors[0].title,
+						message: errorResponse.response.data.errors[0].detail,
+						autoClose: false
+					});
+				} catch (e) {
+					this.createNotificationError({
+						title: errorResponse.title,
+						message: errorResponse.message,
+						autoClose: false
+					});
+				} finally {
+					this.isLoading = false;
+					this.$emit('modal-close');
+					this.$nextTick(() => {
+						this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+					});
+				}
+			});
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-void/index.html.twig

@@ -0,0 +1,24 @@
+{% block vrpayment_order_action_void %}
+<sw-modal variant="small"
+		  :title="$tc(`vrpayment-order.modal.title.void`)"
+		  @modal-close="$emit('modal-close')">
+
+	{% block vrpayment_order_action_void_amount %}
+		<sw-checkbox-field
+				:label="$tc('vrpayment-order.voidAction.confirm.message')"
+				v-model:value="isVoid">
+        </sw-checkbox-field>
+	{% endblock %}
+
+	{% block vrpayment_order_action_void_confirm_button %}
+	<template #modal-footer>
+		<sw-button variant="primary"
+				   @click="voidPayment">
+			{{ $tc('vrpayment-order.refundAction.confirmButton.text') }}
+		</sw-button>
+	</template>
+	{% endblock %}
+
+	<sw-loader v-if="isLoading"></sw-loader>
+</sw-modal>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/component/vrpayment-order-action-void/index.js

@@ -0,0 +1,138 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+
+const {Component, Mixin, Filter, Utils} = Shopware;
+
+Component.register('vrpayment-order-action-void', {
+	template,
+
+	inject: ['VRPaymentTransactionVoidService'],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		transactionData: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			isLoading: true,
+			isVoid: false
+		};
+	},
+
+	computed: {
+		dateFilter() {
+			return Filter.getByName('date');
+		},
+		lineItemColumns() {
+			return [
+				{
+					property: 'uniqueId',
+					label: this.$tc('vrpayment-order.refund.types.uniqueId'),
+					rawData: false,
+					allowResize: true,
+					primary: true,
+					width: 'auto'
+				},
+				{
+					property: 'name',
+					label: this.$tc('vrpayment-order.refund.types.name'),
+					rawData: true,
+					allowResize: true,
+					sortable: true,
+					width: 'auto'
+				},
+				{
+					property: 'quantity',
+					label: this.$tc('vrpayment-order.refund.types.quantity'),
+					rawData: true,
+					allowResize: true,
+					width: 'auto'
+				},
+				{
+					property: 'amountIncludingTax',
+					label: this.$tc('vrpayment-order.refund.types.amountIncludingTax'),
+					rawData: true,
+					allowResize: true,
+					inlineEdit: 'string',
+					width: 'auto'
+				},
+				{
+					property: 'type',
+					label: this.$tc('vrpayment-order.refund.types.type'),
+					rawData: true,
+					allowResize: true,
+					sortable: true,
+					width: 'auto'
+				},
+				{
+					property: 'taxAmount',
+					label: this.$tc('vrpayment-order.refund.types.taxAmount'),
+					rawData: true,
+					allowResize: true,
+					width: 'auto'
+				}
+			];
+		}
+	},
+
+	created() {
+		this.createdComponent();
+	},
+
+	methods: {
+		createdComponent() {
+			this.isLoading = false;
+			this.currency = this.transactionData.transactions[0].currency;
+			this.refundableAmount = this.transactionData.transactions[0].amountIncludingTax;
+			this.refundAmount = this.transactionData.transactions[0].amountIncludingTax;
+		},
+
+		voidPayment() {
+			if (this.isVoid) {
+				this.isLoading = true;
+				this.VRPaymentTransactionVoidService.createTransactionVoid(
+					this.transactionData.transactions[0].metaData.salesChannelId,
+					this.transactionData.transactions[0].id
+				).then(() => {
+					this.createNotificationSuccess({
+						title: this.$tc('vrpayment-order.voidAction.successTitle'),
+						message: this.$tc('vrpayment-order.voidAction.successMessage')
+					});
+					this.isLoading = false;
+					this.$emit('modal-close');
+					this.$nextTick(() => {
+						this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+					});
+				}).catch((errorResponse) => {
+					try {
+						this.createNotificationError({
+							title: errorResponse.response.data.errors[0].title,
+							message: errorResponse.response.data.errors[0].detail,
+							autoClose: false
+						});
+					} catch (e) {
+						this.createNotificationError({
+							title: errorResponse.title,
+							message: errorResponse.message,
+							autoClose: false
+						});
+					} finally {
+						this.isLoading = false;
+						this.$emit('modal-close');
+						this.$nextTick(() => {
+							this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+						});
+					}
+				});
+			}
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/extension/sw-order/index.js

@@ -0,0 +1,75 @@
+/* global Shopware */
+
+import template from './sw-order.html.twig';
+import './sw-order.scss';
+
+const {Component, Context} = Shopware;
+const Criteria = Shopware.Data.Criteria;
+
+const vrpaymentFormattedHandlerIdentifier = 'handler_vrpaymentpayment_vrpaymentpaymenthandler';
+
+Component.override('sw-order-detail', {
+	template,
+
+	data() {
+		return {
+			isVRPaymentPayment: false
+		};
+	},
+
+	computed: {
+		isEditable() {
+			return !this.isVRPaymentPayment || this.$route.name !== 'vrpayment.order.detail';
+		},
+		showTabs() {
+			return true;
+		}
+	},
+
+	watch: {
+		orderId: {
+			deep: true,
+			handler() {
+				if (!this.orderId) {
+					this.setIsVRPaymentPayment(null);
+					return;
+				}
+
+				const orderRepository = this.repositoryFactory.create('order');
+				const orderCriteria = new Criteria(1, 1);
+				orderCriteria.addAssociation('transactions');
+
+				orderRepository.get(this.orderId, Context.api, orderCriteria).then((order) => {
+					if (
+						(order.amountTotal <= 0) ||
+						(order.transactions.length <= 0) ||
+						!order.transactions[0].paymentMethodId
+					) {
+						this.setIsVRPaymentPayment(null);
+						return;
+					}
+
+					const paymentMethodId = order.transactions[0].paymentMethodId;
+					if (paymentMethodId !== undefined && paymentMethodId !== null) {
+						this.setIsVRPaymentPayment(paymentMethodId);
+					}
+				});
+			},
+			immediate: true
+		}
+	},
+
+	methods: {
+		setIsVRPaymentPayment(paymentMethodId) {
+			if (!paymentMethodId) {
+				return;
+			}
+			const paymentMethodRepository = this.repositoryFactory.create('payment_method');
+			paymentMethodRepository.get(paymentMethodId, Context.api).then(
+				(paymentMethod) => {
+					this.isVRPaymentPayment = (paymentMethod.formattedHandlerIdentifier === vrpaymentFormattedHandlerIdentifier);
+				}
+			);
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/extension/sw-order/sw-order.html.twig

@@ -0,0 +1,15 @@
+{% block sw_order_detail_content_tabs_general %}
+    {% parent %}
+
+<sw-tabs-item v-if="isVRPaymentPayment"
+			  :route="{ name: 'vrpayment.order.detail', params: { id: $route.params.id } }"
+			  :title="$tc('vrpayment-order.header')">
+	{{ $tc('vrpayment-order.header') }}
+</sw-tabs-item>
+{% endblock %}
+
+{% block sw_order_detail_actions_slot_smart_bar_actions %}
+<template v-if="isEditable">
+	{% parent %}
+</template>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/extension/sw-order/sw-order.scss

@@ -0,0 +1,11 @@
+.sw-order-detail {
+  .sw-tabs {
+	margin-top: 40px;
+  }
+
+  .sw-order-detail-base .sw-card-view__content {
+	overflow-x: visible;
+	overflow-y: visible;
+  }
+
+}

src/Resources/app/administration/src/module/vrpayment-order/index.js

@@ -0,0 +1,40 @@
+/* global Shopware */
+
+import './extension/sw-order';
+import './page/vrpayment-order-detail';
+
+import deDE from './snippet/de-DE.json';
+import enGB from './snippet/en-GB.json';
+import frFR from './snippet/fr-FR.json';
+import itIT from './snippet/it-IT.json';
+
+const {Module} = Shopware;
+
+Module.register('vrpayment-order', {
+	type: 'plugin',
+	name: 'VRPayment',
+	title: 'vrpayment-order.general.title',
+	description: 'vrpayment-order.general.descriptionTextModule',
+	version: '1.0.1',
+	targetVersion: '1.0.1',
+	color: '#2b52ff',
+
+	snippets: {
+		'de-DE': deDE,
+		'en-GB': enGB,
+		'fr-FR': frFR,
+		'it-IT': itIT
+	},
+
+	routeMiddleware(next, currentRoute) {
+		if (currentRoute.name === 'sw.order.detail') {
+			currentRoute.children.push({
+				component: 'vrpayment-order-detail',
+				name: 'vrpayment.order.detail',
+				isChildren: true,
+				path: '/sw/order/vrpayment/detail/:id'
+			});
+		}
+		next(currentRoute);
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/page/vrpayment-order-detail/index.html.twig

@@ -0,0 +1,200 @@
+{% block vrpayment_order_detail %}
+<div class="vrpayment-order-detail">
+	<div v-if="!isLoading">
+		<sw-card :title="$tc('vrpayment-order.paymentDetails.cardTitle')">
+			<template #grid>
+				{% block vrpayment_order_actions_section %}
+				<sw-card-section secondary slim>
+					{% block vrpayment_order_transaction_refunds_action_button %}
+						<sw-button
+								variant="primary"
+								size="small"
+								:disabled="transaction.state != 'FULFILL' || refundableAmount <= 0"
+								@click="spawnModal('refundByAmount')">
+							{{ $tc('vrpayment-order.buttons.label.refund') }}
+						</sw-button>
+					{% endblock %}
+					{% block vrpayment_order_transaction_completion_action_button %}
+					<sw-button
+							variant="primary"
+							size="small"
+							:disabled="transaction.state != 'AUTHORIZED' || isLoading"
+							@click="spawnModal('completion')">
+						{{ $tc('vrpayment-order.buttons.label.completion') }}
+					</sw-button>
+					{% endblock %}
+					{% block vrpayment_order_transaction_void_action_button %}
+					<sw-button
+							variant="primary"
+							size="small"
+							:disabled="transaction.state != 'AUTHORIZED' || isLoading"
+							@click="spawnModal('void')">
+						{{ $tc('vrpayment-order.buttons.label.void') }}
+					</sw-button>
+					{% endblock %}
+					{% block vrpayment_order_transaction_download_invoice_action_button %}
+					<sw-button
+							variant="primary"
+							size="small"
+							:disabled="transaction.state != 'FULFILL'"
+							@click="downloadInvoice()">
+						{{ $tc('vrpayment-order.buttons.label.download-invoice') }}
+					</sw-button>
+					{% endblock %}
+					{% block vrpayment_order_transaction_download_packing_slip_action_button %}
+					<sw-button
+							variant="primary"
+							size="small"
+							:disabled="transaction.state != 'FULFILL'"
+							@click="downloadPackingSlip()">
+						{{ $tc('vrpayment-order.buttons.label.download-packing-slip') }}
+					</sw-button>
+					{% endblock %}
+				</sw-card-section>
+				{% endblock %}
+			</template>
+		</sw-card>
+		{% block vrpayment_order_transaction_history_card %}
+		<sw-card :title="$tc('vrpayment-order.transactionHistory.cardTitle')">
+			<template #grid>
+
+				{% block vrpayment_order_transaction_history_grid %}
+				<sw-data-grid :dataSource="transactionData.transactions"
+							  :columns="relatedResourceColumns"
+							  :showActions="true"
+							  :showSelection="false">
+
+					<template #actions="{ item }">
+						<sw-context-menu-item v-if="item.customerId">{{ $tc('vrpayment-order.transactionHistory.customerId') }}: {{ item.customerId }}</sw-context-menu-item>
+						<sw-context-menu-item v-if="item.customerName">{{ $tc('vrpayment-order.transactionHistory.customerName') }}: {{ item.customerName }}</sw-context-menu-item>
+						<sw-context-menu-item v-if="item.creditCardHolder">{{ $tc('vrpayment-order.transactionHistory.creditCardHolder') }}: {{ item.creditCardHolder }}</sw-context-menu-item>
+						<sw-context-menu-item v-if="item.paymentMethodName">{{ $tc('vrpayment-order.transactionHistory.paymentMethod') }}: {{ item.paymentMethodName }}</sw-context-menu-item>
+						<sw-context-menu-item v-if="item.brandName">{{ $tc('vrpayment-order.transactionHistory.paymentMethodBrand') }}: {{ item.brandName }}</sw-context-menu-item>
+						<sw-context-menu-item v-if="item.pseudoCardNumber">{{ $tc('vrpayment-order.transactionHistory.PseudoCreditCardNumber') }}: {{ item.pseudoCardNumber }}</sw-context-menu-item>
+						<sw-context-menu-item v-if="item.pseudoCardNumber && item.cardExpireMonth && item.cardExpireYear">{{ $tc('vrpayment-order.transactionHistory.CardExpire') }}: {{ item.cardExpireMonth }} / {{ item.cardExpireYear }}</sw-context-menu-item>
+						<sw-context-menu-item v-if="item.payId">PayID: {{ item.payId }}</sw-context-menu-item>
+					</template>
+				</sw-data-grid>
+				{% endblock %}
+			</template>
+
+		</sw-card>
+		{% endblock %}
+		{% block vrpayment_order_transaction_line_items_card %}
+        <sw-card :title="$tc('vrpayment-order.lineItem.cardTitle')">
+            <template #grid>
+
+                {% block vrpayment_order_transaction_line_items_grid %}
+                    <sw-data-grid
+                            :dataSource="lineItems"
+                            :columns="lineItemColumns"
+                            :showActions="true"
+                            :showSelection="true"
+                            :local-mode="false"
+                            :is-record-selectable="isSelectable"
+                            @selection-change="onSelectionChanged"
+                    >
+                    {% block vrpayment_order_transaction_line_items_grid_grid_actions %}
+                        <template #actions="{ item }">
+                            <sw-context-menu-item
+                                    :disabled="transaction.state != 'FULFILL' || item.refundableQuantity != item.quantity || item.refundableAmount == 0 || item.itemRefundedAmount > 0 || item.itemRefundedQuantity > 0"
+                                    @click="lineItemRefund(item.uniqueId)">
+                                {{ $tc('vrpayment-order.buttons.label.refund-whole-line-item') }}
+                            </sw-context-menu-item>
+
+                            <sw-context-menu-item
+                                    :disabled="transaction.state != 'FULFILL' || item.refundableQuantity == 0 || item.refundableAmount == 0 || item.itemRefundedAmount > 0"
+                                    @click="spawnModal('refund', item.uniqueId, item.refundableQuantity)">
+                                {{ $tc('vrpayment-order.buttons.label.refund-line-item-by-quantity') }}
+                            </sw-context-menu-item>
+
+                            <sw-context-menu-item
+                                    :disabled="transaction.state != 'FULFILL' || item.refundableQuantity == 0 || item.refundableAmount == 0 || item.itemRefundedQuantity > 0"
+                                    @click="spawnModal('partialRefund', item.uniqueId, item.refundableQuantity, item.refundableAmount)">
+                                {{ $tc('vrpayment-order.buttons.label.refund-line-item-parial') }}
+                            </sw-context-menu-item>
+                        </template>
+                    {% endblock %}
+                    {% block vrpayment_order_transaction_line_items_grid_bulk_actions %}
+                        <template #bulk>
+                            <a
+                                    class="link link-danger"
+                                    role="link"
+                                    tabindex="0"
+                                    :disabled="selectedItems.length === 0"
+                                    @click="onPerformBulkAction">
+                                {{ $tc('vrpayment-order.buttons.label.refund-line-item-selected') }}
+                            </a>
+                        </template>
+                    {% endblock %}
+
+                    </sw-data-grid>
+                {% endblock %}
+            </template>
+        </sw-card>
+		{% endblock %}
+		{% block vrpayment_order_transaction_refunds_card %}
+		<sw-card :title="$tc('vrpayment-order.refund.cardTitle')" v-if="transactionData.refunds.length > 0">
+			<template #grid>
+
+				{% block vrpayment_order_transaction_refunds_grid %}
+				<sw-data-grid
+						:dataSource="transactionData.refunds"
+						:columns="refundColumns"
+						:showActions="false"
+						:showSelection="false">
+				</sw-data-grid>
+				{% endblock %}
+			</template>
+
+		</sw-card>
+		{% endblock %}
+		{% block vrpayment_order_actions_modal_refund_partial %}
+			<vrpayment-order-action-refund-partial
+					v-if="modalType === 'partialRefund'"
+					:orderId="orderId"
+					:transactionData="transactionData"
+					:lineItems="lineItems"
+					@modal-close="closeModal">
+			</vrpayment-order-action-refund-partial>
+		{% endblock %}
+		{% block vrpayment_order_actions_modal_refund %}
+		<vrpayment-order-action-refund
+				v-if="modalType === 'refund'"
+				:orderId="orderId"
+				:transactionData="transactionData"
+				:lineItems="lineItems"
+				@modal-close="closeModal">
+		</vrpayment-order-action-refund>
+		{% endblock %}
+		{% block vrpayment_order_actions_modal_refund_by_amount %}
+			<vrpayment-order-action-refund-by-amount
+					v-if="modalType === 'refundByAmount'"
+					:orderId="orderId"
+					:transactionData="transactionData"
+					:lineItems="lineItems"
+					@modal-close="closeModal">
+			</vrpayment-order-action-refund-by-amount>
+		{% endblock %}
+		{% block vrpayment_order_actions_modal_completion%}
+		<vrpayment-order-action-completion
+				v-if="modalType === 'completion'"
+				:orderId="orderId"
+				:transactionData="transactionData"
+				:lineItems="lineItems"
+				@modal-close="closeModal">
+		</vrpayment-order-action-completion>
+		{% endblock %}
+		{% block vrpayment_order_actions_modal_void %}
+		<vrpayment-order-action-void
+				v-if="modalType === 'void'"
+				:orderId="orderId"
+				:transactionData="transactionData"
+				:lineItems="lineItems"
+				@modal-close="closeModal">
+		</vrpayment-order-action-void>
+		{% endblock %}
+	</div>
+	<sw-loader v-if="isLoading"></sw-loader>
+</div>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-order/page/vrpayment-order-detail/index.js

@@ -0,0 +1,448 @@
+/* global Shopware */
+
+import '../../component/vrpayment-order-action-completion';
+import '../../component/vrpayment-order-action-refund';
+import '../../component/vrpayment-order-action-refund-partial';
+import '../../component/vrpayment-order-action-refund-by-amount';
+import '../../component/vrpayment-order-action-void';
+import template from './index.html.twig';
+import './index.scss';
+
+const {Component, Mixin, Filter, Context, Utils} = Shopware;
+const Criteria = Shopware.Data.Criteria;
+
+Component.register('vrpayment-order-detail', {
+	template,
+
+	inject: [
+		'VRPaymentTransactionService',
+		'VRPaymentRefundService',
+		'repositoryFactory'
+	],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	data() {
+		return {
+			transactionData: {
+				transactions: [],
+				refunds: []
+			},
+			transaction: {},
+			lineItems: [],
+			refundableQuantity: 0,
+			itemRefundableQuantity: 0,
+			isLoading: true,
+			orderId: '',
+			currency: '',
+			modalType: '',
+			refundAmount: 0.00,
+			refundableAmount: 0.00,
+			itemRefundedAmount: 0.00,
+			itemRefundedQuantity: 0,
+			itemRefundableAmount: 0.00,
+			currentLineItem: '',
+			refundLineItemQuantity: [],
+			refundLineItemAmount: [],
+			selectedItems: []
+		};
+	},
+
+	metaInfo() {
+		return {
+			title: this.$tc('vrpayment-order.header')
+		};
+	},
+
+
+	computed: {
+		dateFilter() {
+			return Filter.getByName('date');
+		},
+
+		relatedResourceColumns() {
+			return [
+				{
+					property: 'paymentMethodName',
+					label: this.$tc('vrpayment-order.transactionHistory.types.payment_method'),
+					rawData: true
+				},
+				{
+					property: 'state',
+					label: this.$tc('vrpayment-order.transactionHistory.types.state'),
+					rawData: true
+				},
+				{
+					property: 'currency',
+					label: this.$tc('vrpayment-order.transactionHistory.types.currency'),
+					rawData: true
+				},
+				{
+					property: 'authorized_amount',
+					label: this.$tc('vrpayment-order.transactionHistory.types.authorized_amount'),
+					rawData: true
+				},
+				{
+					property: 'id',
+					label: this.$tc('vrpayment-order.transactionHistory.types.transaction'),
+					rawData: true
+				},
+				{
+					property: 'customerId',
+					label: this.$tc('vrpayment-order.transactionHistory.types.customer'),
+					rawData: true
+				}
+			];
+		},
+
+		lineItemColumns() {
+			return [
+			    // It must be set in order to have correctly working checkbox mechanism
+				{
+					property: 'id',
+					rawData: true,
+					visible: false,
+					primary: true
+				},
+				{
+					property: 'uniqueId',
+					label: this.$tc('vrpayment-order.lineItem.types.uniqueId'),
+					rawData: true,
+					visible: false,
+					primary: true
+				},
+				{
+					property: 'name',
+					label: this.$tc('vrpayment-order.lineItem.types.name'),
+					rawData: true
+				},
+				{
+					property: 'quantity',
+					label: this.$tc('vrpayment-order.lineItem.types.quantity'),
+					rawData: true
+				},
+				{
+					property: 'amountIncludingTax',
+					label: this.$tc('vrpayment-order.lineItem.types.amountIncludingTax'),
+					rawData: true
+				},
+				{
+					property: 'type',
+					label: this.$tc('vrpayment-order.lineItem.types.type'),
+					rawData: true
+				},
+				{
+					property: 'taxAmount',
+					label: this.$tc('vrpayment-order.lineItem.types.taxAmount'),
+					rawData: true
+				},
+				{
+					property: 'refundableQuantity',
+					rawData: true,
+					visible: false,
+				},
+			];
+		},
+
+		refundColumns() {
+			return [
+				{
+					property: 'id',
+					label: this.$tc('vrpayment-order.refund.types.id'),
+					rawData: true,
+					visible: true,
+					primary: true
+				},
+				{
+					property: 'amount',
+					label: this.$tc('vrpayment-order.refund.types.amount'),
+					rawData: true
+				},
+				{
+					property: 'state',
+					label: this.$tc('vrpayment-order.refund.types.state'),
+					rawData: true
+				},
+				{
+					property: 'createdOn',
+					label: this.$tc('vrpayment-order.refund.types.createdOn'),
+					rawData: true
+				}
+			];
+		}
+	},
+
+	watch: {
+		'$route'() {
+			this.resetDataAttributes();
+			this.createdComponent();
+		}
+	},
+
+	created() {
+		this.createdComponent();
+	},
+
+	methods: {
+		createdComponent() {
+			this.orderId = this.$route.params.id;
+			const orderRepository = this.repositoryFactory.create('order');
+			const orderCriteria = new Criteria(1, 1);
+			orderCriteria.addAssociation('transactions');
+			orderCriteria.getAssociation('transactions').addSorting(Criteria.sort('createdAt', 'DESC'));
+
+			orderRepository.get(this.orderId, Context.api, orderCriteria).then((order) => {
+				this.order = order;
+				this.isLoading = false;
+				var totalAmountTemp = 0;
+				var refundsAmountTemp = 0;
+				const vrpaymentTransactionId = order.transactions[0].customFields.vrpayment_transaction_id;
+				this.VRPaymentTransactionService.getTransactionData(order.salesChannelId, vrpaymentTransactionId)
+					.then((VRPaymentTransaction) => {
+						this.currency = VRPaymentTransaction.transactions[0].currency;
+
+						VRPaymentTransaction.transactions[0].authorized_amount = Utils.format.currency(
+							VRPaymentTransaction.transactions[0].authorizationAmount,
+							this.currency
+						);
+
+						VRPaymentTransaction.refunds.forEach((refund) => {
+							refundsAmountTemp = parseFloat(parseFloat(refundsAmountTemp) + parseFloat(refund.amount));
+							refund.amount = Utils.format.currency(
+								refund.amount,
+								this.currency
+							);
+
+							refund.reductions.forEach((reduction) => {
+							    if (reduction.quantityReduction > 0) {
+                                    if (this.refundLineItemQuantity[reduction.lineItemUniqueId] === undefined) {
+                                        this.refundLineItemQuantity[reduction.lineItemUniqueId] = reduction.quantityReduction;
+                                    } else {
+                                        this.refundLineItemQuantity[reduction.lineItemUniqueId] += reduction.quantityReduction;
+                                    }
+							    }
+                                if (reduction.unitPriceReduction > 0) {
+                                    if (this.refundLineItemAmount[reduction.lineItemUniqueId] === undefined) {
+                                        this.refundLineItemAmount[reduction.lineItemUniqueId] = reduction.unitPriceReduction;
+                                    } else {
+                                        this.refundLineItemAmount[reduction.lineItemUniqueId] += reduction.unitPriceReduction;
+                                    }
+                                }
+							});
+
+						});
+
+						VRPaymentTransaction.transactions[0].lineItems.forEach((lineItem) => {
+							if (!lineItem.id) {
+								lineItem.id = lineItem.uniqueId;
+                            }
+
+                            lineItem.itemRefundedAmount = parseFloat(this.refundLineItemAmount[lineItem.uniqueId] || 0) * parseInt(lineItem.quantity);
+                            lineItem.amountIncludingTax = parseFloat(lineItem.amountIncludingTax) || 0;
+
+                            lineItem.itemRefundedQuantity = parseInt(this.refundLineItemQuantity[lineItem.uniqueId]) || 0;
+                            lineItem.refundableAmount = parseFloat(
+                              (lineItem.amountIncludingTax - lineItem.itemRefundedAmount).toFixed(2)
+                            );
+
+							lineItem.amountIncludingTax = Utils.format.currency(
+								lineItem.amountIncludingTax,
+								this.currency
+							);
+
+							lineItem.taxAmount = Utils.format.currency(
+								lineItem.taxAmount,
+								this.currency
+							);
+
+							totalAmountTemp = parseFloat(parseFloat(totalAmountTemp) + parseFloat(lineItem.unitPriceIncludingTax * lineItem.quantity));
+
+							lineItem.refundableQuantity = parseInt(
+								parseInt(lineItem.quantity) - parseInt(this.refundLineItemQuantity[lineItem.uniqueId] || 0)
+							);
+
+						});
+
+						this.lineItems = VRPaymentTransaction.transactions[0].lineItems;
+						this.transactionData = VRPaymentTransaction;
+						this.transaction = this.transactionData.transactions[0];
+						this.refundAmount = Number(this.transactionData.transactions[0].amountIncludingTax);
+						this.refundableAmount = parseFloat(parseFloat(totalAmountTemp) - parseFloat(refundsAmountTemp));
+
+					}).catch((errorResponse) => {
+					try {
+						this.createNotificationError({
+							title: this.$tc('vrpayment-order.paymentDetails.error.title'),
+							message: errorResponse.message,
+							autoClose: false
+						});
+					} catch (e) {
+						this.createNotificationError({
+							title: this.$tc('vrpayment-order.paymentDetails.error.title'),
+							message: errorResponse.message,
+							autoClose: false
+						});
+					} finally {
+						this.isLoading = false;
+					}
+				});
+			});
+		},
+		downloadPackingSlip() {
+			window.open(
+				this.VRPaymentTransactionService.getPackingSlip(
+					this.transaction.metaData.salesChannelId,
+					this.transaction.id
+				),
+				'_blank'
+			);
+		},
+
+		downloadInvoice() {
+			window.open(
+				this.VRPaymentTransactionService.getInvoiceDocument(
+					this.transaction.metaData.salesChannelId,
+					this.transaction.id
+				),
+				'_blank'
+			);
+		},
+
+		resetDataAttributes() {
+			this.transactionData = {
+				transactions: [],
+				refunds: []
+			};
+			this.lineItems = [];
+			this.refundLineItemQuantity = [];
+			this.refundLineItemAmount = [];
+			this.isLoading = true;
+		},
+
+		spawnModal(modalType, lineItemId, refundableQuantity, itemRefundableAmount) {
+			this.modalType = modalType;
+			this.currentLineItem = lineItemId;
+			this.itemRefundableQuantity = refundableQuantity;
+            this.itemRefundableAmount = !isNaN(itemRefundableAmount) ? Math.round(itemRefundableAmount * 100) / 100 : 0;
+		},
+
+		closeModal() {
+			this.modalType = '';
+		},
+
+		lineItemRefund(lineItemId) {
+			this.isLoading = true;
+			this.VRPaymentRefundService.createRefund(
+				this.transactionData.transactions[0].metaData.salesChannelId,
+				this.transactionData.transactions[0].id,
+				0,
+				lineItemId
+			).then(() => {
+				this.createNotificationSuccess({
+					title: this.$tc('vrpayment-order.refundAction.successTitle'),
+					message: this.$tc('vrpayment-order.refundAction.successMessage')
+				});
+                this.isLoading = false;
+                this.$emit('modal-close');
+                this.$nextTick(() => {
+                    this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+                });
+			}).catch((errorResponse) => {
+				try {
+					this.createNotificationError({
+						title: errorResponse.response.data.errors[0].title,
+						message: errorResponse.response.data.errors[0].detail,
+						autoClose: false
+					});
+				} catch (e) {
+					this.createNotificationError({
+						title: errorResponse.title,
+						message: errorResponse.response.data,
+						autoClose: false
+					});
+				} finally {
+                    this.isLoading = false;
+                    this.$emit('modal-close');
+                    this.$nextTick(() => {
+                        this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+                    });
+				}
+			});
+		},
+		isSelectable(item) {
+			return item.refundableQuantity > 0 && item.refundableAmount > 0 && item.itemRefundedAmount == 0 && item.itemRefundedQuantity == 0;
+		},
+		onSelectionChanged(selection) {
+			this.selectedItems = Object.values(selection);
+		},
+        onPerformBulkAction() {
+            if (this.selectedItems.length) {
+                // Set isLoading to true to show the loader
+                this.isLoading = true;
+
+                // Force the DOM to update before proceeding with the asynchronous operations
+                this.$nextTick(() => {
+                    const refundPromises = this.selectedItems.map((item) => {
+                        return this.lineItemRefundBulk(item.uniqueId); // Simulated refund action with delay
+                    });
+
+                    // Wait for all refund promises to complete
+                    Promise.all(refundPromises)
+                        .then(() => {
+                            // Once all promises are resolved, hide the loader and close the modal
+                            this.isLoading = false;
+                            this.$emit('modal-close');
+                            this.$nextTick(() => {
+                                this.$router.replace(`${this.$route.path}?hash=${Utils.createId()}`);
+                            });
+                        })
+                        .catch((error) => {
+                            // Handle any errors during the refund process
+                            this.createNotificationError({
+                                title: 'Error',
+                                message: 'Something went wrong with the refunds',
+                                autoClose: false
+                            });
+                            this.isLoading = false; // Ensure the loader is hidden even on error
+                        });
+                });
+            }
+        },
+        lineItemRefundBulk(lineItemId) {
+            return new Promise((resolve, reject) => {
+                this.VRPaymentRefundService.createRefund(
+                    this.transactionData.transactions[0].metaData.salesChannelId,
+                    this.transactionData.transactions[0].id,
+                    0,
+                    lineItemId
+                )
+                .then(() => {
+                    this.createNotificationSuccess({
+                        title: this.$tc('vrpayment-order.refundAction.successTitle'),
+                        message: this.$tc('vrpayment-order.refundAction.successMessage')
+                    });
+                    resolve();
+                })
+                .catch((errorResponse) => {
+                    try {
+                        this.createNotificationError({
+                            title: errorResponse.response.data.errors[0].title,
+                            message: errorResponse.response.data.errors[0].detail,
+                            autoClose: false
+                        });
+                    } catch (e) {
+                        this.createNotificationError({
+                            title: errorResponse.title,
+                            message: errorResponse.response.data,
+                            autoClose: false
+                        });
+                    } finally {
+                        reject();
+                    }
+                });
+            });
+        },
+	}
+});

src/Resources/app/administration/src/module/vrpayment-order/page/vrpayment-order-detail/index.scss

@@ -0,0 +1,7 @@
+.vrpayment-order-detail__data {
+  display: grid;
+}
+
+.vrpayment-order-detail__heading {
+  padding-top: 15px;
+}

src/Resources/app/administration/src/module/vrpayment-order/snippet/de-DE.json

@@ -0,0 +1,112 @@
+{
+  "vrpayment-order": {
+	"buttons": {
+	  "label": {
+		"completion": "Abschluss",
+		"download-invoice": "Rechnung herunterladen",
+		"download-packing-slip": "Packzettel herunterladen",
+		"refund": "Eine neue Rückerstattung erstellen",
+		"void": "Genehmigung annullieren",
+	    "refund-whole-line-item": "Gesamte Werbebuchung erstatten",
+	    "refund-line-item-by-quantity": "Rückerstattung nach Menge",
+	    "refund-line-item-selected": "Rückerstattung auswählen",
+	    "refund-line-item-parial": "Teilweise Rückerstattung"
+	  }
+	},
+	"captureAction": {
+	  "button": {
+		"text": "Zahlung erfassen"
+	  },
+	  "currentAmount": "Betrag",
+	  "isFinal": "Dies ist die endgültige Verbuchung",
+	  "maxAmount": "Maximaler Betrag",
+	  "successMessage": "Ihre Verbuchung war erfolgreich",
+	  "successTitle": "Erfolg"
+	},
+	"general": {
+	  "title": "Bestellungen"
+	},
+	"header": "VRPayment Payment",
+	"lineItem": {
+	  "cardTitle": "Einzelposten",
+	  "types": {
+		"amountIncludingTax": "Betrag",
+		"name": "Name",
+		"quantity": "Anzahl",
+		"taxAmount": "Steuern",
+		"type": "Typ",
+		"uniqueId": "Eindeutige ID"
+	  }
+	},
+	"modal": {
+	  "title": {
+		"capture": "Erfassen",
+		"refund": "Neue Gutschrift",
+		"void": "Autorisierung aufheben"
+	  }
+	},
+	"paymentDetails": {
+	  "cardTitle": "Zahlung",
+	  "error": {
+		"title": "Fehler beim Abrufen von Zahlungsdetails von VRPayment"
+	  }
+	},
+	"refund": {
+	  "cardTitle": "Gutschriften",
+	  "refundAmount": {
+		"label": "Gutschriftsbetrag"
+	  },
+	  "refundQuantity": {
+	  	"label": "Refund Menge"
+	  },
+	  "types": {
+		"amount": "Betrag",
+		"createdOn": "Erstellt am",
+		"id": "ID",
+		"state": "Staat"
+	  }
+	},
+	"refundAction": {
+	  "confirmButton": {
+		"text": "Ausführen"
+	  },
+	  "refundAmount": {
+		"label": "Betrag",
+		"placeholder": "Einen Betrag eingeben"
+	  },
+	  "successMessage": "Ihre Rückerstattung war erfolgreich",
+	  "successTitle": "Erfolg",
+	  "maxAvailableItemsToRefund": "Maximal Verfügbare Artikel zum Erstatten",
+	  "maxAvailableAmountToRefund": "Maximal verfügbarer Erstattungsbetrag"
+	},
+	"transactionHistory": {
+	  "cardTitle": "Einzelheiten",
+	  "types": {
+		"authorized_amount": "Autorisierter Betrag",
+		"currency": "Währung",
+		"customer": "Kunde",
+		"payment_method": "Zahlungsweise",
+		"state": "Staat",
+		"transaction": "Transaktion"
+	  },
+	  "customerId": "Customer ID",
+	  "customerName": "Customer Name",
+	  "creditCardHolder": "Kreditkarteninhaber",
+	  "paymentMethod": "Zahlungsart",
+	  "paymentMethodBrand": "Marke der Zahlungsmethode",
+	  "PseudoCreditCardNumber": "Pseudo-Kreditkartennummer",
+	  "CardExpire": "Karte verfällt"
+	},
+	"voidAction": {
+	  "confirm": {
+		"button": {
+		  "cancel": "Nein",
+		  "confirm": "Autorisierung aufheben"
+		},
+		"message": "Wollen Sie diese Zahlung wirklich stornieren?"
+	  },
+	  "successMessage": "Die Zahlung wurde erfolgreich annulliert",
+	  "successTitle": "Erfolg"
+	}
+  }
+}

src/Resources/app/administration/src/module/vrpayment-order/snippet/en-GB.json

@@ -0,0 +1,113 @@
+{
+  "vrpayment-order": {
+	"buttons": {
+	  "label": {
+		"completion": "Complete",
+		"download-invoice": "Download Invoice",
+		"download-packing-slip": "Download Packing Slip",
+		"refund": "Create a new refund",
+		"void": "Cancel authorization",
+	    "refund-whole-line-item": "Refund whole line item",
+	    "refund-line-item-by-quantity": "Refund by quantity",
+	    "refund-line-item-selected": "Rembourser sélectionnés",
+	    "refund-line-item-selected": "Refund selected",
+	    "refund-line-item-parial": "Partial refund"
+	  }
+	},
+	"captureAction": {
+	  "button": {
+		"text": "Capture payment"
+	  },
+	  "currentAmount": "Amount",
+	  "isFinal": "This is final capture",
+	  "maxAmount": "Maximum amount",
+	  "successMessage": "Your capture was successful.",
+	  "successTitle": "Success"
+	},
+	"general": {
+	  "title": "Orders"
+	},
+	"header": "VRPayment Payment",
+	"lineItem": {
+	  "cardTitle": "Line Items",
+	  "types": {
+		"amountIncludingTax": "Amount",
+		"name": "Name",
+		"quantity": "Quantity",
+		"taxAmount": "Taxes",
+		"type": "Type",
+		"uniqueId": "Unique ID"
+	  }
+	},
+	"modal": {
+	  "title": {
+		"capture": "Capture",
+		"refund": "New refund",
+		"void": "Cancel authorization"
+	  }
+	},
+	"paymentDetails": {
+	  "cardTitle": "Payment",
+	  "error": {
+		"title": "Error fetching payment details from VRPayment"
+	  }
+	},
+	"refund": {
+	  "cardTitle": "Refunds",
+	  "refundAmount": {
+		"label": "Refund Amount"
+	  },
+	  "refundQuantity": {
+	  	"label": "Refund Quantity"
+	  },
+	  "types": {
+		"amount": "Amount",
+		"createdOn": "Created On",
+		"id": "ID",
+		"state": "State"
+	  }
+	},
+	"refundAction": {
+	  "confirmButton": {
+		"text": "Execute"
+	  },
+	  "refundAmount": {
+		"label": "Amount",
+		"placeholder": "Enter a amount"
+	  },
+	  "successMessage": "Your refund was successful.",
+	  "successTitle": "Success",
+	  "maxAvailableItemsToRefund": "Maximum available items to refund",
+	  "maxAvailableAmountToRefund": "Maximum available amount to refund"
+	},
+	"transactionHistory": {
+	  "cardTitle": "Details",
+	  "types": {
+		"authorized_amount": "Authorized Amount",
+		"currency": "Currency",
+		"customer": "Customer",
+		"payment_method": "Payment Method",
+		"state": "State",
+		"transaction": "Transaction"
+	  },
+	  "customerId": "Customer ID",
+	  "customerName": "Customer Name",
+	  "creditCardHolder": "Credit Card Holder",
+	  "paymentMethod": "Payment Method",
+	  "paymentMethodBrand": "Payment Method Brand",
+	  "PseudoCreditCardNumber": "Pseudo Credit Card Number",
+	  "CardExpire": "Card Expire"
+	},
+	"voidAction": {
+	  "confirm": {
+		"button": {
+		  "cancel": "No",
+		  "confirm": "Cancel authorization"
+		},
+		"message": "Do you really want to cancel this payment?"
+	  },
+	  "successMessage": "The payment was successfully voided.",
+	  "successTitle": "Success"
+	}
+  }
+}

src/Resources/app/administration/src/module/vrpayment-order/snippet/fr-FR.json

@@ -0,0 +1,112 @@
+{
+  "vrpayment-order": {
+	"buttons": {
+	  "label": {
+		"completion": "Terminée",
+		"download-invoice": "Télécharger la facture",
+		"download-packing-slip": "Télécharger le bordereau d'expédition",
+		"refund": "Créer un nouveau remboursement",
+		"void": "Annulez l'autorisation",
+	    "refund-whole-line-item": "Remboursement de la ligne entière",
+	    "refund-line-item-by-quantity": "Remboursement par quantité",
+	    "refund-line-item-selected": "Rembourser sélectionnés",
+	    "refund-line-item-parial": "Remboursement partiel"
+	  }
+	},
+	"captureAction": {
+	  "button": {
+		"text": "Capture du paiement"
+	  },
+	  "currentAmount": "Montant",
+	  "isFinal": "C'est la capture finale",
+	  "maxAmount": "Montant maximal",
+	  "successMessage": "Votre capture a été réussie.",
+	  "successTitle": "Succès"
+	},
+	"general": {
+	  "title": "Commandes"
+	},
+	"header": "VRPayment Paiement",
+	"lineItem": {
+	  "cardTitle": "Articles de ligne",
+	  "types": {
+		"amountIncludingTax": "Montant",
+		"name": "Nom",
+		"quantity": "Quantité",
+		"taxAmount": "Taxes",
+		"type": "Type",
+		"uniqueId": "ID unique"
+	  }
+	},
+	"modal": {
+	  "title": {
+		"capture": "Capture",
+		"refund": "Nouveau remboursement",
+		"void": "Annulez l'autorisation"
+	  }
+	},
+	"paymentDetails": {
+	  "cardTitle": "Paiement",
+	  "error": {
+		"title": "Erreur dans la récupération des détails du paiement à partir de VRPayment"
+	  }
+	},
+	"refund": {
+	  "cardTitle": "Remboursements",
+	  "refundAmount": {
+		"label": "Montant du remboursement"
+	  },
+	  "refundQuantity": {
+	  	"label": "Quantité à rembourser"
+	  },
+	  "types": {
+		"amount": "Montant",
+		"createdOn": "Créé le",
+		"id": "ID",
+		"state": "État"
+	  }
+	},
+	"refundAction": {
+	  "confirmButton": {
+		"text": "Exécutez"
+	  },
+	  "refundAmount": {
+		"label": "Montant",
+		"placeholder": "Entrez un montant"
+	  },
+	  "successMessage": "Votre remboursement a été effectué avec succès.",
+	  "successTitle": "Succès",
+	  "maxAvailableItemsToRefund": "Nombre maximum d'articles disponibles pour le remboursement",
+	  "maxAvailableAmountToRefund": "Montant maximal disponible pour le remboursement"
+	},
+	"transactionHistory": {
+	  "cardTitle": "Détails",
+	  "types": {
+		"authorized_amount": "Montant autorisé",
+		"currency": "Monnaie",
+		"customer": "Client",
+		"payment_method": "Mode de paiement",
+		"state": "État",
+		"transaction": "Transaction"
+	  },
+	  "customerId": "Customer ID",
+	  "customerName": "Customer Name",
+	  "creditCardHolder": "Titulaire de la carte de crédit",
+	  "paymentMethod": "Mode de paiement",
+	  "paymentMethodBrand": "Marque du mode de paiement",
+	  "PseudoCreditCardNumber": "Pseudo numéro de carte de crédit",
+	  "CardExpire": "La carte expire"
+	},
+	"voidAction": {
+	  "confirm": {
+		"button": {
+		  "cancel": "Non",
+		  "confirm": "Annulez l'autorisation"
+		},
+		"message": "Voulez-vous vraiment annuler ce paiement?"
+	  },
+	  "successMessage": "Le paiement a été annulé avec succès.",
+	  "successTitle": "Succès"
+	}
+  }
+}

src/Resources/app/administration/src/module/vrpayment-order/snippet/it-IT.json

@@ -0,0 +1,112 @@
+{
+  "vrpayment-order": {
+	"buttons": {
+	  "label": {
+		"completion": "Completato",
+		"download-invoice": "Scarica fattura",
+		"download-packing-slip": "Scarica distinta di imballaggio",
+		"refund": "Crea un nuovo rimborso",
+		"void": "Annulla autorizzazione",
+	    "refund-whole-line-item": "Rimborso intera riga",
+	    "refund-line-item-by-quantity": "Rimborso per quantità",
+	    "refund-line-item-selected": "Rimborso selezionati",
+		"refund-line-item-parial": "Rimborso parziale"
+	  }
+	},
+	"captureAction": {
+	  "button": {
+		"text": "Cattura pagamento"
+	  },
+	  "currentAmount": "Importo",
+	  "isFinal": "Questa è la cattura finale",
+	  "maxAmount": "Importo massimo",
+	  "successMessage": "La tua cattura ha avuto successo.",
+	  "successTitle": "Successo"
+	},
+	"general": {
+	  "title": "Ordini"
+	},
+	"header": "Pagamento VRPayment",
+	"lineItem": {
+	  "cardTitle": "Articoli di linea",
+	  "types": {
+		"amountIncludingTax": "Importo",
+		"name": "Nome",
+		"quantity": "Quantità",
+		"taxAmount": "Tasse",
+		"type": "Tipo",
+		"uniqueId": "ID unico"
+	  }
+	},
+	"modal": {
+	  "title": {
+		"capture": "Cattura",
+		"refund": "Nuovo rimborso",
+		"void": "Annulla autorizzazione"
+	  }
+	},
+	"paymentDetails": {
+	  "cardTitle": "Pagamento",
+	  "error": {
+		"title": "Errore nel recupero dei dettagli del pagamento da VRPayment"
+	  }
+	},
+	"refund": {
+	  "cardTitle": "Rimborsi",
+	  "refundAmount": {
+		"label": "Importo del rimborso"
+	  },
+	  "refundQuantity": {
+	  	"label": "Quantità di rimborso"
+	  },
+	  "types": {
+		"amount": "Importo",
+		"createdOn": "Creato il",
+		"id": "ID",
+		"state": "Stato"
+	  }
+	},
+	"refundAction": {
+	  "confirmButton": {
+		"text": "Esegui"
+	  },
+	  "refundAmount": {
+		"label": "Importo",
+		"placeholder": "Inserisci un importo"
+	  },
+	  "successMessage": "Il tuo rimborso è andato a buon fine.",
+	  "successTitle": "Successo",
+	  "maxAvailableItemsToRefund": "Numero massimo di articoli disponibili da rimborsare",
+	  "maxAvailableAmountToRefund": "Importo massimo disponibile per il rimborso"
+	},
+	"transactionHistory": {
+	  "cardTitle": "Dettagli",
+	  "types": {
+		"authorized_amount": "Importo autorizzato",
+		"currency": "Valuta",
+		"customer": "Cliente",
+		"payment_method": "Metodo di pagamento",
+		"state": "Stato",
+		"transaction": "Transazione"
+	  },
+	  "customerId": "Customer ID",
+	  "customerName": "Customer Name",
+	  "creditCardHolder": "Proprietario della carta di credito",
+	  "paymentMethod": "Metodo di pagamento",
+	  "paymentMethodBrand": "Metodo di pagamento Marca",
+	  "PseudoCreditCardNumber": "Numero di carta di credito pseudo",
+	  "CardExpire": "La carta scade"
+	},
+	"voidAction": {
+	  "confirm": {
+		"button": {
+		  "cancel": "No",
+		  "confirm": "Annulla autorizzazione"
+		},
+		"message": "Vuoi davvero annullare questo pagamento?"
+	  },
+	  "successMessage": "Il pagamento è stato annullato con successo.",
+	  "successTitle": "Successo"
+	}
+  }
+}

src/Resources/app/administration/src/module/vrpayment-settings/acl/index.js

@@ -0,0 +1,58 @@
+Shopware.Service('privileges').addPrivilegeMappingEntry({
+    category: 'permissions',
+    parent: 'vrpayment',
+    key: 'vrpayment',
+    roles: {
+        viewer: {
+            privileges: [
+                'sales_channel:read',
+                'sales_channel_payment_method:read',
+                'system_config:read'
+            ],
+            dependencies: []
+        },
+        editor: {
+            privileges: [
+                'sales_channel:update',
+                'sales_channel_payment_method:create',
+                'sales_channel_payment_method:update',
+                'system_config:update',
+                'system_config:create',
+                'system_config:delete'
+            ],
+            dependencies: [
+                'vrpayment.viewer'
+            ]
+        }
+    }
+});
+
+Shopware.Service('privileges').addPrivilegeMappingEntry({
+    category: 'permissions',
+    parent: null,
+    key: 'sales_channel',
+    roles: {
+        viewer: {
+            privileges: [
+                'sales_channel_payment_method:read'
+            ]
+        },
+        editor: {
+            privileges: [
+                'payment_method:update'
+            ]
+        },
+        creator: {
+            privileges: [
+                'payment_method:create',
+                'shipping_method:create',
+                'delivery_time:create'
+            ]
+        },
+        deleter: {
+            privileges: [
+                'payment_method:delete'
+            ]
+        }
+    }
+});

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-advanced-options/index.html.twig

@@ -0,0 +1,43 @@
+<sw-card class="sw-card"
+		 :title="$tc('vrpayment-settings.settingForm.advancedOptions.cardTitle')">
+	<sw-container>
+		<div v-if="actualConfigData" class="vrpayment-settings-advanced-options-fields">
+			<sw-inherit-wrapper
+					v-model:value="actualConfigData[CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED]"
+					:inheritedValue="selectedSalesChannelId == null ? null : allConfigs['null'][CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED]"
+					:customInheritationCheckFunction="checkBoolFieldInheritance">
+				<template #content="props">
+					<sw-switch-field
+							:name="CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED"
+							bordered
+							:mapInheritance="props"
+							:label="$tc('vrpayment-settings.settingForm.advancedOptions.webhooksUpdateEnabled.label')"
+							:helpText="$tc('vrpayment-settings.settingForm.advancedOptions.webhooksUpdateEnabled.tooltipText')"
+							:disabled="props.isInherited"
+							:value="props.currentValue"
+							@update:value="props.updateCurrentValue">
+					</sw-switch-field>
+				</template>
+			</sw-inherit-wrapper>
+
+			<sw-inherit-wrapper
+					v-model:value="actualConfigData[CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED]"
+					:inheritedValue="selectedSalesChannelId == null ? null : allConfigs['null'][CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED]"
+					:customInheritationCheckFunction="checkBoolFieldInheritance">
+				<template #content="props">
+					<sw-switch-field
+							:name="CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED"
+							bordered
+							:mapInheritance="props"
+							:label="$tc('vrpayment-settings.settingForm.advancedOptions.paymentsUpdateEnabled.label')"
+							:helpText="$tc('vrpayment-settings.settingForm.advancedOptions.paymentsUpdateEnabled.tooltipText')"
+							:disabled="props.isInherited"
+							:value="props.currentValue"
+							@update:value="props.updateCurrentValue">
+					</sw-switch-field>
+				</template>
+			</sw-inherit-wrapper>
+		</div>
+	</sw-container>
+</sw-card>
+

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-advanced-options/index.js

@@ -0,0 +1,66 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+import constants from '../../page/vrpayment-settings/configuration-constants'
+
+const {Component, Mixin} = Shopware;
+
+Component.register('sw-vrpayment-advanced-options', {
+	template: template,
+
+	name: 'VRPaymentAdvancedOptions',
+
+	inject: [
+		'acl'
+	],
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		actualConfigData: {
+			type: Object,
+			required: true
+		},
+		allConfigs: {
+			type: Object,
+			required: true
+		},
+		selectedSalesChannelId: {
+			required: true
+		},
+		isLoading: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			...constants
+		};
+	},
+
+	methods: {
+		checkTextFieldInheritance(value) {
+			if (typeof value !== 'string') {
+				return true;
+			}
+
+			return value.length <= 0;
+		},
+
+		checkNumberFieldInheritance(value) {
+			if (typeof value !== 'number') {
+				return true;
+			}
+
+			return value.length <= 0;
+		},
+
+		checkBoolFieldInheritance(value) {
+			return typeof value !== 'boolean';
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-credentials/index.html.twig

@@ -0,0 +1,92 @@
+{% block vrpayment_settings_content_card_channel_config_credentials %}
+	<sw-card
+			class="sw-card"
+			:title="$tc('vrpayment-settings.settingForm.credentials.cardTitle')"
+			v-if="actualConfigData"
+	>
+
+		{% block vrpayment_settings_content_card_channel_config_credentials_card_container %}
+			<sw-container>
+
+				{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings %}
+					<div v-if="actualConfigData" class="vrpayment-settings-credentials-fields">
+
+						{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings_space_id %}
+							<sw-inherit-wrapper
+									v-model:value="actualConfigData[CONFIG_SPACE_ID]"
+									:inheritedValue="selectedSalesChannelId === null ? null : allConfigs['null'][CONFIG_SPACE_ID]"
+									:customInheritationCheckFunction="checkNumberFieldInheritance">
+								<template #content="props">
+									<sw-number-field
+											:name="CONFIG_SPACE_ID"
+											:required="true"
+											:mapInheritance="props"
+											:label="$tc('vrpayment-settings.settingForm.credentials.spaceId.label')"
+											:helpText="$tc('vrpayment-settings.settingForm.credentials.spaceId.tooltipText')"
+											:disabled="props.isInherited || !acl.can('vrpayment.editor')"
+											:value="props.currentValue"
+											:error="spaceIdErrorState"
+											@update:value="props.updateCurrentValue">
+									</sw-number-field>
+								</template>
+							</sw-inherit-wrapper>
+						{% endblock %}
+
+						{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings_user_id %}
+							<sw-inherit-wrapper
+									v-model:value="actualConfigData[CONFIG_USER_ID]"
+									:inheritedValue="selectedSalesChannelId === null ? null : allConfigs['null'][CONFIG_USER_ID]"
+									:customInheritationCheckFunction="checkNumberFieldInheritance">
+								<template #content="props">
+									<sw-number-field
+											:name="CONFIG_USER_ID"
+											:required="true"
+											:mapInheritance="props"
+											:label="$tc('vrpayment-settings.settingForm.credentials.userId.label')"
+											:helpText="$tc('vrpayment-settings.settingForm.credentials.userId.tooltipText')"
+											:disabled="props.isInherited || !acl.can('vrpayment.editor')"
+											:value="props.currentValue"
+											:error="userIdErrorState"
+											@update:value="props.updateCurrentValue">
+									</sw-number-field>
+								</template>
+							</sw-inherit-wrapper>
+						{% endblock %}
+
+						{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings_application_key %}
+							<sw-inherit-wrapper
+									v-model:value="actualConfigData[CONFIG_APPLICATION_KEY]"
+									:inheritedValue="selectedSalesChannelId === null ? null : allConfigs['null'][CONFIG_APPLICATION_KEY]"
+									:customInheritationCheckFunction="checkTextFieldInheritance">
+								<template #content="props">
+									<sw-password-field
+											:name="CONFIG_APPLICATION_KEY"
+											:required="true"
+											:passwordToggleAble="true"
+											:mapInheritance="props"
+											:label="$tc('vrpayment-settings.settingForm.credentials.applicationKey.label')"
+											:helpText="$tc('vrpayment-settings.settingForm.credentials.applicationKey.tooltipText')"
+											:disabled="props.isInherited || !acl.can('vrpayment.editor')"
+											:value="props.currentValue"
+											:error="applicationKeyErrorState"
+											@update:value="props.updateCurrentValue">
+									</sw-password-field>
+								</template>
+							</sw-inherit-wrapper>
+						{% endblock %}
+					</div>
+				{% endblock %}
+
+				<sw-container columns="1fr 1fr" gap="0px 30px">
+					<sw-button-process
+							:isLoading="isTesting"
+							@click="emitCheckApiConnectionEvent">
+						{{ $tc('vrpayment-settings.settingForm.credentials.button.label') }}
+					</sw-button-process>
+				</sw-container>
+
+			</sw-container>
+		{% endblock %}
+	</sw-card>
+
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-credentials/index.js

@@ -0,0 +1,105 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+import constants from '../../page/vrpayment-settings/configuration-constants'
+
+const {Component, Mixin} = Shopware;
+
+Component.register('sw-vrpayment-credentials', {
+    template: template,
+
+    name: 'VRPaymentCredentials',
+
+    inject: [
+        'acl'
+    ],
+
+    mixins: [
+        Mixin.getByName('notification')
+    ],
+
+    props: {
+        actualConfigData: {
+            type: Object,
+            required: true
+        },
+        allConfigs: {
+            type: Object,
+            required: true
+        },
+
+        selectedSalesChannelId: {
+            required: true
+        },
+        spaceIdFilled: {
+            type: Boolean,
+            required: true
+        },
+        spaceIdErrorState: {
+            required: true
+        },
+        userIdFilled: {
+            type: Boolean,
+            required: true
+        },
+        userIdErrorState: {
+            required: true
+        },
+        applicationKeyFilled: {
+            type: Boolean,
+            required: true
+        },
+        applicationKeyErrorState: {
+            required: true
+        },
+        isLoading: {
+            type: Boolean,
+            required: true
+        },
+        isTesting: {
+            type: Boolean,
+            required: false
+        }
+    },
+
+    data() {
+        return {
+            ...constants
+        };
+    },
+
+    methods: {
+
+        checkTextFieldInheritance(value) {
+            if (typeof value !== 'string') {
+                return true;
+            }
+
+            return value.length <= 0;
+        },
+
+        checkNumberFieldInheritance(value) {
+            if (typeof value !== 'number') {
+                return true;
+            }
+
+            return value.length <= 0;
+        },
+
+        checkBoolFieldInheritance(value) {
+            return typeof value !== 'boolean';
+        },
+
+        // Emits the 'check-api-connection-event' with the current API connection parameters.
+        // Used to trigger API connection testing from this component.
+        emitCheckApiConnectionEvent() {
+            const apiConnectionParams = {
+                spaceId: this.actualConfigData[constants.CONFIG_SPACE_ID],
+                userId: this.actualConfigData[constants.CONFIG_USER_ID],
+                applicationKey: this.actualConfigData[constants.CONFIG_APPLICATION_KEY]
+            };
+
+            this.$emit('check-api-connection-event', apiConnectionParams);
+        }
+    }
+});

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-options/index.html.twig

@@ -0,0 +1,97 @@
+{% block vrpayment_settings_content_card_channel_config_options %}
+	<sw-card class="sw-card"
+			 :title="$tc('vrpayment-settings.settingForm.options.cardTitle')">
+
+		{% block vrpayment_settings_content_card_channel_config_credentials_card_container %}
+			<sw-container>
+
+				{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings %}
+					<div v-if="actualConfigData" class="vrpayment-settings-options-fields">
+
+						{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings_space_view_id %}
+							<sw-inherit-wrapper
+									v-model:value="actualConfigData[CONFIG_SPACE_VIEW_ID]"
+									:inheritedValue="selectedSalesChannelId === null ? null : allConfigs['null'][CONFIG_SPACE_VIEW_ID]"
+									:customInheritationCheckFunction="checkNumberFieldInheritance">
+								<template #content="props">
+									<sw-number-field
+											:name="CONFIG_SPACE_VIEW_ID"
+											:mapInheritance="props"
+											:label="$tc('vrpayment-settings.settingForm.options.spaceViewId.label')"
+											:helpText="$tc('vrpayment-settings.settingForm.options.spaceViewId.tooltipText')"
+											:disabled="props.isInherited"
+											:value="props.currentValue"
+											@update:value="props.updateCurrentValue">
+									</sw-number-field>
+								</template>
+							</sw-inherit-wrapper>
+						{% endblock %}
+
+						{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings_integration %}
+							<sw-inherit-wrapper
+									v-model:value="actualConfigData[CONFIG_INTEGRATION]"
+									:inheritedValue="selectedSalesChannelId === null ? null : allConfigs['null'][CONFIG_INTEGRATION]"
+									:customInheritationCheckFunction="checkTextFieldInheritance">
+								<template #content="props">
+									<sw-single-select
+											:name="CONFIG_INTEGRATION"
+											labelProperty="name"
+											valueProperty="id"
+											:options="integrationOptions"
+											:mapInheritance="props"
+											:label="$tc('vrpayment-settings.settingForm.options.integration.label')"
+											:helpText="$tc('vrpayment-settings.settingForm.options.integration.tooltipText')"
+											:disabled="props.isInherited"
+											:value="props.currentValue"
+											@update:value="props.updateCurrentValue">
+									</sw-single-select>
+								</template>
+							</sw-inherit-wrapper>
+						{% endblock %}
+
+						{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings_line_item_consistency_enabled %}
+							<sw-inherit-wrapper
+									v-model:value="actualConfigData[CONFIG_LINE_ITEM_CONSISTENCY_ENABLED]"
+									:inheritedValue="selectedSalesChannelId == null ? null : allConfigs['null'][CONFIG_LINE_ITEM_CONSISTENCY_ENABLED]"
+									:customInheritationCheckFunction="checkBoolFieldInheritance">
+								<template #content="props">
+									<sw-switch-field
+											:name="CONFIG_LINE_ITEM_CONSISTENCY_ENABLED"
+											bordered
+											:mapInheritance="props"
+											:label="$tc('vrpayment-settings.settingForm.options.lineItemConsistencyEnabled.label')"
+											:helpText="$tc('vrpayment-settings.settingForm.options.lineItemConsistencyEnabled.tooltipText')"
+											:disabled="props.isInherited"
+											:value="props.currentValue"
+											@update:value="props.updateCurrentValue">
+									</sw-switch-field>
+								</template>
+							</sw-inherit-wrapper>
+						{% endblock %}
+
+						{% block vrpayment_settings_content_card_channel_config_credentials_card_container_settings_email_enabled %}
+							<sw-inherit-wrapper
+									v-model:value="actualConfigData[CONFIG_EMAIL_ENABLED]"
+									:inheritedValue="selectedSalesChannelId == null ? null : allConfigs['null'][CONFIG_EMAIL_ENABLED]"
+									:customInheritationCheckFunction="checkBoolFieldInheritance">
+								<template #content="props">
+									<sw-switch-field
+											:name="CONFIG_EMAIL_ENABLED"
+											bordered
+											:mapInheritance="props"
+											:label="$tc('vrpayment-settings.settingForm.options.emailEnabled.label')"
+											:helpText="$tc('vrpayment-settings.settingForm.options.emailEnabled.tooltipText')"
+											:disabled="props.isInherited"
+											:value="props.currentValue"
+											@update:value="props.updateCurrentValue">
+									</sw-switch-field>
+								</template>
+							</sw-inherit-wrapper>
+						{% endblock %}
+					</div>
+				{% endblock %}
+			</sw-container>
+		{% endblock %}
+	</sw-card>
+
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-options/index.js

@@ -0,0 +1,77 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+import constants from '../../page/vrpayment-settings/configuration-constants'
+
+const {Component, Mixin} = Shopware;
+
+Component.register('sw-vrpayment-options', {
+	template: template,
+
+	name: 'VRPaymentOptions',
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		actualConfigData: {
+			type: Object,
+			required: true
+		},
+		allConfigs: {
+			type: Object,
+			required: true
+		},
+		selectedSalesChannelId: {
+			required: true
+		},
+		isLoading: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			...constants
+		};
+	},
+
+	computed: {
+		integrationOptions() {
+			return [
+				{
+					id: 'iframe',
+					name: this.$tc('vrpayment-settings.settingForm.options.integration.options.iframe')
+				},
+				{
+					id: 'payment_page',
+					name: this.$tc('vrpayment-settings.settingForm.options.integration.options.payment_page')
+				}
+			];
+		}
+	},
+
+	methods: {
+		checkTextFieldInheritance(value) {
+			if (typeof value !== 'string') {
+				return true;
+			}
+
+			return value.length <= 0;
+		},
+
+		checkNumberFieldInheritance(value) {
+			if (typeof value !== 'number') {
+				return true;
+			}
+
+			return value.length <= 0;
+		},
+
+		checkBoolFieldInheritance(value) {
+			return typeof value !== 'boolean';
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-settings-icon/index.html.twig

@@ -0,0 +1,31 @@
+{% block vrpayment_settings_icon %}
+    <span class="sw-icon icon--vrpayment-multicolor sw-icon--multicolor">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" contentScriptType="text/ecmascript" y="0px" zoomAndPan="magnify" style="enable-background:new 0 0 632.126 170.079;" contentStyleType="text/css" viewBox="0 0 632.126 170.079" preserveAspectRatio="xMidYMid meet" xml:space="preserve" version="1.1">
+<style type="text/css" xml:space="preserve">
+	.st0{fill:none;}
+	.st1{fill:#0066B3;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#FF6600;}
+</style>
+<g id="Box">
+	<rect class="st0" height="170.079" width="632.126"/>
+</g>
+<g id="Logo">
+	<path class="st1" d="M181.838,87.685c0.482,1.499,0.91,2.824,1.285,3.975c0.374,1.152,0.775,2.449,1.204,3.894   c0.428,1.393,0.803,2.663,1.124,3.814c0.321,1.152,0.695,2.423,1.124,3.814c0.428-1.391,0.829-2.69,1.204-3.894   c0.374-1.204,0.735-2.395,1.084-3.573c0.347-1.177,0.709-2.369,1.084-3.573c0.374-1.205,0.775-2.502,1.204-3.894l10.117-31.554   h11.241l-19.35,56.685h-13.971l-19.591-56.685h12.124L181.838,87.685z"/>
+	<path class="st1" d="M257.668,113.378h-12.686l-5.46-14.212c-0.857-2.034-1.58-3.693-2.168-4.978   c-0.589-1.285-1.419-2.329-2.489-3.132c-0.429-0.321-0.817-0.548-1.164-0.683c-0.349-0.133-0.737-0.253-1.164-0.361   c-0.536-0.107-1.339-0.173-2.409-0.2c-1.071-0.027-2.302-0.04-3.693-0.04v23.605h-11.482V56.693h17.423   c1.23,0,2.635,0.027,4.215,0.08c1.578,0.054,3.184,0.241,4.818,0.562c1.632,0.321,3.224,0.817,4.777,1.485   c1.552,0.67,2.917,1.62,4.095,2.85c0.374,0.375,0.709,0.791,1.004,1.245c0.293,0.455,0.574,0.897,0.843,1.325   c0.428,0.803,0.763,1.594,1.004,2.368c0.241,0.777,0.414,1.513,0.522,2.208c0.107,0.696,0.173,1.298,0.201,1.806   c0.026,0.509,0.04,0.871,0.04,1.084c0,2.73-0.522,4.978-1.566,6.744c-1.043,1.766-2.262,3.159-3.653,4.175   c-0.268,0.161-0.522,0.321-0.763,0.482c-0.241,0.161-0.576,0.349-1.004,0.562c-0.911,0.429-1.807,0.723-2.69,0.883   c-0.883,0.161-1.78,0.295-2.69,0.402c0.107,0.054,0.374,0.108,0.803,0.16c0.428,0.054,0.856,0.134,1.285,0.241   c0.695,0.268,1.325,0.67,1.887,1.204c0.562,0.536,1.07,1.124,1.525,1.767c0.454,0.642,0.829,1.312,1.124,2.007   c0.294,0.696,0.574,1.312,0.843,1.847L257.668,113.378z M226.275,80.86c0.909,0.054,1.766,0.08,2.569,0.08c0.855,0,1.739,0,2.649,0   c0.695,0,1.458-0.012,2.288-0.04c0.829-0.026,1.659-0.161,2.489-0.401c0.829-0.241,1.632-0.615,2.409-1.124   c0.775-0.508,1.485-1.217,2.127-2.128c0.267-0.428,0.548-1.016,0.843-1.766c0.294-0.749,0.414-1.632,0.361-2.65   c0-0.964-0.134-1.793-0.401-2.489c-0.269-0.695-0.536-1.257-0.803-1.686c-0.696-0.964-1.606-1.686-2.73-2.168   c-1.124-0.482-2.569-0.775-4.336-0.883c-0.429,0-0.777-0.013-1.044-0.04c-0.268-0.026-0.59-0.04-0.964-0.04h-5.46V80.86z"/>
+	<path class="st1" d="M295.251,56.693c2.301,0,4.643,0.12,7.026,0.361c2.381,0.241,4.723,1.031,7.025,2.369   c1.124,0.697,2.114,1.433,2.971,2.208c0.856,0.776,1.659,1.754,2.409,2.931c0.695,1.071,1.231,2.115,1.606,3.131   c0.374,1.018,0.642,1.955,0.803,2.81c0.161,0.857,0.254,1.62,0.281,2.288c0.026,0.67,0.04,1.164,0.04,1.485   c0,0.321-0.028,0.963-0.08,1.927c-0.054,0.964-0.281,2.075-0.683,3.332c-0.401,1.258-1.017,2.597-1.847,4.014   c-0.83,1.419-2.021,2.77-3.573,4.055c-0.375,0.268-1.071,0.75-2.087,1.445c-2.195,1.339-4.51,2.182-6.945,2.529   c-2.436,0.349-4.751,0.496-6.945,0.441c-0.75,0-1.513-0.012-2.288-0.04c-0.776-0.026-1.539-0.04-2.288-0.04v21.438h-11.482V56.693   H295.251z M290.514,82.948c0.588,0.054,1.151,0.094,1.686,0.12c0.534,0.028,1.096,0.04,1.686,0.04c0.909,0,1.793-0.026,2.65-0.08   c0.855-0.053,1.712-0.213,2.569-0.482c1.552-0.428,2.917-1.176,4.095-2.248c1.498-1.659,2.248-3.72,2.248-6.182   c0-1.552-0.375-3.064-1.124-4.537c-0.75-1.471-2.088-2.582-4.015-3.332c-0.75-0.267-1.62-0.482-2.61-0.642   c-0.991-0.16-2.316-0.241-3.974-0.241c-0.536,0-1.058,0.014-1.566,0.04c-0.51,0.027-1.058,0.04-1.646,0.04V82.948z"/>
+	<path class="st1" d="M343.602,113.378v-6.182c-0.321,0.59-0.817,1.298-1.485,2.128c-0.67,0.83-1.7,1.674-3.091,2.529   c-1.553,0.911-3.119,1.513-4.697,1.807c-1.58,0.294-3.145,0.442-4.697,0.442c-2.89,0-5.259-0.429-7.106-1.285   c-1.847-0.855-3.306-1.939-4.376-3.252c-1.071-1.311-1.794-2.716-2.168-4.215c-0.375-1.498-0.562-2.891-0.562-4.175   c0.053-2.248,0.468-4.107,1.244-5.58c0.775-1.472,1.699-2.662,2.77-3.573c1.712-1.552,4.014-2.702,6.905-3.452   c2.891-0.749,6.423-1.15,10.598-1.204h0.482c1.07,0,2.02,0.014,2.85,0.04c0.829,0.028,1.779,0.094,2.85,0.201   c-0.108-0.964-0.214-1.993-0.321-3.091c-0.107-1.096-0.507-2.127-1.202-3.091c-0.642-0.91-1.497-1.632-2.565-2.168   c-1.069-0.534-2.51-0.855-4.327-0.964h-1.043c-2.031,0.054-3.755,0.295-5.17,0.723c-1.416,0.429-2.552,0.83-3.406,1.204   c-0.428,0.215-0.988,0.496-1.683,0.843c-0.695,0.349-1.549,0.923-2.564,1.726l-0.321-9.475c0.856-0.321,1.75-0.642,2.686-0.963   c0.936-0.321,1.965-0.615,3.087-0.883c1.123-0.267,2.392-0.494,3.81-0.682c1.416-0.187,3.007-0.281,4.771-0.281   c1.016,0,2.112,0.028,3.288,0.08c1.177,0.054,2.34,0.228,3.489,0.522c1.149,0.295,2.298,0.71,3.448,1.244   c1.149,0.536,2.232,1.232,3.248,2.088c0.535,0.482,1.163,1.152,1.886,2.007c0.721,0.857,1.296,1.955,1.724,3.292   c0.535,1.393,0.842,3.051,0.922,4.978c0.08,1.927,0.121,3.587,0.121,4.978v9.956c0,2.517,0.026,4.805,0.08,6.865   c0.053,2.061,0.133,4.35,0.241,6.865H343.602z M343.361,94.349c-0.692-0.053-1.372-0.093-2.037-0.12   c-0.666-0.026-1.372-0.04-2.118-0.04c-2.878,0-5.355,0.281-7.432,0.843c-2.078,0.562-3.569,1.646-4.474,3.252   c-0.427,0.803-0.64,1.714-0.64,2.73c0,0.59,0.107,1.218,0.32,1.887c0.213,0.67,0.572,1.298,1.079,1.887   c0.506,0.59,1.172,1.071,1.997,1.445c0.826,0.375,1.877,0.562,3.156,0.562c0.638,0,1.45-0.12,2.436-0.362   c0.985-0.241,1.984-0.695,2.996-1.365c1.011-0.669,1.931-1.606,2.756-2.81c0.826-1.205,1.399-2.77,1.719-4.697   c0.107-0.588,0.173-1.257,0.201-2.007C343.347,94.805,343.361,94.403,343.361,94.349z"/>
+	<path class="st1" d="M370.828,90.415c0.374,1.285,0.735,2.503,1.084,3.653c0.348,1.152,0.683,2.288,1.004,3.412   c0.321,1.124,0.643,2.262,0.964,3.412c0.321,1.152,0.669,2.368,1.044,3.653c0.588-2.409,1.177-4.576,1.766-6.503   c0.588-1.927,1.257-4.067,2.007-6.423l6.423-20.313h11.08l-16.058,43.116c-1.071,2.943-2.061,5.406-2.971,7.387   c-0.91,1.98-1.954,3.586-3.131,4.817c-0.642,0.749-1.272,1.351-1.887,1.807c-0.616,0.454-1.031,0.735-1.245,0.843   c-1.393,0.803-2.824,1.351-4.296,1.646c-1.473,0.294-2.878,0.442-4.215,0.442c-0.911,0-1.887-0.068-2.931-0.202   c-1.044-0.137-2.477-0.42-4.296-0.852l0.803-8.26c0.909,0.267,1.686,0.468,2.328,0.602c0.642,0.133,1.391,0.201,2.248,0.201   c1.498,0,2.742-0.267,3.733-0.801c0.99-0.535,1.793-1.19,2.409-1.964c0.615-0.777,1.096-1.564,1.445-2.365   c0.347-0.803,0.602-1.471,0.763-2.005l-16.379-44.412h11.883L370.828,90.415z"/>
+	<path class="st1" d="M461.368,113.378h-10.839V91.78c0-2.622-0.108-4.817-0.321-6.584c-0.215-1.766-0.991-3.184-2.329-4.255   c-0.857-0.588-1.674-0.936-2.449-1.044c-0.776-0.107-1.272-0.161-1.485-0.161c-1.124,0-2.061,0.188-2.811,0.562   c-0.75,0.375-1.339,0.75-1.766,1.124c-0.911,0.803-1.62,1.766-2.128,2.89c-0.509,1.124-0.883,2.276-1.124,3.453   c-0.241,1.178-0.389,2.342-0.442,3.493c-0.054,1.152-0.08,2.155-0.08,3.011c-0.054,0.536-0.08,1.018-0.08,1.445   c0,0.429,0,0.937,0,1.526v16.138h-10.839V89.451c0-0.588-0.014-1.271-0.04-2.048c-0.027-0.775-0.12-1.551-0.281-2.328   c-0.161-0.775-0.415-1.526-0.763-2.248c-0.349-0.723-0.87-1.378-1.565-1.967c-0.751-0.642-1.513-1.016-2.289-1.124   c-0.776-0.107-1.272-0.16-1.485-0.16c-0.321,0-0.937,0.094-1.847,0.281c-0.911,0.188-1.847,0.656-2.81,1.405   c-1.553,1.232-2.597,2.798-3.132,4.697c-0.535,1.901-0.803,4.376-0.803,7.427v19.993h-10.919V79.174   c-0.054-1.445-0.094-2.756-0.121-3.934c-0.028-1.177-0.068-2.489-0.121-3.934h10.438v6.423c0.642-0.91,1.164-1.592,1.565-2.047   c0.402-0.454,0.816-0.87,1.245-1.245c1.07-0.963,2.168-1.699,3.292-2.208c1.124-0.508,2.18-0.883,3.171-1.124   c0.99-0.241,1.847-0.388,2.569-0.442c0.723-0.053,1.217-0.08,1.485-0.08c0.856,0,1.739,0.08,2.65,0.241   c0.909,0.16,1.833,0.441,2.77,0.843c0.936,0.401,1.833,0.937,2.69,1.606c0.856,0.67,1.659,1.539,2.409,2.609   c0.321,0.536,0.562,0.977,0.723,1.325c0.161,0.349,0.374,0.791,0.642,1.325c0.482-0.803,0.91-1.431,1.285-1.887   c0.374-0.454,0.723-0.843,1.044-1.164c1.124-1.285,2.328-2.248,3.613-2.891c1.285-0.642,2.475-1.11,3.573-1.405   c1.096-0.294,2.06-0.454,2.89-0.482c0.829-0.026,1.378-0.04,1.646-0.04c0.321,0,0.91,0.028,1.766,0.08   c0.856,0.054,1.833,0.281,2.931,0.682c1.096,0.402,2.221,1.058,3.372,1.967c1.151,0.911,2.181,2.195,3.091,3.854   c0.963,1.874,1.538,3.693,1.726,5.46c0.187,1.767,0.281,3.561,0.281,5.38V113.378z"/>
+	<path class="st1" d="M475.684,96.116c0.053,0.108,0.187,0.63,0.401,1.565c0.213,0.937,0.588,1.807,1.124,2.61   c0.695,1.178,1.512,2.128,2.449,2.85c0.936,0.723,1.899,1.285,2.891,1.686c0.99,0.401,1.993,0.682,3.011,0.843   c1.017,0.161,1.98,0.241,2.891,0.241c1.606,0,3.252-0.187,4.938-0.562c1.686-0.374,3.332-0.963,4.938-1.767   c0.642-0.267,1.297-0.615,1.967-1.044c0.669-0.428,1.084-0.695,1.244-0.803l0.161,9.394c-1.606,0.696-3.546,1.392-5.821,2.087   c-2.276,0.695-5.179,1.044-8.711,1.044c-0.321,0-0.803,0-1.445,0c-0.642,0-1.379-0.04-2.208-0.12   c-0.831-0.08-1.754-0.228-2.77-0.441c-1.017-0.214-2.035-0.508-3.051-0.883c-1.66-0.642-3.252-1.512-4.778-2.609   c-1.525-1.097-2.864-2.462-4.014-4.095c-1.152-1.632-2.075-3.545-2.77-5.741c-0.696-2.194-1.044-4.71-1.044-7.548   c0-2.622,0.241-4.844,0.723-6.664c0.482-1.819,0.964-3.264,1.445-4.336c0.267-0.482,0.534-0.99,0.803-1.526   c0.267-0.534,0.428-0.855,0.482-0.964c0.267-0.374,0.522-0.735,0.763-1.084c0.241-0.347,0.522-0.682,0.843-1.004   c1.552-1.873,3.559-3.479,6.022-4.817c2.461-1.337,5.566-2.007,9.314-2.007c3.425,0,6.329,0.59,8.712,1.767   c2.381,1.178,4.336,2.744,5.861,4.697c1.525,1.955,2.636,4.229,3.332,6.825c0.695,2.597,1.044,5.313,1.044,8.149   c0,0.75,0,1.473,0,2.168c0,0.642-0.028,1.339-0.08,2.088H475.684z M494.391,88.488c-0.108-1.177-0.268-2.341-0.482-3.493   c-0.214-1.15-0.75-2.288-1.606-3.412c-0.642-0.855-1.312-1.512-2.007-1.967c-0.697-0.454-1.365-0.789-2.007-1.004   c-0.642-0.213-1.218-0.348-1.726-0.402c-0.509-0.053-0.871-0.08-1.084-0.08c-0.161,0-0.536,0.027-1.124,0.08   c-0.59,0.054-1.272,0.201-2.048,0.442c-0.776,0.241-1.58,0.642-2.409,1.204c-0.831,0.562-1.593,1.353-2.288,2.369   c-0.857,1.393-1.379,2.677-1.566,3.854c-0.188,1.178-0.309,1.981-0.361,2.409H494.391z"/>
+	<path class="st1" d="M536.72,113.378V93.065c-0.054-2.515-0.161-4.509-0.321-5.982c-0.16-1.472-0.535-2.796-1.124-3.975   c-0.375-0.695-0.803-1.271-1.285-1.726c-0.482-0.454-1.098-0.869-1.847-1.245c-0.268-0.107-0.682-0.241-1.244-0.401   c-0.562-0.16-1.218-0.241-1.967-0.241c-0.375-0.053-1.084,0.014-2.128,0.201c-1.044,0.188-2.155,0.737-3.332,1.646   c-0.964,0.75-1.726,1.58-2.288,2.489c-0.562,0.911-0.977,1.901-1.245,2.971c-0.268,1.071-0.455,2.181-0.562,3.332   c-0.108,1.152-0.16,2.342-0.16,3.573v19.671h-11V81.423c0-1.873-0.027-3.559-0.08-5.059c-0.054-1.498-0.134-3.184-0.241-5.058   h10.518v6.503c0.482-0.642,1.017-1.285,1.606-1.927c0.803-0.91,1.606-1.606,2.409-2.087c0.803-0.482,1.338-0.803,1.606-0.964   c1.606-0.909,3.104-1.498,4.496-1.766c1.391-0.267,2.863-0.401,4.416-0.401c2.034,0,3.706,0.214,5.018,0.642   c1.311,0.429,2.395,0.91,3.252,1.445c0.428,0.268,0.95,0.656,1.566,1.164c0.615,0.509,1.297,1.298,2.047,2.369   c0.642,0.857,1.137,1.794,1.485,2.81c0.347,1.017,0.602,2.141,0.763,3.372c0.161,1.232,0.267,2.623,0.321,4.175   c0.053,1.553,0.107,3.292,0.16,5.219v21.518H536.72z"/>
+	<path class="st1" d="M567.149,71.306h9.876v8.19h-9.876v18.467c0.107,2.035,0.602,3.707,1.485,5.018   c0.883,1.312,2.529,1.967,4.938,1.967c0.91,0,1.699-0.08,2.369-0.241c0.669-0.161,1.164-0.294,1.485-0.401l0.241,8.591   c-1.714,0.429-3.091,0.723-4.135,0.883c-1.044,0.161-1.995,0.241-2.85,0.241c-2.356,0-4.35-0.295-5.982-0.883   c-1.634-0.588-2.931-1.311-3.894-2.168c-1.071-0.909-1.941-2.088-2.61-3.533c-0.67-1.445-1.138-3.292-1.405-5.54   c-0.108-1.07-0.161-2.007-0.161-2.81c0-0.855,0-1.498,0-1.927V79.495h-8.109v-8.19h8.109v-8.431l10.518-3.372V71.306z"/>
+	<rect width="84.237" x="56.693" height="56.693" y="56.693" class="st2"/>
+	<path class="st3" d="M140.93,113.386v-9.971h-32.11c-0.875,4.577-1.614,8.458-1.901,9.971H140.93L140.93,113.386z"/>
+	<polygon class="st3" points="56.693,103.415 56.693,113.386 90.463,113.386 88.209,103.415 56.693,103.415  "/>
+	<path class="st1" d="M73.288,79.881l-2.455-10.294h20.965l6.942,30.277l4.421-19.656c2.159-8.599,2.974-10.621,15.12-10.621   c2.637,0,8.742,0,8.742,0s-1.768,7.922-3.956,16.517c-0.84,3.345-8.144,2.942-7.773-0.17c0.039-0.32,0.38-2.619,0.652-4.259   c0.403-2.367-2.372-2.656-2.866-0.321c-0.357,1.669-1.957,10.071-3.457,17.872h31.307V56.693H56.693v42.532h30.572L82.91,79.898   L73.288,79.881L73.288,79.881z"/>
+</g>
+</svg>
+
+    </span>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-settings-icon/index.js

@@ -0,0 +1,7 @@
+import template from './index.html.twig';
+
+const { Component } = Shopware;
+
+Component.register('sw-vrpayment-settings-icon', {
+    template
+});

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-storefront-options/index.html.twig

@@ -0,0 +1,25 @@
+<sw-card class="sw-card"
+		 :title="$tc('vrpayment-settings.settingForm.storefrontOptions.cardTitle')">
+	<sw-container>
+		<div v-if="actualConfigData" class="vrpayment-settings-storefront-options-fields">
+			<sw-inherit-wrapper
+					v-model:value="actualConfigData[CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED]"
+					:inheritedValue="selectedSalesChannelId == null ? null : allConfigs['null'][CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED]"
+					:customInheritationCheckFunction="checkBoolFieldInheritance">
+				<template #content="props">
+					<sw-switch-field
+							:name="CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED"
+							bordered
+							:mapInheritance="props"
+							:label="$tc('vrpayment-settings.settingForm.storefrontOptions.invoiceDownloadEnabled.label')"
+							:helpText="$tc('vrpayment-settings.settingForm.storefrontOptions.invoiceDownloadEnabled.tooltipText')"
+							:disabled="props.isInherited"
+							:value="props.currentValue"
+							@update:value="props.updateCurrentValue">
+					</sw-switch-field>
+				</template>
+			</sw-inherit-wrapper>
+		</div>
+	</sw-container>
+</sw-card>
+

src/Resources/app/administration/src/module/vrpayment-settings/component/sw-vrpayment-storefront-options/index.js

@@ -0,0 +1,62 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+import constants from '../../page/vrpayment-settings/configuration-constants'
+
+const {Component, Mixin} = Shopware;
+
+Component.register('sw-vrpayment-storefront-options', {
+	template: template,
+
+	name: 'VRPaymentStorefrontOptions',
+
+	mixins: [
+		Mixin.getByName('notification')
+	],
+
+	props: {
+		actualConfigData: {
+			type: Object,
+			required: true
+		},
+		allConfigs: {
+			type: Object,
+			required: true
+		},
+		selectedSalesChannelId: {
+			required: true
+		},
+		isLoading: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			...constants
+		};
+	},
+
+	methods: {
+		checkTextFieldInheritance(value) {
+			if (typeof value !== 'string') {
+				return true;
+			}
+
+			return value.length <= 0;
+		},
+
+		checkNumberFieldInheritance(value) {
+			if (typeof value !== 'number') {
+				return true;
+			}
+
+			return value.length <= 0;
+		},
+
+		checkBoolFieldInheritance(value) {
+			return typeof value !== 'boolean';
+		}
+	}
+});

src/Resources/app/administration/src/module/vrpayment-settings/index.js

@@ -0,0 +1,61 @@
+/* global Shopware */
+
+import './acl';
+import './page/vrpayment-settings';
+import './component/sw-vrpayment-credentials';
+import './component/sw-vrpayment-options';
+import './component/sw-vrpayment-settings-icon';
+import './component/sw-vrpayment-storefront-options';
+import './component/sw-vrpayment-advanced-options';
+
+import deDE from './snippet/de-DE.json';
+import enGB from './snippet/en-GB.json';
+import frFR from './snippet/fr-FR.json';
+import itIT from './snippet/it-IT.json';
+
+const {Module} = Shopware;
+
+Module.register('vrpayment-settings', {
+	type: 'plugin',
+	name: 'VRPayment',
+	title: 'vrpayment-settings.general.descriptionTextModule',
+	description: 'vrpayment-settings.general.descriptionTextModule',
+	color: '#28d8ff',
+	icon: 'default-action-settings',
+	version: '1.0.1',
+	targetVersion: '1.0.1',
+
+    snippets: {
+        'de-DE': deDE,
+        'en-GB': enGB,
+        'fr-FR': frFR,
+        'it-IT': itIT,
+    },
+
+	routes: {
+		index: {
+			component: 'vrpayment-settings',
+			path: 'index',
+			meta: {
+				parentPath: 'sw.settings.index',
+				privilege: 'vrpayment.viewer'
+			},
+			props: {
+                default: (route) => {
+                    return {
+                        hash: route.params.hash,
+                    };
+                },
+            },
+		}
+	},
+
+	settingsItem: {
+		group: 'plugins',
+		to: 'vrpayment.settings.index',
+		iconComponent: 'sw-vrpayment-settings-icon',
+		backgroundEnabled: true,
+		privilege: 'vrpayment.viewer'
+	}
+
+});

src/Resources/app/administration/src/module/vrpayment-settings/page/vrpayment-settings/configuration-constants.js

@@ -0,0 +1,25 @@
+export const CONFIG_DOMAIN = 'VRPaymentPayment.config';
+export const CONFIG_APPLICATION_KEY = CONFIG_DOMAIN + '.' + 'applicationKey';
+export const CONFIG_EMAIL_ENABLED = CONFIG_DOMAIN + '.' + 'emailEnabled';
+export const CONFIG_INTEGRATION = CONFIG_DOMAIN + '.' + 'integration';
+export const CONFIG_LINE_ITEM_CONSISTENCY_ENABLED = CONFIG_DOMAIN + '.' + 'lineItemConsistencyEnabled';
+export const CONFIG_SPACE_ID = CONFIG_DOMAIN + '.' + 'spaceId';
+export const CONFIG_SPACE_VIEW_ID = CONFIG_DOMAIN + '.' + 'spaceViewId';
+export const CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED = CONFIG_DOMAIN + '.' + 'storefrontInvoiceDownloadEnabled';
+export const CONFIG_USER_ID = CONFIG_DOMAIN + '.' + 'userId';
+export const CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED = CONFIG_DOMAIN + '.' + 'storefrontWebhooksUpdateEnabled';
+export const CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED = CONFIG_DOMAIN + '.' + 'storefrontPaymentsUpdateEnabled';
+
+export default {
+    CONFIG_DOMAIN,
+    CONFIG_APPLICATION_KEY,
+    CONFIG_EMAIL_ENABLED,
+    CONFIG_INTEGRATION,
+    CONFIG_LINE_ITEM_CONSISTENCY_ENABLED,
+    CONFIG_SPACE_ID,
+    CONFIG_SPACE_VIEW_ID,
+    CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED,
+    CONFIG_USER_ID,
+    CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED,
+    CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED
+};

src/Resources/app/administration/src/module/vrpayment-settings/page/vrpayment-settings/index.html.twig

@@ -0,0 +1,145 @@
+{% block vrpayment_settings %}
+<sw-page class="vrpayment-settings">
+
+	{% block vrpayment_settings_header %}
+	<template #smart-bar-header>
+		<h2>
+			{{ $tc('sw-settings.index.title') }}
+			<sw-icon name="small-arrow-medium-right" small></sw-icon>
+			{{ $tc('vrpayment-settings.header') }}
+		</h2>
+	</template>
+	{% endblock %}
+
+	{% block vrpayment_settings_actions %}
+	<template #smart-bar-actions>
+		{% block vrpayment_settings_actions_save %}
+		<sw-button-process
+				v-model:value="isSaveSuccessful"
+				class="sw-settings-login-registration__save-action"
+				variant="primary"
+				:isLoading="isLoading"
+				:disabled="isLoading"
+				@click="onSave">
+			{{ $tc('vrpayment-settings.settingForm.save') }}
+		</sw-button-process>
+		{% endblock %}
+	</template>
+	{% endblock %}
+
+	{% block vrpayment_settings_content %}
+	<template #content>
+
+		{% block vrpayment_settings_content_card %}
+		<sw-card-view>
+
+			{% block vrpayment_settings_content_card_channel_config %}
+			<sw-sales-channel-config v-model:value="config"
+									 ref="configComponent"
+									 :domain="CONFIG_DOMAIN">
+
+				{% block vrpayment_settings_content_card_channel_config_sales_channel %}
+				<template #select="{ onInput, selectedSalesChannelId, salesChannel }">
+
+					{% block vrpayment_settings_content_card_channel_config_sales_channel_card %}
+					<sw-card title="Sales Channel Switch">
+
+						{% block vrpayment_settings_content_card_channel_config_sales_channel_card_title %}
+						<sw-single-select
+								v-model:value="selectedSalesChannelId"
+								labelProperty="translated.name"
+								valueProperty="id"
+								:mapInheritance="props"
+								:isLoading="isLoading"
+								:options="salesChannel"
+								@update:value="onInput">
+						</sw-single-select>
+						{% endblock %}
+						{% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer %}
+						<template #footer>
+
+							{% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer_container %}
+							<sw-container columns="2fr 1fr" gap="0px 30px">
+
+								{% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer_container_text %}
+								<p>{{ $tc('vrpayment-settings.salesChannelCard.button.description') }}</p>
+								{% endblock %}
+
+								{% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer_container_button %}
+								<sw-button-process
+										v-model:value="isSetDefaultPaymentSuccessful"
+										:isLoading="isSettingDefaultPaymentMethods"
+										@click="onSetPaymentMethodDefault">
+									{{ $tc('vrpayment-settings.salesChannelCard.button.label') }}
+								</sw-button-process>
+								{% endblock %}
+							</sw-container>
+							{% endblock %}
+						</template>
+						{% endblock %}
+					</sw-card>
+					{% endblock %}
+				</template>
+				{% endblock %}
+
+				{% block vrpayment_settings_content_card_channel_config_cards %}
+				<template #content="{ actualConfigData, allConfigs, selectedSalesChannelId }">
+					<div v-if="actualConfigData">
+
+						<sw-vrpayment-credentials
+								:actualConfigData="actualConfigData"
+								:allConfigs="allConfigs"
+								:selectedSalesChannelId="selectedSalesChannelId"
+								:spaceIdErrorState="spaceIdErrorState"
+								:userIdErrorState="userIdErrorState"
+								:applicationKeyErrorState="applicationKeyErrorState"
+								:spaceIdFilled="spaceIdFilled"
+								:userIdFilled="userIdFilled"
+								:applicationKeyFilled="applicationKeyFilled"
+								:isLoading="isLoading"
+								:isTesting="isTesting"
+								@check-api-connection-event="onCheckApiConnection"
+						></sw-vrpayment-credentials>
+
+						<sw-vrpayment-options
+								:actualConfigData="actualConfigData"
+								:allConfigs="allConfigs"
+								:isLoading="isLoading"
+								:selectedSalesChannelId="selectedSalesChannelId"
+						>
+						</sw-vrpayment-options>
+
+						<sw-vrpayment-storefront-options
+								:actualConfigData="actualConfigData"
+								:allConfigs="allConfigs"
+								:isLoading="isLoading"
+								:selectedSalesChannelId="selectedSalesChannelId"
+						>
+						</sw-vrpayment-storefront-options>
+
+						<sw-vrpayment-advanced-options
+								:actualConfigData="actualConfigData"
+								:allConfigs="allConfigs"
+								:isLoading="isLoading"
+								:selectedSalesChannelId="selectedSalesChannelId"
+						>
+						</sw-vrpayment-advanced-options>
+
+
+					</div>
+				</template>
+				{% endblock %}
+
+			</sw-sales-channel-config>
+			{% endblock %}
+
+			{% block vrpayment_settings_content_card_loading %}
+			<sw-loader v-if="isLoading"></sw-loader>
+			{% endblock %}
+		</sw-card-view>
+		{% endblock %}
+
+	</template>
+	{% endblock %}
+</sw-page>
+{% endblock %}

src/Resources/app/administration/src/module/vrpayment-settings/page/vrpayment-settings/index.js

@@ -0,0 +1,329 @@
+/* global Shopware */
+
+import template from './index.html.twig';
+import constants from './configuration-constants';
+
+const {Component, Mixin} = Shopware;
+
+Component.register('vrpayment-settings', {
+
+    template: template,
+
+    inject: [
+        'acl',
+        'VRPaymentConfigurationService'
+    ],
+
+    mixins: [
+        Mixin.getByName('notification'),
+        Mixin.getByName('sw-inline-snippet')
+    ],
+
+    data() {
+        return {
+
+            config: {},
+
+            isLoading: false,
+            isTesting: false,
+
+            isSaveSuccessful: false,
+
+            applicationKeyFilled: false,
+            applicationKeyErrorState: false,
+
+            spaceIdFilled: false,
+            spaceIdErrorState: false,
+
+            userIdFilled: false,
+            userIdErrorState: false,
+
+            isSetDefaultPaymentSuccessful: false,
+            isSettingDefaultPaymentMethods: false,
+
+            configIntegrationDefaultValue: 'iframe',
+            configEmailEnabledDefaultValue: true,
+            configLineItemConsistencyEnabledDefaultValue: true,
+            configStorefrontInvoiceDownloadEnabledEnabledDefaultValue: true,
+            configStorefrontWebhooksUpdateEnabledDefaultValue: true,
+            configStorefrontPaymentsUpdateEnabledDefaultValue: true,
+
+            ...constants
+        };
+    },
+
+    props: {
+        isLoading: {
+            type: Boolean,
+            required: true
+        }
+    },
+
+    metaInfo() {
+        return {
+            title: this.$createTitle()
+        };
+    },
+
+    created() {
+        // Registers a listener for the 'check-api-connection-event'.
+        // Triggered when this event is emitted.
+        this.$on('check-api-connection-event', this.onCheckApiConnection);
+    },
+
+    beforeDestroy() {
+        // Removes the listener for the 'check-api-connection-event'
+        // before the component is destroyed to prevent memory leaks.
+        this.$off('check-api-connection-event', this.onCheckApiConnection);
+    },
+
+    watch: {
+        config: {
+            handler(configData) {
+                const defaultConfig = this.$refs.configComponent.allConfigs.null;
+                const salesChannelId = this.$refs.configComponent.selectedSalesChannelId;
+                if (salesChannelId === null) {
+
+                    this.applicationKeyFilled = !!this.config[this.CONFIG_APPLICATION_KEY];
+                    this.spaceIdFilled = !!this.config[this.CONFIG_SPACE_ID];
+                    this.userIdFilled = !!this.config[this.CONFIG_USER_ID];
+
+                    if (!(this.CONFIG_INTEGRATION in this.config)) {
+                        this.config[this.CONFIG_INTEGRATION] = this.configIntegrationDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_EMAIL_ENABLED in this.config)) {
+                        this.config[this.CONFIG_EMAIL_ENABLED] = this.configEmailEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_LINE_ITEM_CONSISTENCY_ENABLED in this.config)) {
+                        this.config[this.CONFIG_LINE_ITEM_CONSISTENCY_ENABLED] = this.configLineItemConsistencyEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED in this.config)) {
+                        this.config[this.CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED] = this.configStorefrontInvoiceDownloadEnabledEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED in this.config)) {
+                        this.config[this.CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED] = this.configStorefrontWebhooksUpdateEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED in this.config)) {
+                        this.config[this.CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED] = this.configStorefrontPaymentsUpdateEnabledDefaultValue;
+                    }
+
+                } else {
+
+                    this.applicationKeyFilled = !!this.config[this.CONFIG_APPLICATION_KEY] || !!defaultConfig[this.CONFIG_APPLICATION_KEY];
+                    this.spaceIdFilled = !!this.config[this.CONFIG_SPACE_ID] || !!defaultConfig[this.CONFIG_SPACE_ID];
+                    this.userIdFilled = !!this.config[this.CONFIG_USER_ID] || !!defaultConfig[this.CONFIG_USER_ID];
+
+
+                    if (!(this.CONFIG_INTEGRATION in this.config) || !(this.CONFIG_INTEGRATION in defaultConfig)) {
+                        this.config[this.CONFIG_INTEGRATION] = this.configIntegrationDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_EMAIL_ENABLED in this.config) || !(this.CONFIG_EMAIL_ENABLED in defaultConfig)) {
+                        this.config[this.CONFIG_EMAIL_ENABLED] = this.configEmailEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_LINE_ITEM_CONSISTENCY_ENABLED in this.config) || !(this.CONFIG_LINE_ITEM_CONSISTENCY_ENABLED in defaultConfig)) {
+                        this.config[this.CONFIG_LINE_ITEM_CONSISTENCY_ENABLED] = this.configLineItemConsistencyEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED in this.config) || !(this.CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED in defaultConfig)) {
+                        this.config[this.CONFIG_STOREFRONT_INVOICE_DOWNLOAD_ENABLED] = this.configStorefrontInvoiceDownloadEnabledEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED in this.config) || !(this.CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED in defaultConfig)) {
+                        this.config[this.CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED] = this.configStorefrontWebhooksUpdateEnabledDefaultValue;
+                    }
+
+                    if (!(this.CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED in this.config) || !(this.CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED in defaultConfig)) {
+                        this.config[this.CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED] = this.configStorefrontPaymentsUpdateEnabledDefaultValue;
+                    }
+                }
+
+                this.$emit('salesChannelChanged');
+                this.$emit('update:value', configData);
+            },
+            deep: true
+        }
+    },
+
+    methods: {
+        checkTextFieldInheritance(value) {
+            if (typeof value !== 'string') {
+                return true;
+            }
+
+            return value.length <= 0;
+        },
+
+        checkNumberFieldInheritance(value) {
+            if (typeof value !== 'number') {
+                return true;
+            }
+
+            return value.length <= 0;
+        },
+
+        checkBoolFieldInheritance(value) {
+            return typeof value !== 'boolean';
+        },
+
+        getInheritValue(key) {
+            if (this.selectedSalesChannelId == null ) {
+                return this.actualConfigData[key];
+            } else {
+                return this.allConfigs['null'][key];
+            }
+        },
+
+        onSave() {
+            if (!(this.spaceIdFilled && this.userIdFilled && this.applicationKeyFilled)) {
+                this.setErrorStates();
+                return;
+            }
+            this.save();
+        },
+
+        save() {
+            this.isLoading = true;
+
+            this.$refs.configComponent.save().then((res) => {
+                if (res) {
+                    this.config = res;
+                }
+                this.registerWebHooks();
+                this.synchronizePaymentMethodConfiguration();
+                this.installOrderDeliveryStates();
+            }).catch((e) => {
+                console.error('Error:', e);
+                this.isLoading = false;
+            });
+        },
+
+        registerWebHooks() {
+            if (this.config[this.CONFIG_STOREFRONT_WEBHOOKS_UPDATE_ENABLED] === false) {
+                return false;
+            }
+
+            this.VRPaymentConfigurationService.registerWebHooks(this.$refs.configComponent.selectedSalesChannelId)
+                .then(() => {
+                    this.createNotificationSuccess({
+                        title: this.$tc('vrpayment-settings.settingForm.titleSuccess'),
+                        message: this.$tc('vrpayment-settings.settingForm.messageWebHookUpdated')
+                    });
+                }).catch((e) => {
+                    this.createNotificationError({
+                        title: this.$tc('vrpayment-settings.settingForm.titleError'),
+                        message: this.$tc('vrpayment-settings.settingForm.messageWebHookError')
+                    });
+                    this.isLoading = false;
+                    console.error('Error:', e);
+            });
+        },
+
+        synchronizePaymentMethodConfiguration() {
+            if (this.config[this.CONFIG_STOREFRONT_PAYMENTS_UPDATE_ENABLED] === false) {
+                return false;
+            }
+
+            this.VRPaymentConfigurationService.synchronizePaymentMethodConfiguration(this.$refs.configComponent.selectedSalesChannelId)
+                .then(() => {
+                    this.createNotificationSuccess({
+                        title: this.$tc('vrpayment-settings.settingForm.titleSuccess'),
+                        message: this.$tc('vrpayment-settings.settingForm.messagePaymentMethodConfigurationUpdated')
+                    });
+                    this.isLoading = false;
+                }).catch((e) => {
+                    this.createNotificationError({
+                        title: this.$tc('vrpayment-settings.settingForm.titleError'),
+                        message: this.$tc('vrpayment-settings.settingForm.messagePaymentMethodConfigurationError')
+                    });
+                    this.isLoading = false;
+                    console.error('Error:', e);
+            });
+        },
+
+        installOrderDeliveryStates(){
+            this.VRPaymentConfigurationService.installOrderDeliveryStates()
+                .then(() => {
+                    this.createNotificationSuccess({
+                        title: this.$tc('vrpayment-settings.settingForm.titleSuccess'),
+                        message: this.$tc('vrpayment-settings.settingForm.messageOrderDeliveryStateUpdated')
+                    });
+                    this.isLoading = false;
+                }).catch(() => {
+                    this.createNotificationError({
+                        title: this.$tc('vrpayment-settings.settingForm.titleError'),
+                        message: this.$tc('vrpayment-settings.settingForm.messageOrderDeliveryStateError')
+                    });
+                    this.isLoading = false;
+            });
+        },
+
+        onSetPaymentMethodDefault() {
+            this.isSettingDefaultPaymentMethods = true;
+            this.VRPaymentConfigurationService.setVRPaymentAsSalesChannelPaymentDefault(
+                this.$refs.configComponent.selectedSalesChannelId
+            ).then(() => {
+                this.isSettingDefaultPaymentMethods = false;
+                this.isSetDefaultPaymentSuccessful = true;
+                this.createNotificationSuccess({
+                    title: this.$tc('vrpayment-settings.settingForm.titleSuccess'),
+                    message: this.$tc('vrpayment-settings.salesChannelCard.messageDefaultPaymentUpdated')
+                });
+            });
+        },
+
+        setErrorStates() {
+            const messageNotBlankErrorState = {
+                code: 1,
+                detail: this.$tc('vrpayment-settings.messageNotBlank')
+            };
+
+            if (!this.spaceIdFilled) {
+                this.spaceIdErrorState = messageNotBlankErrorState;
+            }
+
+            if (!this.userIdFilled) {
+                this.userIdErrorState = messageNotBlankErrorState;
+            }
+
+            if (!this.applicationKeyFilled) {
+                this.applicationKeyErrorState = messageNotBlankErrorState;
+            }
+        },
+
+        // Handles the 'check-api-connection-event'.
+        // Uses the provided apiConnectionData to perform API connection checks.
+        onCheckApiConnection(apiConnectionData) {
+            const { spaceId, userId, applicationKey } = apiConnectionData;
+            this.isTesting = true;
+
+            this.VRPaymentConfigurationService.checkApiConnection(spaceId, userId, applicationKey)
+                .then((res) => {
+                    if (res.result === 200) {
+                        this.createNotificationSuccess({
+                            title: this.$tc('vrpayment-settings.settingForm.credentials.alert.title'),
+                            message: this.$tc('vrpayment-settings.settingForm.credentials.alert.successMessage')
+                        });
+                    } else {
+                        this.createNotificationError({
+                            title: this.$tc('vrpayment-settings.settingForm.credentials.alert.title'),
+                            message: this.$tc('vrpayment-settings.settingForm.credentials.alert.errorMessage')
+                        });
+                    }
+                    this.isTesting = false;
+                }).catch(() => {
+                    this.createNotificationError({
+                        title: this.$tc('vrpayment-settings.settingForm.credentials.alert.title'),
+                        message: this.$tc('vrpayment-settings.settingForm.credentials.alert.errorMessage')
+                    });
+                    this.isTesting = false;
+            });
+        }
+    }
+});

src/Resources/app/administration/src/module/vrpayment-settings/snippet/de-DE.json

@@ -0,0 +1,105 @@
+{
+  "sw-privileges": {
+	"permissions": {
+	  "parents": {
+		"vrpayment": "VRPayment plugin"
+	  },
+	  "vrpayment": {
+		"label": "VRPayment berechtigungen"
+	  }
+	}
+  },
+  "vrpayment-settings": {
+	"general": {
+	  "descriptionTextModule": "VRPayment-Einstellungen",
+	  "mainMenuItemGeneral": "VRPayment"
+	},
+	"header": "VRPayment",
+	"messageNotBlank": "Dieser Wert sollte nicht leer sein.",
+	"salesChannelCard": {
+	  "button": {
+		"description": "Klicken Sie auf diese Schaltfläche, um VRPayment als Standard-Zahlungsabwickler im ausgewählten Vertriebskanal festzulegen",
+		"label": "VRPayment als Standard-Zahlungsabwickler festlegen"
+	  },
+	  "messageDefaultPaymentError": "VRPayment als Standard-Zahlungsabwickler konnte nicht festgelegt werden..",
+	  "messageDefaultPaymentUpdated": "VRPayment als Standard-Zahlungsabwickler wurde festgelegt."
+	},
+	"settingForm": {
+	  "credentials": {
+		"applicationKey": {
+		  "label": "Application Key",
+		  "tooltipText": "Der Anwendungsschlüssel wird verwendet, um dieses Plugin mit der API VRPayment zu authentifizieren."
+		},
+		"cardTitle": "Anmeldedaten",
+		"spaceId": {
+		  "label": "Space ID",
+		  "tooltipText": "Die Space ID wird verwendet, um dieses Plugin mit der API VRPayment zu authentifizieren."
+		},
+		"userId": {
+		  "label": "User ID",
+		  "tooltipText": "Die Benutzer-ID wird verwendet, um dieses Plugin mit der VRPayment-API zu authentifizieren."
+		},
+		"button": {
+		  "description": "Klicken Sie auf diese Schaltfläche, um die VRPayment API zu testen",
+		  "label": "API Verbindung testen"
+		},
+		"alert": {
+		  "title": "API-Test",
+		  "successMessage": "Die Verbindung wurde erfolgreich getestet.",
+		  "errorMessage": "Die Verbindung ist fehlgeschlagen. Versuchen Sie es erneut."
+		}
+	  },
+	  "messageSaveSuccess": "VRPayment-Einstellungen wurden gespeichert.",
+	  "messageOrderDeliveryStateError": "VRPayment OrderDeliveryState konnte nicht gespeichert werden.",
+	  "messageOrderDeliveryStateUpdated": "VRPayment OrderDeliveryState wurde aktualisiert.",
+	  "messagePaymentMethodConfigurationError": "VRPayment PaymentMethodConfiguration konnte nicht gespeichert werden. Bitte überprüfen Sie Ihre Anmeldedaten.",
+	  "messagePaymentMethodConfigurationUpdated": "VRPayment PaymentMethodConfiguration wurde registriert.",
+	  "messageWebHookError": "VRPayment WebHook konnte nicht gespeichert werden. Bitte überprüfen Sie Ihre Zugangsdaten.",
+	  "messageWebHookUpdated": "VRPayment WebHook wurde aktualisiert.",
+	  "options": {
+		"cardTitle": "Optionen",
+		"emailEnabled": {
+		  "label": "Auftragsbestätigung per E-Mail senden",
+		  "tooltipText": "Wenn diese Einstellung aktiviert ist, erhalten Ihre Kunden eine E-Mail von Ihrem Geschäft, wenn die Zahlung ihrer Bestellung autorisiert ist."
+		},
+		"integration": {
+		  "label": "Integration",
+		  "options": {
+			"iframe": "Iframe",
+			"payment_page": "Payment Page"
+		  },
+		  "tooltipText": "Integration"
+		},
+		"lineItemConsistencyEnabled": {
+		  "label": "Konsistenz der Einzelposten",
+		  "tooltipText": "Wenn diese Option aktiviert ist, stimmen die Summen der Einzelposten in VRPaymentPayment immer mit der Shopware-Bestellsumme überein."
+		},
+		"spaceViewId": {
+		  "label": "Space View ID",
+		  "tooltipText": "Space View ID"
+		}
+	  },
+	  "save": "Speichern",
+	  "storefrontOptions": {
+		"cardTitle": "Storefront-Optionen",
+		"invoiceDownloadEnabled": {
+		  "label": "Rechnung Download",
+		  "tooltipText": "Wenn diese Einstellung aktiviert ist, können Ihre Kunden Auftragsrechnungen von VRPayment herunterladen."
+		}
+	  },
+	  "advancedOptions": {
+		"cardTitle": "Erweiterte-Optionen",
+		"webhooksUpdateEnabled": {
+			"label": "Webhooks-Update",
+			"tooltipText": "Wenn diese Einstellung aktiviert ist, wird das Webhook-Update ausgelöst, wenn Sie die Einstellungen speichern"
+		},
+	    "paymentsUpdateEnabled": {
+		  "label": "Payments-Update",
+		  "tooltipText": "Wenn diese Einstellung aktiviert ist, wird die Aktualisierung der Zahlungsmethoden ausgelöst, wenn Sie die Einstellungen speichern"
+	    }
+	  },
+	  "titleError": "Fehler",
+	  "titleSuccess": "Erfolg"
+	}
+  }
+}

src/Resources/app/administration/src/module/vrpayment-settings/snippet/en-GB.json

@@ -0,0 +1,105 @@
+{
+  "sw-privileges": {
+	"permissions": {
+	  "parents": {
+		"vrpayment": "VRPayment plugin"
+	  },
+	  "vrpayment": {
+		"label": "VRPayment permissions"
+	  }
+	}
+  },
+  "vrpayment-settings": {
+	"general": {
+	  "descriptionTextModule": "VRPayment settings",
+	  "mainMenuItemGeneral": "VRPayment"
+	},
+	"header": "VRPayment",
+	"messageNotBlank": "This value should not be blank.",
+	"salesChannelCard": {
+	  "button": {
+		"description": "Click this button to set VRPayment as default payment handler in the selected SalesChannel",
+		"label": "Set VRPayment as default payment handler"
+	  },
+	  "messageDefaultPaymentError": "VRPayment as default payment could not be set.",
+	  "messageDefaultPaymentUpdated": "VRPayment as default payment has been set."
+	},
+	"settingForm": {
+	  "credentials": {
+		"applicationKey": {
+		  "label": "Application Key",
+		  "tooltipText": "The Application Key is used to authenticate this plugin with the VRPayment API."
+		},
+		"cardTitle": "Credentials",
+		"spaceId": {
+		  "label": "Space ID",
+		  "tooltipText": "The space ID is used to authenticate this plugin with the VRPayment API."
+		},
+		"userId": {
+		  "label": "User ID",
+		  "tooltipText": "The user ID is used to authenticate this plugin with the VRPayment API."
+		},
+		"button": {
+		  "description": "Click this button to test the VRPayment API",
+		  "label": "API connection test"
+		},
+		"alert": {
+		  "title": "API Test",
+		  "successMessage": "The connection was successfully tested.",
+		  "errorMessage": "The connection was failed. Try it again."
+		}
+	  },
+	  "messageSaveSuccess": "VRPayment settings have been saved.",
+	  "messageOrderDeliveryStateError": "VRPayment OrderDeliveryState could not be saved.",
+	  "messageOrderDeliveryStateUpdated": "VRPayment OrderDeliveryState has been updated.",
+	  "messagePaymentMethodConfigurationError": "VRPayment PaymentMethodConfiguration could not be saved. Please check your credentials.",
+	  "messagePaymentMethodConfigurationUpdated": "VRPayment PaymentMethodConfiguration has been registered.",
+	  "messageWebHookError": "VRPayment WebHook could not be saved. Please check your credentials.",
+	  "messageWebHookUpdated": "VRPayment WebHook has been updated.",
+	  "options": {
+		"cardTitle": "Options",
+		"emailEnabled": {
+		  "label": "Send order confirmation email",
+		  "tooltipText": "If this setting is enabled your customers will receive an email from your store when their order payment is authorised"
+		},
+		"integration": {
+		  "label": "Integration",
+		  "options": {
+			"iframe": "Iframe",
+			"payment_page": "Payment Page"
+		  },
+		  "tooltipText": "Integration"
+		},
+		"lineItemConsistencyEnabled": {
+		  "label": "Line item consistency",
+		  "tooltipText": "If this option is enabled line item totals in VRPaymentPayment will always match Shopware order total"
+		},
+		"spaceViewId": {
+		  "label": "Space View ID",
+		  "tooltipText": "Space View ID"
+		}
+	  },
+	  "save": "Save",
+	  "storefrontOptions": {
+		"cardTitle": "Storefront Options",
+		"invoiceDownloadEnabled": {
+		  "label": "Invoice Download",
+		  "tooltipText": "If this setting is enabled your customers will be able to download order invoices from VRPayment"
+		}
+	  },
+	  "advancedOptions": {
+		"cardTitle": "Advanced Options",
+		"webhooksUpdateEnabled": {
+			"label": "Webhooks Update",
+			"tooltipText": "If this setting is enabled webhook update will be triggered when you save settings"
+		},
+	    "paymentsUpdateEnabled": {
+		  "label": "Payments Update",
+		  "tooltipText": "If this setting is enabled payment methods update will be triggered when you save settings"
+	    }
+	  },
+	  "titleError": "Error",
+	  "titleSuccess": "Success"
+	}
+  }
+}

src/Resources/app/administration/src/module/vrpayment-settings/snippet/fr-FR.json

@@ -0,0 +1,105 @@
+{
+	"sw-privileges": {
+		"permissions": {
+			"parents": {
+				"vrpayment": "VRPayment brancher"
+			},
+			"vrpayment": {
+				"label": "VRPayment autorisations"
+			}
+		}
+	},
+	"vrpayment-settings": {
+	  "general": {
+		"descriptionTextModule": "Paramètres de VRPayment",
+		"mainMenuItemGeneral": "VRPayment"
+	  },
+	  "header": "VRPayment",
+	  "messageNotBlank": "Cette valeur ne doit pas être vide.",
+	  "salesChannelCard": {
+		"button": {
+		  "description": "Cliquez sur ce bouton pour définir VRPayment comme gestionnaire de paiement par défaut dans le canal de vente sélectionné.",
+		  "label": "Définir VRPayment comme gestionnaire de paiement par défaut"
+		},
+		"messageDefaultPaymentError": "VRPayment comme paiement par défaut n'a pas pu être défini.",
+		"messageDefaultPaymentUpdated": "VRPayment comme paiement par défaut a été défini."
+	  },
+	  "settingForm": {
+		"credentials": {
+		  "applicationKey": {
+			"label": "Application Key",
+			"tooltipText": "La clé d'application est utilisée pour authentifier ce plugin avec l'API."
+		  },
+		  "cardTitle": "Références",
+		  "spaceId": {
+			"label": "Space ID",
+			"tooltipText": "L'ID de l'espace est utilisé pour authentifier ce plugin avec l'API VRPayment.."
+		  },
+		  "userId": {
+			"label": "User ID",
+			"tooltipText": "L'ID utilisateur est utilisé pour authentifier ce plugin avec l'API VRPayment."
+		  },
+		  "button": {
+			"description": "Cliquez sur ce bouton pour tester l'API VRPayment.",
+			"label": "Test de connexion à l'API"
+		  },
+		  "alert": {
+			"title": "Test API",
+			"successMessage": "La connexion a été testée avec succès.",
+			"errorMessage": "La connexion a échoué. Réessayez."
+		  }
+		},
+		"messageSaveSuccess": "Les paramètres de VRPayment ont été enregistrés.",
+		"messageOrderDeliveryStateError": "Les paramètres de VRPayment OrderDeliveryState n'ont pas pu être enregistrés.",
+		"messageOrderDeliveryStateUpdated": "VRPayment OrderDeliveryState a été mis à jour.",
+		"messagePaymentMethodConfigurationError": "VRPayment PaymentMethodConfiguration n'a pas pu être enregistré. Veuillez vérifier vos informations d'identification.",
+		"messagePaymentMethodConfigurationUpdated": "VRPayment PaymentMethodConfiguration a été enregistré.",
+		"messageWebHookError": "VRPayment WebHook n'a pas pu être enregistré. Veuillez vérifier vos informations d'identification.",
+		"messageWebHookUpdated": "VRPayment WebHook a été mis à jour.",
+		"options": {
+		  "cardTitle": "Options",
+		  "emailEnabled": {
+			"label": "Envoyer un e-mail de confirmation de commande",
+			"tooltipText": "If this setting is enabled your customers will receive an email from your store when their order payment is authorised"
+		  },
+		  "integration": {
+			"label": "Integration",
+			"options": {
+			  "iframe": "Iframe",
+			  "payment_page": "Page de paiement"
+			},
+			"tooltipText": "Integration"
+		  },
+		  "lineItemConsistencyEnabled": {
+			"label": "Cohérence des postes de ligne",
+			"tooltipText": "Si cette option est activée, les totaux des articles dans VRPaymentPayment correspondront toujours au total de la commande Shopware."
+		  },
+		  "spaceViewId": {
+			"label": "Space View ID",
+			"tooltipText": "Space View ID"
+		  }
+		},
+		"save": "Enregistrer",
+		"storefrontOptions": {
+		  "cardTitle": "Storefront Options",
+		  "invoiceDownloadEnabled": {
+			"label": "Téléchargement de facture",
+			"tooltipText": "Si ce paramètre est activé, vos clients pourront télécharger les factures de commande depuis VRPayment"
+		  }
+		},
+		"advancedOptions": {
+		  "cardTitle": "Options avancées",
+		  "webhooksUpdateEnabled": {
+			  "label": "Mise à jour des webhooks",
+			  "tooltipText": "Si ce paramètre est activé, la mise à jour des webhooks sera déclenchée lorsque vous enregistrerez les paramètres."
+		  },
+		  "paymentsUpdateEnabled": {
+			"label": "Mise à jour des paiements",
+			"tooltipText": "Si ce paramètre est activé, la mise à jour des méthodes de paiement sera déclenchée lorsque vous enregistrez les paramètres."
+		  }
+		},
+		"titleError": "Erreur",
+		"titleSuccess": "Succès"
+	  }
+	}
+  }

src/Resources/app/administration/src/module/vrpayment-settings/snippet/it-IT.json

@@ -0,0 +1,105 @@
+{
+  "sw-privileges": {
+	"permissions": {
+	  "parents": {
+		"vrpayment": "VRPayment brancher"
+	  },
+	  "vrpayment": {
+		"label": "VRPayment autorisations"
+	  }
+	}
+  },
+  "vrpayment-settings": {
+	"general": {
+	  "descriptionTextModule": "Impostazioni VRPayment",
+	  "mainMenuItemGeneral": "VRPayment"
+	},
+	"header": "VRPayment",
+	"messageNotBlank": "Questo valore non dovrebbe essere vuoto.",
+	"salesChannelCard": {
+	  "button": {
+		"description": "Fai clic su questo pulsante per impostare VRPayment come gestore di pagamento predefinito nel SalesChannel selezionato",
+		"label": "Imposta VRPayment come gestore di pagamento predefinito"
+	  },
+	  "messageDefaultPaymentError": "Non è stato possibile impostare VRPayment come pagamento predefinito.",
+	  "messageDefaultPaymentUpdated": "VRPayment come pagamento predefinito è stato impostato."
+	},
+	"settingForm": {
+	  "credentials": {
+		"applicationKey": {
+		  "label": "Chiave di applicazione",
+		  "tooltipText": "La chiave dell'applicazione è usata per autenticare questo plugin con l'API VRPayment."
+		},
+		"cardTitle": "Credenziali",
+		"spaceId": {
+		  "label": "ID spazio",
+		  "tooltipText": "L'ID dello spazio è usato per autenticare questo plugin con l'API VRPayment."
+		},
+		"userId": {
+		  "label": "ID utente",
+		  "tooltipText": "L'ID utente è usato per autenticare questo plugin con l'API VRPayment."
+		},
+		"button": {
+		  "description": "Fare clic su questo pulsante per testare l'API VRPayment.",
+		  "label": "Test di connessione API"
+		},
+		"alert": {
+		  "title": "Test API",
+		  "successMessage": "La connessione è stata testata con successo.",
+		  "errorMessage": "La connessione è fallita. Riprovare."
+		}
+	  },
+	  "messageSaveSuccess": "Le impostazioni di VRPayment sono state salvate.",
+	  "messageOrderDeliveryStateError": "VRPayment OrderDeliveryState non può essere salvato.",
+	  "messageOrderDeliveryStateUpdated": "VRPayment OrderDeliveryState è stato aggiornato.",
+	  "messagePaymentMethodConfigurationError": "VRPayment PaymentMethodConfiguration non può essere salvato. Per favore controlla le tue credenziali.",
+	  "messagePaymentMethodConfigurationUpdated": "VRPayment PaymentMethodConfiguration è stato registrato.",
+	  "messageWebHookError": "VRPayment WebHook non può essere salvato. Per favore controlla le tue credenziali.",
+	  "messageWebHookUpdated": "VRPayment WebHook è stato aggiornato.",
+	  "options": {
+		"cardTitle": "Opzioni",
+		"emailEnabled": {
+		  "label": "Invia email di conferma dell'ordine",
+		  "tooltipText": "Se questa impostazione è abilitata i tuoi clienti riceveranno un'email dal tuo negozio quando il pagamento del loro ordine sarà autorizzato"
+		},
+		"integration": {
+		  "label": "Integrazione",
+		  "options": {
+			"iframe": "Iframe",
+			"payment_page": "Pagina di pagamento"
+		  },
+		  "tooltipText": "Integrazione"
+		},
+		"lineItemConsistencyEnabled": {
+		  "label": "Coerenza dell'elemento linea",
+		  "tooltipText": "Se questa opzione è abilitata i totali degli articoli in VRPaymentPayment corrisponderanno sempre al totale dell'ordine Shopware"
+		},
+		"spaceViewId": {
+		  "label": "ID della vista spazio",
+		  "tooltipText": "ID della vista spaziale"
+		}
+	  },
+	  "save": "Salva",
+	  "storefrontOptions": {
+		"cardTitle": "Opzioni vetrina",
+		"invoiceDownloadEnabled": {
+		  "label": "Scaricamento fattura",
+		  "tooltipText": "Se questa impostazione è abilitata i tuoi clienti potranno scaricare le fatture degli ordini da VRPayment"
+		}
+	  },
+	  "advancedOptions": {
+		"cardTitle": "Opzioni avanzate",
+		"webhooksUpdateEnabled": {
+			"label": "Aggiornamento webhooks",
+			"tooltipText": "Se questa impostazione è abilitata l'aggiornamento dei webhook sarà attivato quando si salvano le impostazioni"
+		},
+	    "paymentsUpdateEnabled": {
+		  "label": "Aggiornamento pagamenti",
+		  "tooltipText": "Se questa impostazione è abilitata l'aggiornamento dei metodi di pagamento verrà attivato quando si salvano le impostazioni"
+	    }
+	  },
+	  "titleError": "Errore",
+	  "titleSuccess": "Successo"
+	}
+  }
+}

src/Resources/app/storefront/src/main.js

@@ -0,0 +1,16 @@
+// Import all necessary Storefront plugins and scss files
+import VRPaymentCheckoutPlugin
+    from './vrpayment-checkout-plugin/vrpayment-checkout-plugin.plugin';
+
+// Register them via the existing PluginManager
+const PluginManager = window.PluginManager;
+PluginManager.register(
+    'VRPaymentCheckoutPlugin',
+    VRPaymentCheckoutPlugin,
+    '[data-vrpayment-checkout-plugin]'
+);
+
+if (module.hot) {
+    // noinspection JSValidateTypes
+    module.hot.accept();
+}

src/Resources/app/storefront/src/scss/base.scss

@@ -0,0 +1,65 @@
+.vrpayment-payment {
+	.vrpayment-payment-panel {
+		position: relative;
+	}
+
+	/* Center the loader */
+	#vrpaymentLoader {
+		margin: 3em 0;
+
+		div {
+			left: 50%;
+			top: 50%;
+			width: 7.5em;
+			height: 7.5em;
+			margin: 0 auto;
+			border: 0.5em solid #f3f3f3;
+			border-radius: 50%;
+			border-top: 0.5em solid #008490;
+			animation: spin 2s linear infinite;
+			-moz-animation: spin 2s linear infinite;
+			-webkit-animation: spin 2s linear infinite;
+			-o-animation: spin 2s linear infinite;
+		}
+	}
+
+	#confirmOrderForm {
+		overflow: hidden;
+	}
+
+	@-moz-keyframes spin {
+		0% {
+			-webkit-transform: rotate(0deg);
+		}
+		100% {
+			-webkit-transform: rotate(360deg);
+		}
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@-o-keyframes spin {
+		0% {
+			-webkit-transform: rotate(0deg);
+		}
+		100% {
+			-webkit-transform: rotate(360deg);
+		}
+	}
+
+	@-webkit-keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+}

src/Resources/app/storefront/src/vrpayment-checkout-plugin/vrpayment-checkout-plugin.plugin.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-unresolved */
+
+// noinspection NpmUsedModulesInstalled
+import Plugin from 'src/plugin-system/plugin.class';
+import HttpClient from 'src/service/http-client.service';
+
+
+class VRPaymentCheckoutPlugin extends Plugin {
+
+    static options = {
+        payment_method_tabs: 'ul.vrpayment-payment-panel li',
+        payment_method_iframe_prefix: 'iframe_payment_method_',
+        payment_method_iframe_class: '.vrpayment-payment-iframe',
+        payment_method_handler_name: 'vrpayment_payment_handler',
+        payment_method_handler_prefix: 'vrpayment_handler_',
+        payment_method_handler_status: 'input[name="vrpayment_payment_handler_validation_status"]',
+        payment_form: 'confirmOrderForm',
+    };
+
+    init() {
+        // @TODO Move JS to Plugin
+        this._client = new HttpClient(window.accessKey);
+    }
+
+}
+
+export default VRPaymentCheckoutPlugin;

src/Resources/config/packages/monolog.yaml

@@ -0,0 +1,9 @@
+monolog:
+    channels: ['vrpayment_payment']
+    handlers:
+        security:
+            # log all messages (since debug is the lowest level)
+            level: debug
+            type: stream
+            path: '%kernel.logs_dir%/vrpayment.log'
+            channels: [ 'vrpayment_payment' ]

src/Resources/config/routes.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		xmlns="http://symfony.com/schema/routing"
+		xsi:schemaLocation="http://symfony.com/schema/routing
+        https://symfony.com/schema/routing/routing-1.0.xsd">
+
+	<import resource="../../Core/**/**/Controller/*Controller.php" type="attribute"/>
+</routes>

src/Resources/config/services.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" ?>
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://symfony.com/schema/dic/services" xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+	<imports>
+		<import resource="./services/core/api/configuration.xml"/>
+		<import resource="./services/core/api/order_delivery_state.xml"/>
+		<import resource="./services/core/api/payment_method_configuration.xml"/>
+		<import resource="./services/core/api/refund.xml"/>
+		<import resource="./services/core/api/transaction.xml"/>
+		<import resource="./services/core/api/webhooks.xml"/>
+		<import resource="./services/core/api/space.xml"/>
+
+		<import resource="./services/core/storefront/account.xml"/>
+		<import resource="./services/core/storefront/checkout.xml"/>
+
+		<import resource="./services/core/checkout.xml"/>
+		<import resource="./services/core/settings.xml"/>
+		<import resource="./services/core/util.xml"/>
+	</imports>
+	<services>
+	</services>
+</container>

src/Resources/config/services/core/api/configuration.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<service id="VRPaymentPayment\Core\Api\Configuration\Controller\ConfigurationController" public="true">
+			<argument type="service" id="VRPaymentPayment\Core\Util\PaymentMethodUtil"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Service\PaymentMethodConfigurationService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\WebHooks\Service\WebHooksService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\Space\Service\SpaceService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+		</service>
+	</services>
+
+</container>

src/Resources/config/services/core/api/order_delivery_state.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<!-- Commands -->
+		<service id="VRPaymentPayment\Core\Api\OrderDeliveryState\Command\OrderDeliveryStateCommand">
+			<argument type="service" id="VRPaymentPayment\Core\Api\OrderDeliveryState\Service\OrderDeliveryStateService"/>
+			<tag name="console.command"/>
+		</service>
+
+		<!-- Handlers -->
+		<service id="VRPaymentPayment\Core\Api\OrderDeliveryState\Handler\OrderDeliveryStateHandler" public="true">
+			<argument type="service" id="Shopware\Core\System\StateMachine\StateMachineRegistry"/>
+		</service>
+
+		<!-- Services -->
+		<service id="VRPaymentPayment\Core\Api\OrderDeliveryState\Service\OrderDeliveryStateService" public="true">
+			<argument type="service" id="service_container"/>
+		</service>
+	</services>
+</container>

src/Resources/config/services/core/api/payment_method_configuration.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<!-- Commands -->
+		<service id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Command\PaymentMethodConfigurationCommand">
+			<argument type="service" id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Service\PaymentMethodConfigurationService"/>
+			<tag name="console.command"/>
+		</service>
+
+		<service id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Command\PaymentMethodDefaultCommand">
+			<argument type="service" id="VRPaymentPayment\Core\Util\PaymentMethodUtil"/>
+			<tag name="console.command"/>
+		</service>
+
+		<!-- Entities -->
+		<service id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Entity\PaymentMethodConfigurationEntityDefinition">
+			<tag name="shopware.entity.definition" entity="vrpayment_payment_method_configuration"/>
+		</service>
+
+		<!-- Services -->
+		<service id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Service\PaymentMethodConfigurationService">
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<argument type="service" id="service_container"/>
+			<argument type="service" id="Shopware\Core\Content\ImportExport\DataAbstractionLayer\Serializer\Entity\MediaSerializer"/>
+			<argument type="service" id="Shopware\Core\Content\ImportExport\DataAbstractionLayer\Serializer\SerializerRegistry"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+	</services>
+</container>

src/Resources/config/services/core/api/refund.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+
+		<!-- Controllers -->
+		<service id="VRPaymentPayment\Core\Api\Refund\Controller\RefundController" public="true">
+			<argument type="service" id="VRPaymentPayment\Core\Api\Refund\Service\RefundService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+		</service>
+
+		<!-- Entities -->
+		<service id="VRPaymentPayment\Core\Api\Refund\Entity\RefundEntityDefinition">
+			<tag name="shopware.entity.definition" entity="vrpayment_refund"/>
+		</service>
+
+		<!-- Services -->
+		<service id="VRPaymentPayment\Core\Api\Refund\Service\RefundService">
+			<argument type="service" id="service_container"/>
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+
+	</services>
+
+</container>

src/Resources/config/services/core/api/space.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<!-- Commands -->
+		<!-- Controllers -->
+		<!-- Services -->
+		<service id="VRPaymentPayment\Core\Api\Space\Service\SpaceService" public="true">
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+	</services>
+
+</container>

src/Resources/config/services/core/api/transaction.xml

@@ -0,0 +1,68 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+
+		<!-- Controllers -->
+		<service id="VRPaymentPayment\Core\Api\Transaction\Controller\TransactionCompletionController"
+				 public="true">
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+		</service>
+
+		<service id="VRPaymentPayment\Core\Api\Transaction\Controller\TransactionController" public="true">
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+		</service>
+
+		<service id="VRPaymentPayment\Core\Api\Transaction\Controller\TransactionVoidController"
+				 public="true">
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+		</service>
+
+		<!-- Entities -->
+		<service id="VRPaymentPayment\Core\Api\Transaction\Entity\TransactionEntityDefinition">
+			<tag name="shopware.entity.definition" entity="vrpayment_transaction"/>
+		</service>
+
+		<!-- Services -->
+		<service id="VRPaymentPayment\Core\Api\Transaction\Service\OrderMailService">
+			<argument type="service" id="service_container"/>
+			<argument type="service" id="Shopware\Core\Content\Mail\Service\MailService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+
+		<service id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService">
+			<argument type="service" id="service_container"/>
+			<argument type="service" id="VRPaymentPayment\Core\Util\LocaleCodeProvider"/>
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+
+	</services>
+
+</container>

src/Resources/config/services/core/api/webhooks.xml

@@ -0,0 +1,84 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<!-- Commands -->
+		<service id="VRPaymentPayment\Core\Api\WebHooks\Command\WebHooksCommand">
+			<argument type="service" id="VRPaymentPayment\Core\Api\WebHooks\Service\WebHooksService"/>
+			<tag name="console.command"/>
+		</service>
+
+		<!-- Controllers -->
+		<service id="VRPaymentPayment\Core\Api\WebHooks\Controller\WebHookController" public="true">
+			<argument type="service" id="Doctrine\DBAL\Connection"/>
+			<argument type="service" id="Shopware\Core\Checkout\Order\Aggregate\OrderTransaction\OrderTransactionStateHandler"/>
+			<argument type="service" id="Shopware\Core\Checkout\Order\SalesChannel\OrderService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Service\PaymentMethodConfigurationService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\Refund\Service\RefundService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\OrderMailService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyManager"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+		</service>
+
+		<!-- Services -->
+		<service id="VRPaymentPayment\Core\Api\WebHooks\Service\WebHooksService" public="true">
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<argument type="service" id="router.default"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+
+        <!-- Strategies
+        Initializes the list of strategies for handling different types of webhook events.
+        Each strategy corresponds to a specific type of webhook event, ensuring that the appropriate
+        processing logic is applied based on the type of the incoming webhook request.
+        -->
+        <service id="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyManager" public="true">
+            <argument type="tagged_iterator" tag="vrpayment.webhook.strategy" />
+            <argument type="service" id="monolog.logger.vrpayment_payment"/>
+        </service>
+
+        <service id="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyBase" abstract="true">
+            <argument type="service" id="Doctrine\DBAL\Connection"/>
+            <argument type="service" id="Shopware\Core\Checkout\Order\Aggregate\OrderTransaction\OrderTransactionStateHandler"/>
+            <argument type="service" id="Shopware\Core\Checkout\Order\SalesChannel\OrderService"/>
+            <argument type="service" id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Service\PaymentMethodConfigurationService"/>
+            <argument type="service" id="VRPaymentPayment\Core\Api\Refund\Service\RefundService"/>
+            <argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\OrderMailService"/>
+            <argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService"/>
+            <argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+            <argument type="service" id="service_container"/>
+            <argument type="service" id="monolog.logger.vrpayment_payment"/>
+        </service>
+
+        <!-- extends the VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyBase strategy -->
+        <service id="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookTransactionStrategy"
+                 parent="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyBase" public="true">
+            <tag name="vrpayment.webhook.strategy"/>
+        </service>
+        <service id="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookTransactionInvoiceStrategy"
+                 parent="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyBase" public="true">
+            <tag name="vrpayment.webhook.strategy"/>
+        </service>
+        <service id="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookRefundStrategy"
+                 parent="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyBase" public="true">
+            <tag name="vrpayment.webhook.strategy"/>
+        </service>
+        <service id="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookPaymentMethodConfigurationStrategy"
+                 parent="VRPaymentPayment\Core\Api\WebHooks\Strategy\WebHookStrategyBase" public="true">
+            <tag name="vrpayment.webhook.strategy"/>
+        </service>
+    </services>
+
+</container>

src/Resources/config/services/core/checkout.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<service id="VRPaymentPayment\Core\Checkout\PaymentHandler\VRPaymentPaymentHandler">
+			<argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService"/>
+			<argument type="service" id="Shopware\Core\Checkout\Order\Aggregate\OrderTransaction\OrderTransactionStateHandler"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<tag name="shopware.payment.method.async"/>
+		</service>
+	</services>
+
+</container>

src/Resources/config/services/core/settings.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<!-- Commands -->
+		<service id="VRPaymentPayment\Core\Settings\Command\SettingsCommand">
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<tag name="console.command"/>
+		</service>
+		<service id="VRPaymentPayment\Core\Settings\Command\CreateMerchantCommand">
+			<argument type="service" id="user.repository"/>
+			<argument type="service" id="acl_role.repository"/>
+			<argument type="service" id="locale.repository"/>
+			<tag name="console.command"/>
+		</service>
+
+		<!-- Services -->
+		<service id="VRPaymentPayment\Core\Settings\Service\SettingsService">
+			<argument type="service" id="Shopware\Core\System\SystemConfig\SystemConfigService"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+	</services>
+
+</container>

src/Resources/config/services/core/storefront/account.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<!-- Controllers -->
+		<service id="VRPaymentPayment\Core\Storefront\Account\Controller\AccountOrderController" public="true">
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService"/>
+			<argument type="service" id="Symfony\Component\HttpFoundation\RequestStack"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+		</service>
+
+		<!-- Subscribers -->
+		<service id="VRPaymentPayment\Core\Storefront\Account\Subscriber\AccountOrderSubscriber">
+			<argument id="VRPaymentPayment\Core\Settings\Service\SettingsService" type="service"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<tag name="kernel.event_subscriber"/>
+		</service>
+
+	</services>
+
+</container>

src/Resources/config/services/core/storefront/checkout.xml

@@ -0,0 +1,45 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<!-- Controllers -->
+		<service id="VRPaymentPayment\Core\Storefront\Checkout\Controller\CheckoutController" public="true">
+			<argument type="service" id="Shopware\Core\Checkout\Cart\LineItemFactoryRegistry"/>
+			<argument type="service" id="Shopware\Core\Checkout\Cart\SalesChannel\CartService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Settings\Service\SettingsService"/>
+			<argument type="service" id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService"/>
+			<argument type="service" id="Shopware\Storefront\Page\GenericPageLoader"/>
+			<argument type="service" id="Shopware\Core\Checkout\Order\SalesChannel\OrderRoute"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<call method="setContainer">
+				<argument type="service" id="service_container"/>
+			</call>
+            <call method="setTwig">
+                <argument type="service" id="twig"/>
+            </call>
+		</service>
+
+		<!-- Subscribers -->
+		<service id="VRPaymentPayment\Core\Storefront\Checkout\Subscriber\CheckoutSubscriber">
+			<argument id="VRPaymentPayment\Core\Api\PaymentMethodConfiguration\Service\PaymentMethodConfigurationService" type="service"/>
+			<argument id="VRPaymentPayment\Core\Api\Transaction\Service\TransactionService" type="service"/>
+			<argument id="VRPaymentPayment\Core\Settings\Service\SettingsService" type="service"/>
+			<argument id="VRPaymentPayment\Core\Util\PaymentMethodUtil" type="service"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+			<tag name="kernel.event_subscriber"/>
+		</service>
+
+		<!-- Decorators -->
+		<service id="VRPaymentPayment\Core\Storefront\Framework\Cookie\VRPaymentCookieProvider" decorates="Shopware\Storefront\Framework\Cookie\CookieProviderInterface">
+			<argument type="service" id="VRPaymentPayment\Core\Storefront\Framework\Cookie\VRPaymentCookieProvider.inner"/>
+		</service>
+	</services>
+
+</container>

src/Resources/config/services/core/util.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" ?>
+
+<container xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		   xmlns="http://symfony.com/schema/dic/services"
+		   xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">
+
+	<services>
+		<service id="VRPaymentPayment\Core\Util\LocaleCodeProvider" public="true">
+			<argument type="service" id="service_container"/>
+			<argument type="service" id="Shopware\Core\Framework\Adapter\Translation\Translator"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+
+		<service id="VRPaymentPayment\Core\Util\PaymentMethodUtil">
+			<argument type="service" id="service_container"/>
+			<call method="setLogger">
+				<argument type="service" id="monolog.logger.vrpayment_payment"/>
+			</call>
+		</service>
+	</services>
+</container>

src/Resources/public/administration/css/v-r-payment-payment.css

@@ -0,0 +1,2 @@
+.sw-order-detail .sw-tabs{margin-top:40px}.sw-order-detail .sw-order-detail-base .sw-card-view__content{overflow-x:visible;overflow-y:visible}
+.vrpayment-order-detail__data{display:grid}.vrpayment-order-detail__heading{padding-top:15px}

src/Resources/public/storefront/js/app.js

@@ -0,0 +1,201 @@
+/* global window */
+// noinspection ThisExpressionReferencesGlobalObjectJS
+(function (window) {
+    /**
+     * VRPaymentCheckout
+     * @type {
+     *      {
+     *          payment_method_handler_name: string,
+     *          payment_method_iframe_class: string,
+     *          init: init,
+     *          validationCallBack: validationCallBack,
+     *          payment_method_handler_status: string,
+     *          submitPayment: (function(*): boolean),
+     *          payment_method_iframe_prefix: string,
+     *          payment_form_id: string,
+     *          payment_method_handler_prefix: string,
+     *          payment_method_tabs: string,
+     *          getIframe: (function(): boolean
+     *      }
+     * }
+     */
+    const VRPaymentCheckout = {
+        /**
+         * Variables
+         */
+        payment_panel_id: 'vrpayment-payment-panel',
+        payment_method_iframe_id: 'vrpayment-payment-iframe',
+        payment_method_handler_name: 'vrpayment_payment_handler',
+        payment_method_handler_status: 'input[name="vrpayment_payment_handler_validation_status"]',
+        payment_form_id: 'confirmOrderForm',
+        button_cancel_id: 'vrpaymentOrderCancel',
+        button_home_override: 'vrpaymentHomeLink',
+        loader_id: 'vrpaymentLoader',
+        checkout_url: null,
+        checkout_url_id: 'checkoutUrl',
+        cart_recreate_url: null,
+        cart_recreate_url_id: 'cartRecreateUrl',
+        handler: null,
+
+        /**
+         * Initialize plugin
+         */
+        init: function () {
+            VRPaymentCheckout.activateLoader(true);
+            this.checkout_url = document.getElementById(this.checkout_url_id).value;
+            this.cart_recreate_url = document.getElementById(this.cart_recreate_url_id).value;
+
+            document.getElementById(this.button_cancel_id).addEventListener('click', this.recreateCart, false);
+            document.getElementById(this.button_home_override).addEventListener('click', this.recreateCart, false);
+            document.getElementById(this.payment_form_id).addEventListener('submit', this.submitPayment, false);
+
+            VRPaymentCheckout.getIframe();
+        },
+
+        activateLoader: function (activate) {
+            const buttons = document.querySelectorAll('button');
+            if (activate) {
+                for (let i = 0; i < buttons.length; i++) {
+                    buttons[i].disabled = true;
+                }
+            } else {
+                for (let i = 0; i < buttons.length; i++) {
+                    buttons[i].disabled = false;
+                }
+            }
+        },
+
+        hideLoader: function () {
+            const loader = document.getElementById(VRPaymentCheckout.loader_id);
+            if (loader !== null && loader.parentNode !== null) {
+                loader.parentNode.removeChild(loader);
+            }
+            VRPaymentCheckout.activateLoader(false);
+        },
+
+        recreateCart: function (e) {
+            window.location.href = VRPaymentCheckout.cart_recreate_url;
+            e.preventDefault();
+        },
+
+        /**
+         * Submit form
+         *
+         * @param event
+         * @return {boolean}
+         */
+        submitPayment: function (event) {
+            VRPaymentCheckout.activateLoader(true);
+            VRPaymentCheckout.handler.validate();
+            event.preventDefault();
+            return false;
+        },
+
+        /**
+         * Get iframe
+         */
+        getIframe: function () {
+            const paymentPanel = document.getElementById(VRPaymentCheckout.payment_panel_id);
+            const paymentMethodConfigurationId = paymentPanel.dataset.id;
+            const iframeContainer = document.getElementById(VRPaymentCheckout.payment_method_iframe_id);
+
+            if (!VRPaymentCheckout.handler) { // iframe has not been loaded yet
+                // noinspection JSUnresolvedFunction
+                VRPaymentCheckout.handler = window.IframeCheckoutHandler(paymentMethodConfigurationId);
+                // noinspection JSUnresolvedFunction
+                VRPaymentCheckout.handler.setValidationCallback(function(validationResult){
+                    VRPaymentCheckout.hideErrors();
+                    VRPaymentCheckout.validationCallBack(validationResult);
+                });
+                VRPaymentCheckout.handler.setInitializeCallback(VRPaymentCheckout.hideLoader());
+                VRPaymentCheckout.handler.setHeightChangeCallback(function(height){
+                    if(height < 1){ // iframe has no fields
+                        VRPaymentCheckout.handler.submit();
+                    }
+                });
+                VRPaymentCheckout.handler.create(iframeContainer);
+                setTimeout(VRPaymentCheckout.hideLoader(), 10000);
+
+            }
+        },
+
+        /**
+         * validation callback
+         * @param validationResult
+         */
+        validationCallBack: function (validationResult) {
+            if (validationResult.success) {
+                document.querySelector(this.payment_method_handler_status).value = true;
+                VRPaymentCheckout.handler.submit();
+            } else {
+                document.body.scrollTop = 0;
+                document.documentElement.scrollTop = 0;
+
+                if (validationResult.errors) {
+                    VRPaymentCheckout.showErrors(validationResult.errors);
+                }
+                document.querySelector(this.payment_method_handler_status).value = false;
+                VRPaymentCheckout.activateLoader(false);
+            }
+        },
+
+        showErrors: function(errors) {
+            let alert = document.createElement('div');
+            alert.setAttribute('class', 'alert alert-danger');
+            alert.setAttribute('role', 'alert');
+            alert.setAttribute('id', 'vrpayment-errors');
+            document.getElementsByClassName('flashbags')[0].appendChild(alert);
+
+            let alertContentContainer = document.createElement('div');
+            alertContentContainer.setAttribute('class', 'alert-content-container');
+            alert.appendChild(alertContentContainer);
+
+            let alertContent = document.createElement('div');
+            alertContent.setAttribute('class', 'alert-content');
+            alertContentContainer.appendChild(alertContent);
+
+            if (errors.length > 1) {
+                let alertList = document.createElement('ul');
+                alertList.setAttribute('class', 'alert-list');
+                alertContent.appendChild(alertList);
+                for (let index = 0; index < errors.length; index++) {
+                    let alertListItem = document.createElement('li');
+                    alertListItem.innerHTML = errors[index];
+                    alertList.appendChild(alertListItem);
+                }
+            } else {
+                alertContent.innerHTML = errors[0];
+            }
+        },
+
+        hideErrors: function() {
+            let errorElement = document.getElementById('vrpayment-errors');
+            if (errorElement) {
+                errorElement.parentNode.removeChild(errorElement);
+            }
+        }
+    };
+
+    window.VRPaymentCheckout = VRPaymentCheckout;
+
+}(typeof window !== "undefined" ? window : this));
+
+/**
+ * Vanilla JS over JQuery
+ */
+window.addEventListener('load', function (e) {
+    VRPaymentCheckout.init();
+    window.history.pushState({}, document.title, VRPaymentCheckout.cart_recreate_url);
+    window.history.pushState({}, document.title, VRPaymentCheckout.checkout_url);
+}, false);
+
+/**
+ * This only works if the user has interacted with the page
+ * @link https://stackoverflow.com/questions/57339098/chrome-popstate-not-firing-on-back-button-if-no-user-interaction
+ */
+window.addEventListener('popstate', function (e) {
+    if (window.history.state == null) { // This means it's page load
+        return;
+    }
+    window.location.href = VRPaymentCheckout.cart_recreate_url;
+}, false);

src/Resources/snippet/storefront/vrpayment.de-DE.json

@@ -0,0 +1,27 @@
+{
+  "vrpayment": {
+    "account": {
+      "downloadInvoice": "Rechnung herunterladen"
+    },
+    "cookie": {
+      "name": "VRPayment-Zahlungen"
+    },
+    "deliveryState": {
+      "hold": "Halten",
+      "unhold": "Aufheben"
+    },
+    "payButton": "Zahlen",
+    "payHeader": "Bestellung bezahlen",
+    "payload": {
+      "adjustmentLineItem": "Anpassung Einzelposten",
+      "shipping": {
+        "lineItem": "Versand",
+        "name": "Versand"
+      },
+      "taxes": "Steuern"
+    },
+    "paymentMethod": {
+      "notAvailable": "Die Zahlungsmethode ist derzeit nicht verfügbar. Bitte wählen Sie eine andere Zahlungsmethode."
+    }
+  }
+}

src/Resources/snippet/storefront/vrpayment.en-GB.json

@@ -0,0 +1,27 @@
+{
+  "vrpayment": {
+    "account": {
+      "downloadInvoice": "Download Invoice"
+    },
+    "cookie": {
+      "name": "VRPayment Payment"
+    },
+    "deliveryState": {
+      "hold": "Hold",
+      "unhold": "Unhold"
+    },
+    "payButton": "Pay",
+    "payHeader": "Pay order",
+    "payload": {
+      "adjustmentLineItem": "Adjustment Line Item",
+      "shipping": {
+        "lineItem": "Shipping",
+        "name": "Shipping"
+      },
+      "taxes": "Taxes"
+    },
+    "paymentMethod": {
+      "notAvailable": "Payment method is not currently available. Please choose another payment method."
+    }
+  }
+}

src/Resources/snippet/storefront/vrpayment.fr-FR.json

@@ -0,0 +1,27 @@
+{
+  "vrpayment": {
+    "account": {
+      "downloadInvoice": "Télécharger la facture"
+    },
+    "cookie": {
+      "name": "VRPayment Paiement"
+    },
+    "deliveryState": {
+      "hold": "Tenir",
+      "unhold": "Détacher"
+    },
+    "payButton": "Payez",
+    "payHeader": "Commande de paiement",
+    "payload": {
+      "adjustmentLineItem": "Poste d'ajustement",
+      "shipping": {
+        "lineItem": "Expédition",
+        "name": "Expédition"
+      },
+      "taxes": "Taxes"
+    },
+    "paymentMethod": {
+      "notAvailable": "Le mode de paiement n'est pas disponible actuellement. Veuillez choisir un autre mode de paiement."
+    }
+  }
+}

src/Resources/snippet/storefront/vrpayment.it-IT.json

@@ -0,0 +1,27 @@
+{
+  "vrpayment": {
+    "account": {
+      "downloadInvoice": "Scaricare la fattura"
+    },
+    "cookie": {
+      "name": "Pagamento VRPayment"
+    },
+    "deliveryState": {
+      "hold": "Tenere",
+      "unhold": "Aprite"
+    },
+    "payButton": "Paga",
+    "payHeader": "Ordine di pagamento",
+    "payload": {
+      "adjustmentLineItem": "Voce di aggiustamento",
+      "shipping": {
+        "lineItem": "Spedizione",
+        "name": "Spedizione"
+      },
+      "taxes": "Tasse"
+    },
+    "paymentMethod": {
+      "notAvailable": "Il metodo di pagamento non è attualmente disponibile. Si prega di scegliere un altro metodo di pagamento."
+    }
+  }
+}

src/Resources/views/storefront/page/account/order-history/order-item.html.twig

@@ -0,0 +1,18 @@
+{% sw_extends '@Storefront/storefront/page/account/order-history/order-item.html.twig' %}
+{% block page_account_order_item_context_menu_content %}
+	{{ parent() }}
+	{% block vrpayment_page_account_order_item_context_menu_content %}
+		{% if page.extensions.vrpaymentSettings and page.extensions.vrpaymentSettings.storefrontInvoiceDownloadEnabled %}
+			{% set vrpaymentFormattedHandlerIdentifier = 'handler_vrpaymentpayment_vrpaymentpaymenthandler' %}
+			{% set orderPaymentState = order.transactions.last.stateMachineState.technicalName %}
+			{% set orderPaymentMethodFormattedHandlerIdentifier = order.transactions.last.paymentMethod.formattedHandlerIdentifier %}
+			{% if (vrpaymentFormattedHandlerIdentifier == orderPaymentMethodFormattedHandlerIdentifier) and (orderPaymentState in ['paid', 'refunded']) %}
+				<a class="order-table-header-context-menu-content-link"
+				   href="{{ path('frontend.vrpayment.account.order.download.invoice.document', { 'orderId': order.id }) }}"
+				   title="{{ "vrpayment.account.downloadInvoice"|trans|sw_sanitize }}">
+					{{ "vrpayment.account.downloadInvoice"|trans|sw_sanitize }}
+				</a>
+			{% endif %}
+		{% endif %}
+	{% endblock %}
+{% endblock %}

src/Resources/views/storefront/page/checkout/order/vrpayment.html.twig

@@ -0,0 +1,162 @@
+{% sw_extends '@Storefront/storefront/page/checkout/_page.html.twig' %}
+
+{% block base_header %}
+	{% sw_include '@VRPaymentPayment/storefront/page/checkout/order/vrpayment_header.html.twig' %}
+{% endblock %}
+
+{% block base_navigation %}{% endblock %}
+{% block base_body_classes %}vrpayment-payment is-act-confirmpage{% endblock %}
+
+{% block page_checkout_main_content %}
+	{% block page_checkout_pay %}
+		{% block page_checkout_confirm_header %}
+            <h1 class="confirm-main-header">
+                {{ "vrpayment.payHeader"|trans|sw_sanitize }}
+            </h1>
+        {% endblock %}
+
+		{# TODO: move this into a separate file #}
+		{% block page_checkout_confirm_address %}
+			<div class="row js-confirm-overview-addresses">
+				{% block page_checkout_confirm_address_shipping %}
+					{% if page.cart is defined %}
+						{% set lineItems = page.cart.lineItems %}
+					{% endif %}
+					{% if page.order is defined %}
+						{% set lineItems = page.order.lineItems %}
+					{% endif %}
+					{% if not page.isHideShippingAddress() %}
+						<div class="col-sm-6 card-col confirm-shipping-address">
+							<div class="card checkout-card">
+								<div class="card-body">
+									{% block page_checkout_confirm_address_shipping_title %}
+										<div class="card-title">
+											{{ "checkout.shippingAddressHeader"|trans|sw_sanitize }}
+										</div>
+									{% endblock %}
+
+									{% block page_checkout_confirm_address_shipping_data %}
+										<div class="confirm-address-shipping">
+											{% sw_include '@Storefront/storefront/component/address/address.html.twig' with {
+												'address': context.customer.defaultShippingAddress
+											} %}
+										</div>
+									{% endblock %}
+
+									{% block page_checkout_confirm_address_shipping_actions %}
+										<div class="card-actions" >
+											{% set addressEditorOptions = {
+												changeShipping: true,
+												addressId: context.customer.defaultShippingAddressId,
+											} %}
+										</div>
+									{% endblock %}
+								</div>
+							</div>
+						</div>
+					{% endif %}
+				{% endblock %}
+
+				{% block page_checkout_confirm_address_billing %}
+					<div class="col-sm-6 card-col confirm-billing-address">
+						<div class="card checkout-card">
+							<div class="card-body">
+								{% block page_checkout_confirm_address_billing_title %}
+									<div class="card-title">
+										{{ "checkout.billingAddressHeader"|trans|sw_sanitize }}
+									</div>
+								{% endblock %}
+
+								{% block page_checkout_confirm_address_billing_data %}
+									<div class="confirm-address-billing">
+										{% set shippingAddress = context.customer.activeShippingAddress %}
+										{% set billingAddress = context.customer.activeBillingAddress %}
+										{% if shippingAddress.id is defined and shippingAddress.id is same as(billingAddress.id) %}
+											{% block page_checkout_confirm_address_billing_data_equal %}
+												<p>
+													{{ "checkout.addressEqualText"|trans|sw_sanitize }}
+												</p>
+											{% endblock %}
+										{% else %}
+											{% sw_include '@Storefront/storefront/component/address/address.html.twig' with {
+												'address': context.customer.defaultBillingAddress
+											} %}
+										{% endif %}
+									</div>
+								{% endblock %}
+
+								{% block page_checkout_confirm_address_billing_actions %}
+									<div class="card-actions">
+										{% set addressEditorOptions = {
+											changeBilling: true,
+											addressId: context.customer.defaultBillingAddressId,
+										} %}
+									</div>
+								{% endblock %}
+							</div>
+						</div>
+					</div>
+				{% endblock %}
+			</div>
+		{% endblock %}
+
+		{% block page_checkout_pay_order_form %}
+			<div class="row finish-info">
+				<div class="col-md-12">
+					{% sw_include '@VRPaymentPayment/storefront/page/checkout/order/vrpayment_payment.html.twig' %}
+				</div>
+			</div>
+		{% endblock %}
+
+		{% block page_checkout_pay_product_table %}
+			<div class="card checkout-product-table">
+				<div class="card-body">
+					{% block page_checkout_pay_table_header %}
+						{% sw_include '@Storefront/storefront/component/checkout/cart-header.html.twig' %}
+					{% endblock %}
+
+					{% block page_checkout_pay_items %}
+						{% for lineItem in page.order.nestedLineItems %}
+							{% block page_checkout_pay_item %}
+								{% sw_include '@Storefront/storefront/component/line-item/line-item.html.twig' %}
+							{% endblock %}
+						{% endfor %}
+					{% endblock %}
+				</div>
+			</div>
+		{% endblock %}
+	{% endblock %}
+{% endblock %}
+
+{% block page_checkout_aside_actions %}
+    <div class="checkout-aside-action">
+        <form name="confirmOrderForm" id="confirmOrderForm">
+			<input type="hidden" id="cartRecreateUrl" value="{{ page.extensions.vRPaymentData.cartRecreateUrl }}" />
+			<input type="hidden" id="checkoutUrl" value="{{ page.extensions.vRPaymentData.checkoutUrl }}" />
+			<button id="confirmFormSubmit"
+					class="btn btn-primary btn-block btn-lg"
+					form="confirmOrderForm"
+					disabled
+					type="submit">
+				{{ "vrpayment.payButton"|trans|sw_sanitize }}
+			</button>
+        </form>
+    </div>
+{% endblock %}
+
+{% block base_footer %}
+	{% sw_include '@Storefront/storefront/layout/footer/footer-minimal.html.twig' %}
+{% endblock %}
+
+{% block base_body_script %}
+	{{ parent() }}
+	{% if page.extensions.vRPaymentData %}
+		{% if page.extensions.vRPaymentData.deviceJavascriptUrl %}
+			<script src="{{ page.extensions.vRPaymentData.deviceJavascriptUrl }}" async="async"></script>
+		{% endif %}
+		{% if page.extensions.vRPaymentData.javascriptUrl %}
+			<script src="{{ page.extensions.vRPaymentData.javascriptUrl }}"></script>
+		{% endif %}
+		<script type="text/javascript" src="{{ asset('bundles/vrpaymentpayment/storefront/js/app.js') }}"></script>
+	{% endif %}
+{% endblock %}

src/Resources/views/storefront/page/checkout/order/vrpayment_header.html.twig

@@ -0,0 +1,53 @@
+{% sw_extends '@Storefront/storefront/layout/header/header-minimal.html.twig' %}
+
+{% block layout_header_minimal_logo %}
+    <div class="col-6 col-md-4 header-minimal-logo">
+        {% block layout_header_logo_inner %}
+            <div class="header-logo-main">
+                {% block layout_header_logo_link %}
+                    <a class="header-logo-main-link"
+                    id="vrpaymentHomeLink"
+                    href="{{ path('frontend.home.page') }}"
+                    title="{{ "header.logoLink"|trans|striptags }}">
+                        {% block layout_header_logo_image %}
+                            <picture class="header-logo-picture">
+                                    {% block layout_header_logo_image_tablet %}
+                                    {% if theme_config('sw-logo-tablet') and theme_config('sw-logo-tablet') != theme_config('sw-logo-desktop') %}
+                                        <source srcset="{{ theme_config('sw-logo-tablet') |sw_encode_url }}"
+                                                media="(min-width: {{ theme_config('breakpoint.md') }}px) and (max-width: {{ theme_config('breakpoint.lg') - 1 }}px)">
+                                    {% endif %}
+                                {% endblock %}
+
+                                {% block layout_header_logo_image_mobile %}
+                                    {% if theme_config('sw-logo-mobile') and theme_config('sw-logo-mobile') != theme_config('sw-logo-desktop') %}
+                                        <source srcset="{{ theme_config('sw-logo-mobile') |sw_encode_url }}"
+                                                media="(max-width: {{ theme_config('breakpoint.md') - 1 }}px)">
+                                    {% endif %}
+                                {% endblock %}
+
+                                {% block layout_header_logo_image_default %}
+                                    {% if theme_config('sw-logo-desktop') %}
+                                        <img src="{{ theme_config('sw-logo-desktop') |sw_encode_url }}"
+                                            alt="{{ "header.logoLink"|trans|striptags }}"
+                                            class="img-fluid header-logo-main-img"/>
+                                    {% endif %}
+                                {% endblock %}
+                            </picture>
+                        {% endblock %}
+                    </a>
+                {% endblock %}
+            </div>
+        {% endblock %}
+    </div>
+{% endblock %}
+
+{% block layout_header_minimal_button %}
+    <div class="col-md-4 header-minimal-back-to-shop">
+        <button type="button"
+            id="vrpaymentOrderCancel"
+            class="btn btn-outline-primary header-minimal-back-to-shop-button"
+            title="{{ "checkout.finishButtonBackToShop"|trans|striptags }}">
+            {{ "checkout.finishButtonBackToShop"|trans|striptags }}
+        </button>
+    </div>
+{% endblock %}

src/Resources/views/storefront/page/checkout/order/vrpayment_payment.html.twig

@@ -0,0 +1,24 @@
+{% set vRPaymentData = page.extensions.vRPaymentData %}
+{% if vRPaymentData and vRPaymentData.integration %}
+	{% if vRPaymentData.integration in ['iframe'] %}
+		{% for transactionPossiblePaymentMethod in vRPaymentData.transactionPossiblePaymentMethods %}
+			<div class="card checkout-card">
+				<div class="card-body">
+					<div class="card-title">
+						{{ transactionPossiblePaymentMethod.getName() }}
+					</div>
+					<div id="vrpayment-payment-panel"
+						class="vrpayment-payment-panel"
+						data-vrpayment-checkout-plugin="true"
+						data-id="{{ transactionPossiblePaymentMethod.getId() }}">
+						<div id="vrpaymentLoader"><div></div></div>
+						<input value="false" type="hidden" name="vrpayment_payment_handler_validation_status"
+							form="confirmOrderForm">
+						<div id="vrpayment-payment-iframe"
+							class="vrpayment-payment-iframe"></div>
+					</div>
+				</div>
+			</div>
+		{% endfor %}
+	{% endif %}
+{% endif %}