Migration Guide: Marqeta to Synctera

<!-- Fetch widget URL from your backend -->
<iframe 
  src="{marqetaWidgetUrl}" 
  title="Activate Card"
  width="400"
  height="300"
/>

<!-- Load the widget script -->
<script 
  type="module" 
  src="https://assets.synctera.com/widgets/activate/v1.1.1/index.js"
></script>

<!-- Use the web component -->
<activate-card 
  token="{widgetToken}" 
  env="production"
></activate-card>

<script>
  // Handle events
  document.querySelector('activate-card').addEventListener('success', (e) => {
    console.log('Card activated:', e.detail);
  });
</script>

// Server-side: Get widget URL
const response = await fetch(
  `https://api.synctera.com/v0/cards/card_widget_url?card_id=${cardId}&customer_id=${customerId}&account_id=${accountId}&widget_type=activate_card`,
  {
    headers: { 'Authorization': `Bearer ${apiKey}` }
  }
);
const { url } = await response.json();
// Return URL to frontend

// Server-side: Get widget token
const response = await fetch(
  `https://api.synctera.com/v1/cards/${cardId}/widget_token?widget_type=ACTIVATE`,
  {
    method: 'POST',
    headers: { 
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    }
  }
);
const { widget_token } = await response.json();
// Return token to frontend

<!-- Fetch widget URL from your backend -->
<iframe 
  src="{marqetaWidgetUrl}" 
  title="Set PIN"
  width="400"
  height="300"
/>

<!-- Load the widget script -->
<script 
  type="module" 
  src="https://assets.synctera.com/widgets/set-pin/v1.1.1/index.js"
></script>

<!-- Use the web component -->
<set-pin 
  token="{widgetToken}" 
  env="production"
></set-pin>

<script>
  // Handle events
  document.querySelector('set-pin').addEventListener('success', (e) => {
    console.log('PIN set:', e.detail);
  });
</script>

// Server-side: Get widget URL
const response = await fetch(
  `https://api.synctera.com/v0/cards/card_widget_url?card_id=${cardId}&customer_id=${customerId}&account_id=${accountId}&widget_type=set_pin`,
  {
    headers: { 'Authorization': `Bearer ${apiKey}` }
  }
);
const { url } = await response.json();
// Return URL to frontend

// Server-side: Get widget token
const response = await fetch(
  `https://api.synctera.com/v1/cards/${cardId}/widget_token?widget_type=SET_PIN`,
  {
    method: 'POST',
    headers: { 
      'Authorization': `Bearer ${apiKey}`,
      'Content-Type': 'application/json'
    }
  }
);
const { widget_token } = await response.json();
// Return token to frontend

// Synctera widgets use standard DOM events
widget.addEventListener('success', (event) => {
  console.log('Success:', event.detail);
});

widget.addEventListener('failure', (event) => {
  console.error('Error:', event.detail);
});

<activate-card
  token="..."
  env="production"
  theme="night-shift"
  custom-labels='{
    "widgetTitle": "Activate Your Card",
    "submitButtonText": "Activate Now"
  }'
></activate-card>

// Recommended: Fetch token when component mounts
async function initializeWidget() {
  const { widget_token } = await fetchWidgetToken(cardId);
  document.querySelector('activate-card').setAttribute('token', widget_token);
}