{"id":20051739,"url":"https://github.com/seerbit/seerbit-vue","last_synced_at":"2025-03-02T08:42:22.431Z","repository":{"id":38310832,"uuid":"346670422","full_name":"seerbit/seerbit-vue","owner":"seerbit","description":"SeerBit VueJS Component for Vue 3.x","archived":false,"fork":false,"pushed_at":"2023-12-21T09:32:43.000Z","size":353,"stargazers_count":0,"open_issues_count":2,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-20T11:01:26.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seerbit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-11T10:54:42.000Z","updated_at":"2023-11-20T14:34:32.000Z","dependencies_parsed_at":"2024-11-13T12:05:45.037Z","dependency_job_id":"eb7e44ab-3be0-45a8-bb62-0081f1d0ede8","html_url":"https://github.com/seerbit/seerbit-vue","commit_stats":null,"previous_names":["seerbit/seerbit-vue2"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seerbit","download_url":"https://codeload.github.com/seerbit/seerbit-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240236182,"owners_count":19769569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T12:05:38.281Z","updated_at":"2025-03-02T08:42:22.413Z","avatar_url":"https://github.com/seerbit.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n \u003cimg width=\"400\" align=\"top\" src=\"https://assets.seerbitapi.com/images/seerbit_logo_type.png\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"60\" align=\"bottom\" src=\"https://vuejs.org/images/logo.png\" alt=\"VueJS\"\u003e\n   SeerBit\n\u003c/h1\u003e\n\n# SeerBit Checkout Wrapper for VueJS\nSeerbit Vue SDK can be used to integrate the SeerBit payment gateway into your Vue application.\nThis module was built and tested using VueJS 3.2.13\n\n# Requirements\nRegister for a merchant account on [Seerbit Merchant Dashboard](https://dashboard.seerbitapi.com) to get started. \\\n--\u003e Login -\u003e Settings menu -\u003e API Keys menu -\u003e Copy your public key\n\n## Install\n\n```bash\nnpm install --save seerbit-vue\n```\n\n```bash\nyarn add seerbit-vue\n```\n\n## Properties\n| Property | Type | Required | Default | Description |\n| :--- | :-- | :-- | :-- | :-- |\n| currency | \u003ccode\u003estring\u003c/code\u003e | Optional | NGN | The currency for the transaction e.g NGN|\n| email | \u003ccode\u003estring\u003c/code\u003e | Required | None | The email of the user to be charged |\nmobileNo | \u003ccode\u003estring\u003c/code\u003e | Optional | None | The mobile number of the user to be charged |\n| description | \u003ccode\u003estring\u003c/code\u003e | Optional | None | The transaction description which is optional |\n| fullName | \u003ccode\u003estring\u003c/code\u003e | Optional | None | The full name of the user to be charged |\n| country |  \u003ccode\u003estring\u003c/code\u003e | Optional | \"NG\" | Transaction country which can be optional |\n| tranref |  \u003ccode\u003estring\u003c/code\u003e | Required | None | Set a unique transaction reference for every transaction |\n| amount |  \u003ccode\u003estring\u003c/code\u003e | Required | None | The transaction amount in naira |\n| callbackUrl |  \u003ccode\u003estring\u003c/code\u003e | Optional | None | This is the redirect url when transaction is successful |\n| publicKey |  \u003ccode\u003estring\u003c/code\u003e | Required | None | Your Public key or see **Requirements** above to get yours |\n| closeOnSuccess |  \u003ccode\u003eboolean\u003c/code\u003e | Optional | False | Close checkout when trasaction is successful |\n| closePrompt |  \u003ccode\u003eboolean\u003c/code\u003e | Optional | False | Close the checkout page if transaction is not initiated |\n| setAmountByCustomer |  \u003ccode\u003eboolean\u003c/code\u003e | Optional | False | Set to true if you want user to enter transaction amount |\n| pocketRef |  \u003ccode\u003estring\u003c/code\u003e | Optional | None | This is your pocket reference for vendors with pocket |\n| vendorId |  \u003ccode\u003estring\u003c/code\u003e | Optional | None | This is the vendorId of your business using pocket |\n| tokenize |  \u003ccode\u003eboolean\u003c/code\u003e | Optional | False | Tokenize card |\n| planId |  \u003ccode\u003estring\u003c/code\u003e | Optional | None | Subcription Plan ID |\n| onCallback |  \u003ccode\u003eMethod\u003c/code\u003e | Optional | None | Callback method if transaction was successful |\n| onCloseCheckout |  \u003ccode\u003eMethod\u003c/code\u003e | Optional | None | Callback method if transaction was cancelled |\n| buttonText | \u003ccode\u003eString\u003c/code\u003e | Optional | Pay With SeerBit | Text to be displayed on launch button\n| autoCheckout | \u003ccode\u003eboolean\u003c/code\u003e | Optional | false | Launch checkout automatically if true, or display a pay button if false\n| customization |  \u003ccode\u003eObject\u003c/code\u003e | Optional | None | Customization e.g below\n\n```vue\ncustomization: {\n  theme: {\n    border_color: \"#000000\",\n    background_color: \"#004C64\",\n    button_color: \"#0084A0\",\n  },\n  payment_method: [\"card\", \"account\", \"transfer\", \"wallet\", \"ussd\"],\n  display_fee: true,\n  logo: \"logo_url | base64\",\n}\n```\n\n## Usage\n\n```vue\n\u003cscript type=\"text/javascript\"\u003e\nimport seerbit from \"seerbit-vue\";\nexport default {\n  components: {\n    seerbit,\n  },\n  data() {\n    return {\n      publicKey: \"SBTESTPUBK_t4G16GCA1O51AV0Va3PPretaisXubSw1\",\n      fullName: \"John Doe\",\n      email: \"johndoe@mail.com\",\n      mobileNo: \"\",\n      amount: \"5.00\",\n      planId: \"\",\n      description: \"\",\n      productId: \"\",\n      pocketRef: \"\",\n      tokenize: \"\",\n      currency: \"NGN\",\n      customization: {\n        theme: {\n          border_color: \"#000000\",\n          background_color: \"#004C64\",\n          button_color: \"#0084A0\",\n        },\n        payment_method: [\"card\", \"account\", \"transfer\", \"wallet\", \"ussd\"],\n        display_fee: true, // true\n        display_type: \"embed\", //inline\n        logo: \"logo_url | base64\",\n      },\n      callbackurl: \"\",\n    };\n  },\n  computed: {\n    tranref() {\n      return Date.now().toString();\n    },\n  },\n  methods: {\n    onCallback: function (response) {\n      console.log(response);\n    },\n    onCloseCheckout: function () {\n      console.log(\"checkout closed\");\n    },\n  },\n};\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cseerbit\n      :amount=\"amount\"\n      :email=\"email\"\n      :publicKey=\"publicKey\"\n      :tranref=\"tranref\"\n      :onCallback=\"onCallback\"\n      :onCloseCheckout=\"onCloseCheckout\"\n      :planId=\"planId\"\n      :customization=\"customization\"\n      :pocketRef=\"pocketRef\"\n      :callbackurl=\"callbackurl\"\n      :tokenize=\"tokenize\"\n      :description=\"description\"\n      :productId=\"productId\"\n      :currency=\"currency\"\n      :mobileNo=\"mobileNo\"\n      :buttonText=\"buttonText\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n  .seerbitButton {\n    align-self: center;\n    background-color: #000000;\n    color: #ffffff;\n    font-weight: 400; \n    cursor: pointer;\n    justify-content: center;\n    align-items: center;\n    border-radius: 10px;\n    font-size: 16px;\n  }\n\u003c/style\u003e\n```\n\n## License\n\nMIT © [seerbit](https://github.com/seerbit)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseerbit%2Fseerbit-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseerbit%2Fseerbit-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseerbit%2Fseerbit-vue/lists"}