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
```
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!