In this article we want to share the experience of developing the Paypal payment module for the Vue Storefront project (VSF). PayPay is a very popular payment method that we’re going to be using on nearly all of our site builds so we decided to help start this integration.
In the first versions of VSF they introduced the concept of extensions for extending the functionality of Vue Storefront. In addition, it was possible to write extensions for the server side Api, which are installed from a separate repository.
But with this approach, it was not possible to override or inherit core modules or theme modules which makes core updates a little more difficult due to the amount of code moved into separate modules when changes are needed.
In the latest release (v1.6.0 VSF), such an opportunity appeared. The new concept of modules has allowed us to change the functionality of any core module, giving it custom features. The VSF modular approach is conceptually very similar to Magento2 modules. The developers of the approach draw an analogy with Lego Blocks for a better understanding of the meaning.
So we need to implement the Paypal payment method as a module for VSF. Integration with Paypal can be done in different ways: Client Side and Server Side. For the flexibility of additional features we’re using the Server Integration – Paypal credentials are securely stored in an Api config.
More info: https://developer.paypal.com/docs/checkout/how-to/server-integration/
To create a PayPal app use the link: https://developer.paypal.com/developer/applications/create
Next step – implement two endpoint in your server part on Paypal integration to VSF. Api of VSF has an extensions directory in place for these endpoints. Extensions are connected automatically and have a standard rest endpoint of /ext/.
For more info you can read this code: https://github.com/DivanteLtd/vue-storefront-api/blob/f6a546ac1a3b1d5691555ff0530c4f41df775343/src/api/index.js#L59.
For development purposes, Paypal provides a test sandbox gateway: https://api.sandbox.paypal.com
Now let’s configure the client part of the payment module.
Each VSF module can contain a standard structure, the only required file for which is index.js , an extended module signature:
From this, we can see that there are two hooks; beforeRegistration and afterRegistration . We will use the beforeRegistration hook to call an action with the addition of a payment method and transfer settings and load the Paypal interaction script:
The important point here is that we are trying to download the script only to the client side, since the hooks are processed on both the Client Side and Server Side. For this, we wrap the check in !Vue.prototype.$isServer .
Here the code vsfpaypal must match the code of the method of payment in Magento2. For these purposes, we implemented a simplified payment method for Magento2: https://github.com/develodesign/m2-paypal-payment
Next, we will implement the Paypal button component which, upon clicking, the standard Paypal pop-up window with the authorisation and payment functionality on the gateway will be called. For the button, we use the standard Vue approach, a feature here is only the nuance of the initialisation of the Paypal button, for this we use the standard hook mounted of the Vue component. This is the moment in the component life cycle when the DOM model is ready for calls, and it’s at this moment where we can render the Paypal button using its components:
To help with understanding this code, I have simplified this section. More details can be found here: https://github.com/develodesign/vsf-payment-paypal/blob/master/components/Button.vue
Another important point is that to interact with the Api we will use Vuex actions in the component, calling only dispatchers, for example store.dispatch('paypal/create', this.getTransactions()) . This makes the component’s Viewer code cleaner..
To simplify the integration into the topic, it was decided to provide only an example of this integration, with the possibility of replacing the standard Place Order button with the Paypal button, with everything being solved by means of Vue, here’s an example: https://github.com/develodesign/vsf-payment-paypal/blob/master/components/core/blocks/Checkout/OrderReview.vue
Let’s sort it out:
To check for the current selected payment method, we use the property this.$store.state.checkout.paymentDetails which we forward into the reactive object data and then do the check in the template.
I tried to describe in detail the process of creating modules for the Vue Storefront project, using the Paypal payment method as an example. I will be glad to answer questions and improve this material 🙂