This is the PayPal Payment module for Vue Storefront

PayPal Payment Magento 2 module for vue-storefront

Tested with 1.10.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. This allows for backend Magento2 management of the Order lifecycle.

Note this only tested on US and using region_code, region_id, and region modifications on the cart/order syncTotals functions and in the Checkout Addresses

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": "http://localhost:8080/api/ext/paypal/complete",
    "setExpressCheckout": "http://localhost:8080/api/ext/paypal/setExpressCheckout"
  }
}

Registration the Paypal module

Open in you editor ./src/modules/index.ts

...
import { Paypal } from './paypal';

export const registerModules: VueStorefrontModule[] = [
  ...,
  Paypal
]

Paypal payment Checkout Review

Under your theme components/core/blocks/Checkout/OrderReview.vue add the following import to your script

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

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

And to you template add the paypal button before button-full:

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

PayPal payment API extension

Setup dependency to api: cd ../vue-storefront-api yarn add -W @paypal/checkout-server-sdk yarn add -W paypal-nvp-api

Install extension to vue-storefront-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 Button.vue, the button takes prop styling

"style": {
  "size": "small",
  "color": "gold",
  "shape": "pill"
}