@koomipay/vue

Vue components for Koomipay B2B payment service

Getting started

• Try live demo here

How to use

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

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

@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

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

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