Skip to content
Paypal payment module for Vue Storefront
Branch: master
Clone or download
dimasch Merge pull request #86 from develodesign/dimasch-patch-9
Check on create payment errors.
Latest commit 6e506f4 Mar 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
API/paypal Update index.js Mar 10, 2019
components
docs
hooks #75 Update registration hook to 1.8.0 version Mar 1, 2019
store Add support for UNRELEASED 1.8.0 version Feb 5, 2019
types
LICENSE
README.md Update README.md Feb 5, 2019
index.ts Corrected import accordance by core changes. Nov 29, 2018
package.json Bump to 0.2.0 version. Nov 21, 2018

README.md

Vue Storefront PayPal Payment Extension

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

Demo

Installation:

By hand (preferer):

$ git clone git@github.com:develodesign/vsf-payment-paypal.git ./vue-storefront/src/modules/paypal

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

"paypal": {
  "env": "sandbox",
  "endpoint": {
    "create": "http://localhost:8080/api/ext/payment-paypal/create",
    "execute": "http://localhost:8080/api/ext/payment-paypal/execute"
  }
}

Registration the Paypal module

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

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

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

PayPal payment API extension

Install additional extension for vue-storefront-api:

$ cp -f ./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:

  "extensions": {
    "mailchimp": {
      ...
    },
    "paypal": {
      "api": "https://api.sandbox.paypal.com",
      "client": "",
      "secret": ""
    }
  }

Paypal payment Checkout Review

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
  },
  ...
  data () {
    return {
      payment: 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>

Magento2 integration

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.

Customization

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"
  }
}
You can’t perform that action at this time.