PayPal Payment module for vue-storefront, by Develo Design.

By hand (preferer):

$ git clone [email protected]:develodesign/vsf-payment-paypal.git ./vue-storefront/src/modules/paypal

"paypal": {
  "clientId": "",
  "addMethod": "true",
  "endpoint": {
    "complete": "http://localhost:8080/api/ext/paypal/complete"
  }
}

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

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

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

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

import PaypalButton from 'src/modules/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 === 'vsfpaypal'"/>
<button-full
  v-else
  @click.native="placeOrder"
  data-testid="orderReviewSubmit"
  class="place-order-btn"
  :disabled="$v.orderReview.$invalid"
>
  {{ $t('Place the order') }}
</button-full>

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

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

This API extension execute payment to PayPal gateway. It use develodesign/m2-paypal-payment The custom Paypal payment method for Magento2 composer module so you have to install it in your Magento instance.

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

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