Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeff-labs/vue-braintree-paypal-button
Vue Braintree PayPal button
https://github.com/jeff-labs/vue-braintree-paypal-button
frontend javascript npm npm-package vue vue-component
Last synced: 8 days ago
JSON representation
Vue Braintree PayPal button
- Host: GitHub
- URL: https://github.com/jeff-labs/vue-braintree-paypal-button
- Owner: jeff-labs
- License: mit
- Created: 2018-07-29T16:03:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:51:20.000Z (almost 2 years ago)
- Last Synced: 2024-10-24T10:14:13.096Z (15 days ago)
- Topics: frontend, javascript, npm, npm-package, vue, vue-component
- Language: JavaScript
- Homepage: https://jeff-labs.github.io/vue-braintree-paypal-button
- Size: 5.07 MB
- Stars: 4
- Watchers: 7
- Forks: 4
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Braintree PayPal button
Vue component to integrate PayPal payments through Braintree using Vault flow.
## Demo
[Demo app](https://jeff-labs.github.io/vue-braintree-paypal-button/)
## Documentation
[Braintree PayPal vault flow](https://developers.braintreepayments.com/guides/paypal/vault/javascript/v3)
[Paypal button customization](https://developer.paypal.com/docs/checkout/how-to/customize-button/)
## Installation
### Yarn
```bash
yarn add @mrjeffapp/vue-braintree-paypal-button
```
### NPM
```bash
npm install --save @mrjeffapp/vue-braintree-paypal-button
```
## Usage
### Example: TokenGenerator.vue
```javascript
import BraintreePaypalButton from '@/components/BraintreePaypalButton.vue';
export default {
name: 'TokenGenerator',
components: {
BraintreePaypalButton,
},
data() {
return {
environment: 'sandbox',
token: 'token',
locale: 'es_ES',
};
},
methods: {
onAuthorize: (nonce) => {
console.log(nonce);
},
onCancel: () => {
console.log('Cancelled');
},
onError: (error) => {
console.error(error);
},
},
};
```
### Component props
#### env
- Type: `String`
- Required: `true`
- Values: `production` | `sandbox`
#### token
- Type: `String`
- Required: `false`
- Value: [Client token from your integration to Braintree](https://developers.braintreepayments.com/reference/request/client-token/generate/node)
#### locale
- Type: `String`
- Required: `false`
- Default: `en_US`
- Values: [Supported locales](https://developer.paypal.com/docs/checkout/how-to/customize-button/#supported-locales)
#### styles
- Type: `Object`
- Required: `false`
- Default: `{}`
- Values: [Customize button](https://developer.paypal.com/docs/checkout/how-to/customize-button/)
### Component events
#### authorize
When customer authorize vault flow.
#### cancel
When customer cancel vault flow.
#### error
When an error occurs.
## Developing
### Project setup
```bash
yarn install
```
### Compiles and hot-reloads for development
```bash
yarn serve
```
### Compiles and minifies for production
```bash
yarn build
```
### Lints and fixes files
```bash
yarn lint
```
### Run unit tests
```bash
yarn test:unit
```
### Run en to end tests
```bash
yarn test:e2e
```
### Deploy documentation to GitHub pages
```
yarn gh-pages
```