PayPal Payment Magento 1 & 2 module for vue-storefront

Tested with VSF 1.12.x

This module is for those who want to use Magento 1 & 2's built in Paypal extension that uses the deprecated NVP/Soap api. Tested on Magento 1.9.x, 2.2.x and 2.3.x. This allows for backend Magento 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.

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"
  }
}

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)
}

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>

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>

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": ""
    },
    ...
  }

If the JSON object sent to the VSF API order is bigger than the body-parser limit, you get the exception PayloadTooLargeError. For this reason, it's strongly recommended to increase the bodyLimit value, especially if some PayPal orders fail.

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.

For Magento 1.9.x you need to manually apply this fix on the magento1-vsbridge in order to correctly works with this module: Fix Create order.

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' }"