Paypal Payment Module for Vue Storefront

Paypal Payment Module for Vue Storefront

This is the PayPal Payment module for Vue Storefront Paypal payment module for Vue Storefront PayPal Payment Magento 2 module for vue-storefront

This is the PayPal Payment module for Vue Storefront

PayPal Payment Magento 2 module for vue-storefront

default

Tested with VSF 1.12.x

This module is for those who want to use Magento 2's built in Paypal extension that uses the deprecated NVP/Soap api. Tested on Magento 2.2.x and 2.3.x. This allows for backend Magento2 management of the Order lifecycle.

This module can also be used with the newer API calls easily, as address and cart items are set to be transferred to Paypal SmartButton.

Installation

By hand (preferer):

$ git clone [email protected]:develodesign/vsf-payment-paypal.git ./vue-storefront/src/modules/paypal
"paypal": {
  "clientId": "",
  "endpoint": {
    "complete": "/api/ext/paypal/complete",
    "setExpressCheckout": "/api/ext/paypal/setExpressCheckout"
  }
}

Registration the Paypal module

Let's edit config/modules.ts If you use the default theme, the module registration lives here: ./src/themes/modules/client.ts. With Capybara, it's here: ./src/themes/capybara/config/modules.ts.

...
import { PaymentPaypalModule } from './paypal'; // Default theme
import { PaymentPaypalModule } from '../../../modules/paypal'; // Capybara theme

export function registerClientModules () {
  ...
  registerModule(PaymentPaypalModule)
}

Integration to the Default VSF theme (vsf-default)

Add the following to your component components/core/blocks/Checkout/OrderReview.vue:

import PaypalButton from '@develodesign/vsf-payment-paypal/components/Button'

export default {
  components: {
    ...
    PaypalButton
  },
  ...
  computed: {
    payment () {
      return this.$store.state.checkout.paymentDetails
    }
  }

And add the paypal button before button-full component:

<paypal-button v-if="payment.paymentMethod === 'paypal_express'"/>
<button-full
  v-else
  @click.native="placeOrder"
  data-testid="orderReviewSubmit"
  class="place-order-btn"
  :disabled="$v.orderReview.$invalid"
>
  {{ $t('Place the order') }}
</button-full>

Integration to the Capybara theme (vsf-capybara)

capybara

Add the following to your component components/organisms/o-confirm-order.vue:

import PaypalButton from '@develodesign/vsf-payment-paypal/components/Button'

export default {
  components: {
    ...
    PaypalButton
  }

* The computed paymentDetails in o-confirm-order.vue available out of the box in Capybara theme. *

And add the Paypal component before place order button. Don't forget to add the v-else condition for the place order SfButton component.

<paypal-button v-if="paymentDetails.paymentMethod === 'paypal_express' && !$v.orderReview.$invalid"/>
<SfButton
  v-else
  class="sf-button--full-width actions__button"
  :disabled="$v.orderReview.$invalid || !productsInCart.length"
  @click="placeOrder"
>
  {{ $t("Place the order") }}
</SfButton>

PayPal payment API extension

Install extension to vue-storefront-api:

yarn add -W @paypal/checkout-server-sdk paypal-nvp-api
$ cp -fr src/modules/paypal/api/paypal ../vue-storefront-api/src/api/extensions/

Go to api config ./vue-storefront-api/config/local.json and register the Paypal Api extension:

"registeredExtensions": [
    ...
    "paypal"
]

And add the paypal settings to extensions key:

Add the following also to your config/local.json need set paypal.env to sandbox or live.

  "extensions": {
    "paypal": {
      "env": "sandbox",
      "clientId": "",
      "secret": "",
      "username": "",
      "password": "",
      "signature": ""
    },
    ...
  }

Magento2 integration

Turn on Paypal Express and provide the API credentials using the built in Paypal module. Enable only Express Checkout.

Other Paypal methods are not supported or tested right now.

Customization

Also we can use paypal.style option for more customizable PayPal button view. For more info PayPal.

In OrderReview.vue, the button takes prop styling

  <paypal-button :styling="{ color: 'black' }"

Download Details:

Author: develodesign

Source Code: https://github.com/develodesign/vsf-payment-paypal

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.