Installation
Choose the method that best fits your project — load via a<script> tag for plain HTML sites, or install via npm for React, Vue, Angular, or any bundler-based app.
Add the SDK script tag to your HTML page. No build step required.
Full HTML Example
Auto-Initialize via Script Attribute
You can pass configuration directly on the<script> tag — no extra JavaScript needed (callbacks not available with this method):
How It Works
1. Add the SDK to Your Project
Either include the<script> tag for CDN usage (exposes window.MygigstersBeneficiary), or install via npm install @mygigsters/beneficiary-sdk and import MygigstersBeneficiarySDK in your code.
2. Create a Container Element
Add an empty<div> with a unique id (e.g. <div id="beneficiary-form"></div>). The SDK will mount its UI inside this element using Shadow DOM for full style isolation.
3. Initialize with Credentials
Call.init(config) with your API key and secret. The SDK authenticates against the MyGigsters backend, then renders the beneficiary form inside the container.
4. Handle Callbacks
Use theonSuccess, onError, and onClose callbacks to react to form events in your application — for example, displaying a confirmation message or redirecting the user.
Configuration Options
Pass these options toinit():
SDK Methods
After initialization, you can control the form programmatically:Important Notes
CDN vs npm — Global Name Difference: When using the CDN / script tag, the global object is
MygigstersBeneficiary. When using the npm package, import the named export MygigstersBeneficiarySDK. The API methods are identical for both.Environment URLs
Error Handling
Wrapinit() in a try/catch to handle initialization errors:
onError callback and displayed inline in the form.
Security & Notes
Shadow DOM Isolation
The SDK renders inside a closed Shadow DOM, ensuring your page styles never conflict with the form’s styles and vice versa.Secure Authentication
The SDK uses HTTP Basic Authentication (Base64-encodedapiKey:apiSecret) under the hood to obtain a Bearer token. Credentials are never stored in localStorage or sessionStorage — the auth token lives in memory only.
PKCE Flow for Bank Details
For international (Airwallex) beneficiary forms, the SDK uses a PKCE (Proof Key for Code Exchange) authorization flow with nativecrypto.subtle — no third-party crypto library is used.
International support
The SDK detects the entity type from your account configuration and renders the appropriate form for the beneficiary’s country.HTTPS Required
The SDK requireswindow.crypto.subtle which is only available over HTTPS (or localhost for development). All modern browsers (Chrome 80+, Firefox 78+, Safari 14+, Edge 80+) are supported.
Troubleshooting
Container element not found
Make sure the target<div> exists in the DOM before calling init(). In React, call it inside useEffect; in Vue, use mounted().
Invalid API credentials
Double-check thatapiKey and apiSecret match the values in your MyGigsters dashboard. The secret is shown only once — if lost, generate a new one.
Airwallex form doesn’t load
Ensure your page is served over HTTPS.crypto.subtle is unavailable on plain HTTP. Also verify your account has Airwallex integration enabled.
Need your API key? Head to the Generate API Key section of the MyGigsters Settings to generate one, then start embedding the Beneficiary Form on your website.