> ## Documentation Index
> Fetch the complete documentation index at: https://next-developers.opencard.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Plugins

> Embed the ocTPA and ocPDPC JavaScript widgets on your site to run self-service TPA onboarding wizards and cardholder PDPC consent flows for OpenCard.

OpenCard ships embeddable JS plugins for partner sites.

These are **optional UI helpers**. For the full API path (billing → TPA → organization → webhook → card holders), start with [Customer onboarding](/ems/customer-onboarding) — you can integrate without these plugins.

***

## ocTPA — TPA onboarding wizard

Self-service wizard that mirrors [customer onboarding Phase 1](/ems/customer-onboarding#phase-1--client-setup):

1. Pick card program (`GET .../cardissuers` on the account)
2. Pick products (transactions + optional enrichment)
3. Invoice email / reference
4. Signatory combination + emails (`GET .../publicrecords`)
5. Hand payload to you via `onDataSend`

**Load:**

```html theme={null}
<script src="https://api.opencard.io/plugin/tpa/js/tpa.min.js"></script>
<link rel="stylesheet" href="https://api.opencard.io/plugin/tpa/css/tpa.min.css">
```

**Init:**

```javascript theme={null}
new ocTPA({
  environment: 'sandbox', // or 'production'
  oAuthToken: 'Bearer ...', // scopes: public-records-read + account-card-issuers-read only
  accountId: 1,
  orgNumber: '5561234567',
  country: 'SE',
  onDataSend: async function(data) {
    // YOU call the APIs — plugin does not write to OpenCard:
    // 1. POST /billings (data.billing) — includes product_* flags
    // 2. POST /tpas (data.tpa)
    // 3. POST /tpas/{id}/signatories for each in data.tpa_signatories
    // Then: organization + webhook (your app), then card holders
    return true; // or error string
  }
});
```

### `onDataSend` payload

```json theme={null}
{
  "billing": {
    "name_display": "...",
    "name_legal": "...",
    "organization_number": "...",
    "country": "SE",
    "address_street": "...",
    "address_city": "...",
    "address_zip": "...",
    "email_invoice": "...",
    "your_reference_invoice": "...",
    "product_transaction": true,
    "product_digital_receipt": true,
    "product_aland_index": false
  },
  "tpa": {
    "language": "sv",
    "name": "...",
    "country": "SE",
    "organization_number": "...",
    "card_issuer_id": 1
  },
  "tpa_signatories": [
    { "name": "Anna", "email": "anna@acme.se" }
  ]
}
```

***

## ocPDPC — consent link helper

Lightweight modal that opens the PDPC signing URL in a new tab.

```javascript theme={null}
new ocPdpc({
  pdpcUrl: 'https://api.opencard.io/accounts/1/pdpcs/3/sign/token...',
  message: 'Please approve data processing for your corporate card.',
  buttonText: 'Approve now'
});
```

Display-only. No API calls.