> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mygigsters.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Embed the Card SDK
> Collect card details with hosted fields.
The MyGigsters Card SDK lets you embed a fully-featured, single-step card saving form directly into any website. Customers can securely tokenize their payment card through a pre-built, styled UI powered by **Airwallex Payment Elements** — no backend card-handling required on your side.
## Installation
Choose the method that best fits your project — load via a `
```
### Full HTML Example
```html theme={null}
```
### Production CDN URL
Switch the script `src` to the production URL and set `env: "prod"` when going live:
```html theme={null}
```
## Get Client Info (API)
Before initializing the Card SDK, you need your `myGigsterId` and the customer's `customerId`. Call the `GET /api/v1/client/me` endpoint using your API credentials (HTTP Basic Auth `uuid:randomPasswordShowOnce`) to retrieve your client profile and `myGigsterId`. To obtain the `customerId`, create a customer using the [Customer Create API](https://docs.mygigsters.com/api-reference/customers/customer-create.md) (`POST /api/v1/customer`).
`GET /api/v1/client/me`
### Request Headers
```http theme={null}
Content-Type: application/json
x-api-version: 1.2
Authorization: Basic {base64_encoded_combination of uuid:randomPasswordShowOnce}
```
### cURL Request Example
```bash theme={null}
curl --location 'https://qa-payments.mygigsters.com.au/api/v1/client/me' \
--header 'Content-Type: application/json' \
--header 'x-api-version: 1.2' \
--header 'Authorization: Basic MGI3YjFiMTctOTJhZC00Yjc4LWFhN2ItNjI2ODBhOWUzOGExOkt1aFNEa3NCVmFXQFNPQyhZQCFh'
```
### Example Response (200 OK)
```json theme={null}
{
"success": true,
"status": 200,
"data": {
"id": 1,
"myGigsterId": "4407c3ba-10c9-4822-9f51-c2c96692f8d7",
"token": "eyJhbGciOiJSUzI1NiIs......",
"fullName": "Jane Smith",
"email": "jane.smith@example.com",
"businessName": "Example Marketplace Pty Ltd",
"address": null,
"acn": "123456789",
"phone": "9876543210"
}
}
```
### Response Fields for Card SDK
| Field | Type | Description |
| - | - | - |
| `token` (required) | string | JWT Bearer token required by the SDK. Pass this as `token` to `sdk.init()`. |
| `myGigsterId` (required) | string | Your unique client identifier in MyGigsters. Pass this as `myGigsterId` to `sdk.init()`. |
| `fullName` | string | Client full name. |
| `email` | string | Client registered email address. |
| `businessName` | string | Registered business name. |
| `acn` | string | Australian Company Number (if applicable). |
| `phone` | string | Contact phone number. |
## How It Works
### 1. Add the SDK to Your Project
Either include the `$2
```
**npm**
```javascript theme={null}
// npm install @mygigsters/card-sdk$2
import { MygigstersCardSDK }
from '@mygigsters/card-sdk';
const sdk = new MygigstersCardSDK();
await sdk.init({
token: "eyJhbGciOiJSUzI1Ni...", // Pre-fetched token from GET /api/v1/client/me$2
customerId: "cus_hkdmcdjshhknkk4lc2t",
myGigsterId: "4407c3ba-10c9-4822-9f51-c2c96692f8d7",
containerId: "mygigsters-card",
env: "demo",
mode: "dark",
onSuccess: (res) => {
// res.paymentConsentId — use to charge the customer$2
console.log("Card saved:", res.paymentConsentId);
},
onError: (err) => {
console.error("Error:", err.message);
},
onClose: () => {
console.log("Modal closed");
},
});
```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.