Cookie Consent by Free Privacy Policy Generator Update cookies preferences

Developing a Vue Storefront 1.6 module

Motivation

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. 

Development

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.
More: https://divanteltd.github.io/vue-storefront/guide/modules/introduction.html

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/

Payment

Out of the box, Paypal provides a JavaScript implementation for interacting with the payment gateway. We will use this script as a starting point for interaction with the Paypal gateway https://www.paypalobjects.com/api/checkout.js for frontend part. You need create the PayPal Client IDs .

To create a PayPal app use the link: https://developer.paypal.com/developer/applications/create

Server part

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

Client part

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:

code snippet

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:

code snippet

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:

code snippet

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:

code snippet

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.

Conclusion…

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 🙂

Need more help from experienced specialists?


...
Luke

share:

Ready to start your next project?

See how we can help you accelerate your business