npm package: @koomipay/vue2
Description: Koomipay vue2 components
Author: Novitee Team
Latest version: 1.3.0

# @koomipay/vue

Vue components for
[Koomipay B2B payment service][koomipay-portal]

## Getting started

- [Try live demo here][live-demo]

## How to use

First, install [@koomipay/vue2][koomipay-npm] using the following command.

```sh
npm install @koomipay/vue2 --save
```

### CSS

Import koomipay.css file to your Vue project to properly display the checkout component

The file is located at 
```js
@koomipay/vue2/dist/koomipay.css
```

### Create Koomipay Client

To create a new Koomipay client, use the `createClient()` method from the package, and pass in the **Checkout API Key** getting from [Koomipay Portal][koomipay-portal]

```jsx
import { createClient } from "@koomipay/vue2"

const config = useRuntimeConfig()
const koomipayClient = createClient({ apiKey: config.public.apiKey })
```

### Get available Payment Methods

Then get all the available payment methods for your Merchant Account by calling the `getPaymentMethods()` method

```jsx
const result = await koomipayClient.getPaymentMethods({
  amount: { currency: "SGD", price: 100 },
  countryCode: "SG",
})
```

### Checkout

Depending on your scenario, you can use either `checkout()` method (normal checkout without **capturing**) or `instantCheckout()`, which will trigger a capturing immediately after checkout

```jsx
const response = await koomipayClient.instantCheckout({
  orderID: "Order #01",
  paymentMethod: paymentData,
  amount: {
    currency: "SGD",
    price: 100,
  },
  items: [
    {
      productID: "product_01",
      productName: "Product 01",
      quantity: 1,
      price: 100,
    },
  ],
  returnUrl: document.location.origin + "/api/checkout/callback",
})
```

Remember to check the response for 3Ds redirect url

```jsx
if (response?.data?.success) {
  const { data } = response.data
  if (data.resultCode === "Authorised") {
    window.location.href = "/checkout/success"
  } else if (data.resultCode === "RedirectShopper") {
    window.open(data.redirect3ds)
  }
}
```

### Full example

Before you setup the checkout page, you should get api key from [Koomipay][koomipay-portal]

```vue
<script>
import { CheckoutContainer, createClient } from "@koomipay/vue2"

export default {
  name: "Checkout",
  data() {
    const koomipayClient = createClient({ apiKey: #YOUR_API_KEY })

    return {
      valid: false
      paymentData: {}
      paymentMethods: []
      selectedPaymentMethod: null
    }
  },
  async mounted() {
    const result = await koomipayClient.getPaymentMethods({
      amount: { currency: "SGD", price: 100 },
      countryCode: "SG",
    })
    if (result && result.length) {
      this.paymentMethods= [...result]
      this.selectedPaymentMethod= result[0]
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await koomipayClient.instantCheckout({
          orderID: "Order #01",
          paymentMethod: this.paymentData,
          amount: {
            currency: "SGD",
            price: 100,
          },
          items: [{
            productID: 'product_01',
            productName: 'Product 01',
            quantity: 1,
            price: 100,
          }],
          returnUrl: document.location.origin + "/api/checkout/callback",
        })
    
        if (response && response.data && response.data.success) {
          const { data } = response.data
          if (data.resultCode === "Authorised") {
            window.location.href = "/checkout/success"
          } else if (data.resultCode === "RedirectShopper") {
            window.open(data.redirect3ds)
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    
    handleChangeValidity(newValid) {
      this.valid= newValid
    },
    
    handleChange(newData) {
      this.paymentData = newData
    }
  }
}
</script>
<template>
  <form>
    <div v-for="method in paymentMethods">
      <input type="radio" name="method" @click="() => (selectedPaymentMethod = method)" />
      <span>
        {{ method.name }}
      </span>
    </div>
    <CheckoutContainer
      v-if="!!selectedPaymentMethod"
      :client="koomipayClient"
      :amount="{ currency: 'SGD', price: 100 }"
      :paymentMethod="selectedPaymentMethod"
      @onValid="handleChangeValidity"
      @onChange="handleChange"
    />
    <button @click="handleSubmit" :disabled="!valid" />
  </form>
</template>
```

### TypeScript support

Vue Koomipay is packaged with TypeScript declarations. Some types are pulled
from [`@koomipay/vue2`][koomipay-npm] — be sure to add
`@koomipay/vue2` as a dependency to your project for full TypeScript support.

[koomipay-portal]: https://pay-demo.koomi.app
[live-demo]: https://store-demo-vue.koomi.app
[koomipay-npm]: https://www.npmjs.com/package/@koomipay/vue2