Skip to main content

Using the Vue Plugin

Introduction​

The xpanse-dropin Vue plugin provides a simple way to integrate xpanse's payment drop-in component into your Vue.js application. This guide will walk you through the steps to set up and use the xpanse-dropin component.

Installation​

First, you need to install the @xpanse/vue-plugin package. You can do this using npm:

npm install @xpanse/vue-plugin

Usage​

Importing the Component​

In your Vue component, import the xpanseDropin component from the @xpanse/vue-plugin package.

import { xpanseDropin, type DropInOptionsType } from "@xpanse/vue-plugin";

Setting Up the Component​

You can set up the xpanse-dropin component in your Vue component's template. Here is an example of how you can set up the component:

<script setup lang="ts">
import { xpanseDropin, type DropInOptionsType } from "@xpanse/vue-plugin";

const onSuccess = (message: string) => {
  console.log("onSuccess", message);
};
const onFailure = (message: string) => {
  console.log("onFailure", message);
};
const onLoaded = () => {
  console.log("onLoaded");
};
const onValidationStatusChange = (status: boolean, message: string) => {
  console.log("onValidationStatusChange", status, message);
};

const options: DropInOptionsType = {
  clickToPayEnabled: true,
};
</script>

<template>
  <xpanse-dropin
    environment="sandbox"
    public-key="your-public-key"
    :amount="100"
    :currency="'AUD'"
    :options="options"
    @onSuccess="onSuccess"
    @onFailure="onFailure"
    @onLoaded="onLoaded"
    @onValidationStatusChange="onValidationStatusChange"
  ></xpanse-dropin>
</template>

Props​

  • environment: The environment in which the component is running (e.g., "sandbox" or "production").
  • public-key: Your xpanse public key.
  • amount: The amount to be charged.
  • currency: The currency in which the amount is specified.
  • options: Additional options for the drop-in component.

Events​

  • @onSuccess: Triggered when the payment is successful.
  • @onFailure: Triggered when the payment fails.
  • @onLoaded: Triggered when the component is loaded.
  • @onValidationStatusChange: Triggered when the validation status changes.