{"id":28245107,"url":"https://github.com/multisafepay/vsf-payment-multisafepay","last_synced_at":"2025-09-21T18:51:26.101Z","repository":{"id":46087431,"uuid":"250195257","full_name":"MultiSafepay/vsf-payment-multisafepay","owner":"MultiSafepay","description":"MultiSafepay Payment Service module for Vue Storefront","archived":true,"fork":false,"pushed_at":"2021-11-15T13:44:18.000Z","size":23,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-14T20:09:49.485Z","etag":null,"topics":["multisafepay","vsf-payment-multisafepay","vuejs","vuestorefront"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MultiSafepay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-26T07:57:39.000Z","updated_at":"2025-04-25T14:15:49.000Z","dependencies_parsed_at":"2022-07-24T23:16:10.497Z","dependency_job_id":null,"html_url":"https://github.com/MultiSafepay/vsf-payment-multisafepay","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MultiSafepay/vsf-payment-multisafepay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiSafepay%2Fvsf-payment-multisafepay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiSafepay%2Fvsf-payment-multisafepay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiSafepay%2Fvsf-payment-multisafepay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiSafepay%2Fvsf-payment-multisafepay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MultiSafepay","download_url":"https://codeload.github.com/MultiSafepay/vsf-payment-multisafepay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiSafepay%2Fvsf-payment-multisafepay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276289612,"owners_count":25616954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-21T02:00:07.055Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["multisafepay","vsf-payment-multisafepay","vuejs","vuestorefront"],"created_at":"2025-05-19T08:15:02.546Z","updated_at":"2025-09-21T18:51:26.049Z","avatar_url":"https://github.com/MultiSafepay.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://www.multisafepay.com/img/multisafepaylogo.svg\" width=\"400px\" position=\"center\"\u003e\n\u003c/p\u003e\n\n# MultiSafepay Payment Service module for Vue Storefront v1.11.1\n\nMultiSafepay Payments API integration for Vue Storefront with Magento 2.\n\n## About MultiSafepay\n\nMultiSafepay is a collecting payment service provider which means we take care of the agreements, technical details, and payment collection for each payment method. You can start selling online today and manage all your transactions from one place.\n\n![order-status](https://user-images.githubusercontent.com/54272995/77526252-91dddd00-6e8a-11ea-8985-b916a3d067f9.png)\n\nOrder status page after the customer has successfullly paid.\n\n# Requirements\n\nTo use this module, you need a MultiSafepay account, or [create a test account](https://testmerchant.multisafepay.com/signup).\n\n# Installation guide\n\nTo install this module in Vue Storefront, follow these steps:\n\n1. Make sure you meet the [requirements for your Magento 2 installation](https://github.com/MultiSafepay/Magento2Msp), and then follow the installation steps in the README file.\n\n2. Add the Vue Storefront API extension we created for the [MultiSafepay Payments API](https://github.com/MultiSafepay/vsf-multisafepay-service-api), and then  follow the installation steps in the README file.\n\n3. To integrate this module into Vue Storefront, clone this git repository from within your vue-storefront root folder:\n\n```shell\ngit clone git@github.com:MultiSafepay/vsf-payment-multisafepay.git src/modules/vsf-payment-multisafepay\n```\n\n# Register the module \n\n1. Open `src/modules/client.ts`\n\n2. Add:\n\n```ts\n...\nimport { MultiSafePayPaymentModule } from './vsf-payment-multisafepay'\n```\n\n3. Make sure you also register the module in registerClientModules:\n\n```js\nregisterModule(MultiSafePayPaymentModule);\n```\n\n# Add the configuration settings\n\n1. Add the config properties in `config/local.json`\n\n```json\n\"paymentService\": {\n\"endpoint\": \"http://localhost:8080/api/ext/vsf-multisafepay-service-api\"\n},\n```\n\n2. Make sure you set the correct location to your API and the routes to the CMS pages in case of an error or an invalid payment status check.\n\n# Integrate the theme\n\nWe used the default Vue Storefront theme. If using your own theme, make the following changes. We created isolated components to separate the logic from VSF core you also to make a few small changes on the core.\n\n1. Copy and paste the checkout page as we change one v-show condition of the thank you page to v-if\n\n```html\n\u003cthank-you-page v-if=\"isThankYouPage\" /\u003e\n```\n\n2. As we redirect to the MultiSafepay gateweay after placing the order, VSF shows the default thank you page so copy and paste the file to add a notification on the created method. \n\n```js\ncreated(){\n    this.$bus.$emit('notification-progress-start', [this.$t('Redirecting to MultiSafepay'), '...'].join(''))\n  },\n```\n\n3. To display Multisafepay payment methods, add the `PaymentMethods` component into the `Payment checkout component` in one of the following two ways:\n\n- Copy and paste the Payment Component from this module to your default theme:\n\n**Or**\n\n- Remove the following code from the Payment Component (core/blocks/Checkout/Payment.vue):\n\n```html\n\u003cdiv v-for=\"(method, index) in paymentMethods\" :key=\"index\" class=\"col-md-6\"\u003e\n\t\u003clabel class=\"radioStyled\"\u003e\n\t\t{{ method.title ? method.title : method.name }}\n\t\t\u003cinput\n\t\t\ttype=\"radio\"\n\t\t\t:value=\"method.code\"\n\t\t\tname=\"payment-method\"\n\t\t\tv-model=\"payment.paymentMethod\"\n\t\t\t@change=\"$v.payment.paymentMethod.$touch(); changePaymentMethod();\"\n\t\t/\u003e\n\t\t\u003cspan class=\"checkmark\" /\u003e\n\t\u003c/label\u003e\n\u003c/div\u003e\n```\n\nAnd adding the following:\n\n```html\n\u003cpayment-methods\n\t:payment-methods=\"this.paymentMethods\"\n\t:payment=\"this.payment\"\n\t:validate=\"$v.payment\"\n\t:change-payment-method=\"changePaymentMethod\"\n\u003e\u003c/payment-methods\u003e\n```\n\n4. Import the component and add it to the component section:\n\n```js\nimport PaymentMethods from \"src/modules/vsf-payment-multisafepay/components/PaymentMethods\";\n```\n\n![order-review](https://user-images.githubusercontent.com/54272995/77530313-69a5ac80-6e91-11ea-9999-b1b329fd61e7.png)\n\n# Manage payment methods\n\nTo enable payment methods in your Vue Storefront checkout, follow these steps:\n\n1. In your MultiSafepay account, enable the payment method. See the relevant [payment method page](/payments/methods/).\n2. In your Magento 2 backend, in the MultiSafepay Payments for Magento 2 module, enable the payment method.\n3. Add the payment method to the `payment_methods_mapping` property in the `order property` config.\n\nExample:\n\n```json\n...\n\"orders\": {\n    \"payment_methods_mapping\": {\n      \"MAESTRO\": \"maestro\",\n      \"BANKTRANS\": \"banktrans\",\n      \"DIRECTBANK\": \"directbank\",\n      \"GIROPAY\": \"giropay\",\n      \"MISTERCASH\": \"mistercash\",\n      \"EPS\": \"eps\",\n      \"IDEAL\": \"ideal\",\n      \"TRUSTLY\": \"trustly\",\n      \"MASTERCARD\": \"mastercard\",\n      \"VISA\": \"visa\"\n    },\n}\n\n```\n\nTo display the logo of each payment method, copy and paste the following code below `payment_methods_mapping_img`:\n\n```json\n    \"payment_methods_mapping_img\": {\n      \"MAESTRO\": \"maestro\",\n      \"BANKTRANS\": \"banktransfer\",\n      \"DIRECTBANK\": \"sofortbank\",\n      \"GIROPAY\": \"giropay\",\n      \"MISTERCASH\": \"mistercash\",\n      \"EPS\": \"eps\",\n      \"IDEAL\": \"ideal\",\n      \"TRUSTLY\": \"trustly\",\n      \"MASTERCARD\": \"master\",\n      \"VISA\": \"visa\"\n    },\n```\n\n![payment-methods](https://user-images.githubusercontent.com/54272995/77526212-7ecb0d00-6e8a-11ea-8e9b-4d5fd9376c06.png)\n\n# Note\n\nIt's not yet possible to pay for orders placed when the user is offline.\n\n# Support\n\nFor support or questions, create an issue in this repository or email the Integration Team at \u003ca href=\"mailto:integrationt@multisafepay.com\"\u003eintegration@multisafepay.com\u003c/a\u003e\n\n# Thanks to Lakefields\n\nThanks to Lakefields as this project is based on their [integration](https://github.com/Lakefields/vsf-payment-service). :heart:\n\n# License\n\n[MIT License](https://github.com/MultiSafepay/vsf-payment-multisafepay/blob/master/LICENSE)\n\n# Join us\n\nAre you a developer interested in working at MultiSafepay? Check out our [job openings](https://www.multisafepay.com/careers/#jobopenings) and feel free to get in touch.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultisafepay%2Fvsf-payment-multisafepay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultisafepay%2Fvsf-payment-multisafepay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultisafepay%2Fvsf-payment-multisafepay/lists"}