payment-frontend v1.0.6

Payment frontend helper

This package is specifically to used with laravel backed package in order to handler frontend complecations using this package only and actual consumer of this package will only need to call method respectively with proper configurations.

Installation

-- need to update

Configuration

Setting up .env variables, as of now we are required these 3 variable to be set as environment variable

STRIPE_PUBLIC - publishable key provided from the stripe.
THANKYOU_PAGE - page to be display after completion of payment (successfully or unsuccessfully)
BACKEND_API - api end point where your server part will communcate with this package.

to keep all these variable available in the nuxt application you can add the following into nuxt.config.js

publicRuntimeConfig: {
    STRIPE_PUBLIC: process.env.STRIPE_PUBLIC,
    THANKYOU_PAGE: process.env.THANKYOU_PAGE,
    BACKEND_API: process.env.BACKEND_API
},

the following is recommended axios config for nuxt app.

axios: {
    baseURL: process.env.BACKEND_API,
    proxyHeaders: false,
    credentials: false
}

Dependancies

• stripe
• axios

stripe

make sure your stripe script <script src="https://js.stripe.com/v3/"></script> (ref: https://stripe.com/docs/js/including)

• Incase of nuxt - you can add it in the nuxt config like this

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    ...
    script: [
      { src: "https://js.stripe.com/v3/" }
    ]
  },
  ...
}

This dependancy we could not extract out from the application and keep the to scoped in the package level, so we have to keep it this way.

Honestly I'm not very happy with this type of dependacy but I don't get any better way.

axios

for dependancy on axios we allow to pass the instance of axios while setting up payment object. i.e.

new Payment(settings, axios)

here the second parameter is axios dependancy,

We implemented it this way to keep your existing settings as it is and you just need to pass the dependacy to use it for your server calls.

Use

basically we need to follow 2 steps to make payment,

1. Initialisation
2. calling pay method

Initialisation

To initialise payment you need to create new Payment object and store it as you needed. (you may store it into the vue store or if you are using it in a single page then you can also store it in the page level variable.)

here you only need to take care of initCard("#card") method to be call if you are using card payment. mode detail in Card Payment section

const payment = new Payment({
    key: this.$config.STRIPE_PUBLIC,
    api: this.$config.BACKEND_API,
    callback: this.$config.THANKYOU_PAGE
}, this.$axios);

You can also store this payment object to page level variable.

this.payment = payment

Alipay Payment

this.payment.pay({
    payment_method: "alipay",
    amount: 1999, // here the amount will be in the smallest unit of currency.
    currency: "eur",
    additional_info: {
        // ...
        // Whatever you want in the backend event handler you can add them here
        // ...
    }
});

Wechat Pay Payment

this.payment.pay({
    payment_method: "wechat_pay",
    amount: 1999, // here the amount will be in the smallest unit of currency.
    currency: "eur",
    additional_info: {
        // ...
        // Whatever you want in the backend event handler you can add them here
        // ...
    }
});

Card Payment

when using this payment method make sure you are calling initCard("#card") method at the time of mounting the component / page.

initCard method accepts one string argument which should be id of an empty div (where you expect to load details of card.) as shown in bellow.

<div id="card"></div>
<button @click="pay"> Pay <button>

mounted() {
    this.payment = new Payment(...) // Create payment object
    this.payment.initCard("#card")
},
methods: {
    pay() {
        this.payment.pay({
            payment_method: "card",
            amount: 1999, // here the amount will be in the smallest unit of currency.
            currency: "eur",
            additional_info: {
                // ...
                // Whatever you want in the backend event handler you can add them here
                // ...
            }
        })
    }
}

In case you want to show card input only when card method is selected then it's adviced to use v-show to make them visible and invisible, this will keep your content (card initialization from stripe side) safe.

Multibanco Payment

this.payment.pay({
    payment_method: "multibanco",
    amount: 1999, // here the amount will be in the smallest unit of currency.
    currency: "eur",
    name: "Harikrushna Adiecha",
    email: "adiechahari@gmail.com",
    additional_info: {
        // ...
        // Whatever you want in the backend event handler you can add them here
        // ...
    }
});

Bank Transfer / Manual Payment / Cash payment

Here we consider this method as cash payment. that can include bank transfer or any kind of manual fund transfer. in this case you supposed to be acknoledge from the frontend.

Initialise Payment

this.payment.pay({
    payment_method: "cash",
    amount: 1999, // here the amount will be in the smallest unit of currency.
    currency: "eur",
    additional_info: {
        // ...
        // Whatever you want in the backend event handler you can add them here
        // ...
    }
});

Acknoledge Payment

This part must be done from the admin side. make sure this function call will be done from the admin side.

this.payment.ack(123) // here the argument will be id of payment

when this method get called it will be considered to be successful payment.

To get all transaction check out get method

Paypal Payment

--- not yet implemented.

get method

here we expose an function call that will actually call backend api to get all the transactions.

let pay = new Payment(...) // Create payment object
query = {payment_method: "cash"}
pay.get(query)