Malga Tokenization SDK
Simple way to tokenize cards with Malga
Getting Started
There are two ways to use Malga Tokenization that will depend on how your application is structured, basically, it depends on whether you will handle the form submit on the client-side or on the server-side. For more details on the implementation, you can access our documentation by clicking here.
First of all, you'll need to install our SDK into your project:
yarn add @malga/tokenization
# or
npm install @malga/tokenization
# or
pnpm add @malga/tokenization
Sync Tokenization
To handle the form on the client-side, you'll need to:
- Add the identification keys for each field involving card data in your form
<form data-malga-tokenization-form>
<input
data-malga-tokenization-holder-name
name="holderName"
type="text"
placeholder="Card Holder Name"
/>
<input
data-malga-tokenization-number
name="number"
type="number"
placeholder="Card Number"
/>
<input
data-malga-tokenization-expiration-date
name="expirationDate"
type="text"
placeholder="Card Expiration Date"
/>
<input
data-malga-tokenization-cvv
name="cvv"
type="number"
placeholder="Card CVV"
/>
<button type="submit">Submit</button>
</form>
- 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
import { MalgaTokenization } from '@malga/tokenization'
const malgaTokenization = new MalgaTokenization({
apiKey: '<YOUR_API_KEY>',
clientId: '<YOUR_CLIENT_ID>',
options: { sandbox: true },
})
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
}
- Submit the form and see the magic happen 💳
Form Handling Tokenization
To handle the form on the server-side, you'll need to:
- Call the
init()
method in your main JS/TS file, the entrypoint of your application. This way, when the form is submitted, tokenization will occur automatically
import { MalgaTokenization } from '@malga/tokenization'
const malgaTokenization = new MalgaTokenization({
apiKey: '<YOUR_API_KEY>',
clientId: '<YOUR_CLIENT_ID>',
options: { sandbox: true },
})
malgaTokenization.init()
- Add the identification keys for each field involving card data in your form
<form data-malga-tokenization-form method="POST" action="/checkout">
<input
data-malga-tokenization-holder-name
name="holderName"
type="text"
placeholder="Card Holder Name"
/>
<input
data-malga-tokenization-number
name="number"
type="number"
placeholder="Card Number"
/>
<input
data-malga-tokenization-expiration-date
name="expirationDate"
type="text"
placeholder="Card Expiration Date"
/>
<input
data-malga-tokenization-cvv
name="cvv"
type="number"
placeholder="Card CVV"
/>
<button type="submit">Submit</button>
</form>
- Submit the form and see the magic happen. You will notice that only the card's
tokenId
will reach your server 💳
Examples
If you have any doubts about the integration, you can click here 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!