https://github.com/plughacker/malga-tokenization
Simple way to tokenize cards with Malga
https://github.com/plughacker/malga-tokenization
Last synced: 10 months ago
JSON representation
Simple way to tokenize cards with Malga
- Host: GitHub
- URL: https://github.com/plughacker/malga-tokenization
- Owner: plughacker
- License: mit
- Created: 2024-01-12T14:32:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-01T19:35:43.000Z (11 months ago)
- Last Synced: 2025-08-08T19:10:04.050Z (11 months ago)
- Language: TypeScript
- Size: 646 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Authors: AUTHORS
Awesome Lists containing this project
README
Malga Tokenization SDK
Simple way to tokenize cards with Malga
## Getting Started
First of all, you'll need to install our SDK into your project:
```bash
yarn add @malga/tokenization
# or
npm install @malga/tokenization
# or
pnpm add @malga/tokenization
```
1. Add the identification keys for each field involving card data in your form
```html
Card Number
Card Holder Name
Card CVV
Card Expiration Date
Submit
```
2. Now all you need to do is configure our SDK with your keys and call the tokenize method in your function handling the form submit
```ts
import { MalgaTokenization } from '@malga/tokenization'
const malgaTokenization = new MalgaTokenization({
apiKey: '',
clientId: '',
options: {
config: {
fields: {
cardNumber: {
container: 'card-number',
placeholder: '9999 9999 9999 9999',
},
cardHolderName: {
container: 'card-holder-name',
placeholder: 'Its a test',
},
cardExpirationDate: {
container: 'card-expiration-date',
placeholder: 'MM/YY',
},
cardCvv: {
container: 'card-cvv',
placeholder: '999',
},
},
styles: {
// With this object, it's possible to change the styles of input components
input: {
color: '#000',
'font-size': '16px',
},
},
preventAutofill: false,
},
sandbox: true,
},
})
// You can use others events like:
malgaTokenization.on('cardTypeChanged', (event) => {
console.log('cardTypeChanged', event)
})
malgaTokenization.on('validity', (event) => {
console.log('validation', event)
})
malgaTokenization.on('blur', (event) => {
console.log('blur', event)
})
malgaTokenization.on('focus', (event) => {
console.log('blur', event)
})
async function handleSubmit(event) {
event.preventDefault()
const { tokenId } = await malgaTokenization.tokenize()
console.log({ tokenId })
// Now you just need to send the tokenId along with
// the rest of the transaction data to your API
}
```
3. Submit the form and see the magic happen 💳
For more details on the implementation, you can access our documentation by [clicking here](https://docs.malga.io/docs/sdks/tokenization/intro).
## Examples
If you have any doubts about the integration, you can [click here](https://github.com/plughacker/malga-tokenization/tree/main/examples) to see some examples
## Contributing
Feel free to contribute to this project by submitting pull requests, creating documentation, or bringing ideas to make the project even better!