npm package: @koomipay/vue
Description: Koomipay vue components
Author: Novitee Team
Latest version: 1.1.2

# @koomipay/vue

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

## Requirements

The minimum supported version of Vue is v3.2.0. If you use an older version,
upgrade Vue to use this library.

## Getting started

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

## How to use

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

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

### CSS

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

The file is located at 
```js
@koomipay/vue/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/vue"

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 setup>
import { CheckoutContainer, createClient } from "@koomipay/vue"

const config = useRuntimeConfig()
const valid = ref(false)
const paymentData = ref({})
const paymentMethods = ref([])
const selectedPaymentMethod = ref(null)

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

onMounted(() => {
  const result = await koomipayClient.getPaymentMethods({
    amount: { currency: "SGD", price: 100 },
    countryCode: "SG",
  })
  if (result && result.length) {
    paymentMethods.value = [...result]
    selectedPaymentMethod.value = result[0]
  }
})

async function handleSubmit() {
  try {
    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",
    })

    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)
      }
    }
  } catch (error) {
    console.log(error)
  }
}

function handleChangeValidity(newValid) {
  valid.value = newValid
}

function handleChange(newData) {
  paymentData.value = 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/vue`][koomipay-npm] — be sure to add
`@koomipay/vue` 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/vue