埋め込みアプリ

import { DrawerView } from '@stripe/ui-extension-sdk/ui';

const SyncDrawer = ({ onClose }) => {
  return (
    <DrawerView title="Brevo同期ステータス" onClose={onClose}>
      <Box css={{ padding: 'large' }}>
        <SyncStatusContent />
      </Box>
    </DrawerView>
  );
};

import { ModalView } from '@stripe/ui-extension-sdk/ui';

const SetupModal = ({ onClose }) => {
  return (
    <ModalView title="Brevoセットアップ" onClose={onClose}>
      <Box css={{ padding: 'xlarge' }}>
        <SetupWizard />
      </Box>
    </ModalView>
  );
};

import {
  Box, Inline, Button, Banner, Badge,
  TextField, Select, Divider, Spinner, Icon, Link,
} from '@stripe/ui-extension-sdk/ui';

const MyView = ({ environment, userContext }: ExtensionContextValue) => {
  const accountId = userContext?.account?.id;
  const customerId = environment.objectContext?.id;
  const mode = environment.mode; // 'live' or 'test'
  return <Box>{/* component */}</Box>;
};