@koomipay/vue NPM

@koomipay/vue

Vue components for Koomipay B2B payment service

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

How to use

First, install @koomipay/vue using the following command.

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

@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

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

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

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

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

<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 — be sure to add @koomipay/vue as a dependency to your project for full TypeScript support.