Hydrogen VueJS SDK

Hydrogen VueJS SDK allows you to accept payment using in your vue application

Installation

Register for a merchant account on Hydrogen Merchant Dashboard to get started.

npm install --save hydrogenpay-vue

yarn add hydrogenpay-vue

pnpm add hydrogenpay-vue

Support

If you have any problems, questions or suggestions, create an issue here or send your inquiry to [email protected]

Implementation

You should already have your api key, If not, go to Profile & Settings.

Usage

<script lang="ts" type="text/javascript">
import HydrogenPay from '../../src/hydrogenpay.vue'
export default {
  components: {
    HydrogenPay,
  },
  data() {
    return {
      amount: 500, // REQUIRED
      email: '[email protected]', // REQUIRED
      customerName: 'John Doe', // REQUIRED
      meta: 'ewr34we4w', // OPTIONAL
      apiKey: 'PK_TEST_cca53e0b3bc7847aff94502b8a585f84', // REQUIRED
      description: 'Test description', // OPTIONAL
      currency: 'NGN', // REQUIRED
      frequency: 1, // OPTIONAL
      isRecurring: false, // OPTIONAL
      endDate: '2025-10-02', // OPTIONAL but (REQUIRED when isRecurring: true)
      buttonText: 'Pay With Hydrogen', // OPTIONAL
      autoOpenCheckout: false, // OPTIONAL
    }
  },
  methods: {
    onSucess: function (response) {
      console.log(response)
    },
    onClose: function () {
      console.log('checkout closed')
    },
  },
}
</script>

<template>
  <div class="container">
    <HydrogenPay
      :amount="amount"
      :email="email"
      :apiKey="apiKey"
      :customerName="customerName"
      :onSuccess="onSuccess"
      :onClose="onClose"
      :meta="meta"
      :description="description"
      :pocketRef="pocketRef"
      :callbackurl="callbackurl"
      :currency="currency"
      :frequency="frequency"
      :isRecurring="isRecurring"
      :endDate="endDate"
      :buttonText="buttonText"
      :autoOpenCheckout="autoOpenCheckout"
    />
  </div>
</template>

<style></style>

Options Type

| Name | Type | Required | Desc | | ------------ | ---------- | -------- | --------------------------------------------------------------------------- | | currency | String | Required | The currency for the transaction e.g NGN, USD | | email | String | Required | The email of the user to be charged | | description | String | Optional | The transaction description | | customerName | String | Required | The fullname of the user to be charged | | amount | Number | Required | The transaction amount | | apiKey | String | Required | Your LIVE or TEST apiKey or see above step to get yours | | onSuccess | Function | Optional | Callback when transaction is successful | | onClose | Function | Optional | Callback when transaction is closed of cancel | | buttonText | String | Optional | Payment Button Text. Default: Hydrogen Pay | | autoOpenCheckout | String | Optional | Auto start payment | | isRecurring | boolean | Optional | Recurring Payment | | frequency | String | Optional | Recurring Payment frequency | | endDate | String | Optional | Recurring Payment End Date. OPTIONAL but (REQUIRED when isRecurring = true) |