> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spotflow.one/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue Library

> This `Spotflow Vue.js library` wraps around the [inline library](https://github.com/Spotflow-One/spotflow-checkout-inline), which enables your users to make payments seamlessly. It integrates smoothly into your Vue.js application, providing a streamlined checkout experience.

### Features

* Collections: Card, Bank Transfers, USSD.
* Recurring payments: Recurring payments: Tokenization and Subscriptions.

## Requirements

* Spoflow Encryption keys
* Spotflow API keys
* Node versions >= 16.x.x npm >=7.x.x

## Installation

<Tabs>
  <Tab title="npm">
    ```JavaScript theme={null}
    npm install @spot-flow/vue-spotflow-checkout
    ```
  </Tab>

  <Tab title="yarn">
    ```JavaScript theme={null}
    yarn add @spot-flow/vue-spotflow-checkout
    ```
  </Tab>
</Tabs>

## Usage

### Using Composable

`in payment-component.vue`

```JavaScript theme={null}
  <script setup>
   import { useSpotflowPayment } from '@spot-flow/vue-spotflow-checkout'

   const loadSpotflow = useSpotflowPayment()

   const handlePayment = async () => {
     const config = {
       amount: 4000, // Not required for subscription payment
       currency: "NGN",
       email: "temi@mailinator.com", // Email of customer
       name: "John", // Name of customer: Not required
       phoneNumber: "09090909090", // Phone number of customer: Not required
       reference: "MC-123456", // Not required, a unique payment reference will be generated if not provided
       merchantKey: "pk_test_fXXXXedhXXXXXXXXXXXXXXXX",
       planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034", // Not required for a one time payment
       encryptionKey:"SKKXXXXXXXXXXXXXXXXX"
     }
       await loadSpotflow(config)
   }
 </script>

 <template>
   <div>
   <button @click="handlePayment">
     Make Payment
   </button>
   </div>
 </template>
```

### Using SpotflowButton Component in Vue 3

```JavaScript theme={null}
 <script setup lang="ts">

import { SpotflowButton } from "@spot-flow/vue-spotflow-checkout";
import { defineComponent, ref } from "vue";

const config = {
 amount: 4000, // Not required for subscription payment
 currency: "NGN",
 email: "temi@mailinator.com", // Email of customer
 name: "John", // Name of customer: Not required
 phoneNumber: "09090909090", // Phone number of customer: Not required
 reference: "MC-123456", // Not required, a unique payment reference will be generated if not provided
 merchantKey: "pk_test_fXXXXedhXXXXXXXXXXXXXXXX",
 planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034", // Not required for a one time payment
 encryptionKey:"SKKXXXXXXXXXXXXXXXXX"
};
</script> 

<template>
 <h1>Payment Component</h1>
 <div>
   <!-- Just need to click the button -->
   <SpotflowButton :config="config">
      Pay Now
   </SpotflowButton>

 </div>
</template>
```

### Parameters

<ParamField path="merchantKey" type="string" required>
  Your API Public Key
</ParamField>

<ParamField path="reference" type="string" optional>
  Your transaction reference. This MUST be unique for every transaction
</ParamField>

<ParamField path="amount" type="string" optional>
  Amount to charge the customer. NB: For subscription payments, amount comes from the plan details. This is not required for subscription payments.
</ParamField>

<ParamField path="currency" type="string" required>
  Currency to charge in.
</ParamField>

<ParamField path="localCurrency" type="string" optional>
  This is only required when a payment is being made in USD
</ParamField>

<ParamField path="encryptionKey" type="string" required>
  This is the encryption key for the merchant. This is required for card payments.
</ParamField>

<ParamField path="planId" type="string" optional>
  This is the plan ID being paid for however, this is not required for one time payments.
</ParamField>

<ParamField path="name" type="string" optional>
  This is the Customer's Name
</ParamField>

<ParamField path="phoneNumber" type="string" optional>
  This is the Customer's Phone Number
</ParamField>

<ParamField path="email" type="string" required>
  This is the Customer's Email Address
</ParamField>

<ParamField path="metadata" type="string" required>
  This contains other information about the product such as the product name and other additional properties. Product Name should not be passed if planId is being passed
</ParamField>

<ParamField path="callBackUrl" type="string" optional>
  This is the URL the browser redirects to on success of a payment
</ParamField>

Need more information check out our [documentation](https://www.npmjs.com/package/@spot-flow/vue-spotflow-checkout)