Extensions

{
  "id": "example_app",
  "type": "integration",
  "extensions": [
    {
      "id": "example",
      "type": "payment",
      "name": "My Payment Service"
    }
  ]
}

export const config: SwellConfig = {
  extension: "example",
  description: "Charge a credit card",
  model: {
    events: ["payment.charge"]
  },
};

export default async function (req: SwellRequest) {
  // ... perform charge logic

  return {
    success: true,
    transaction_id: '...',
  }
}

export const config: SwellConfig = {
  extension: "example",
  description: "Calculate shipping services",
  model: {
    events: ["order.shipping"]
  },
};

export default async function (req: SwellRequest) {
  // ... perform shipping calculation

  return {
    shipment_rating: {
      services: [
        {
          id: '...',
          price: 9.99
        }
      ],
      errors: [...], // optional
    }
  }
}

export const config: SwellConfig = {
  extension: "example",
  description: "Calculate taxes",
  model: {
    events: ["order.taxes"]
  },
};

export default async function (req: SwellRequest) {
  // ... perform tax calculation

  return {
    taxes: [
      {
        id: '...',
        amount: 10
      }
    ],
    items: [ // optional
      {
        id: '...',
        taxes: [...]
      }
    ],
  }
}

import { useEffect, useRef } from 'preact/hooks';
import type {
  ComponentProps,
  PaymentContext,
  PaymentSubmitResult,
} from '@swell/apps-sdk/components';

export const config = {
  description: 'Example gateway checkout',
  extension: { id: 'card' },
  targets: [{ id: 'checkout.payment.methods' }],
};

declare const window: Window & { Gateway?: any };

function loadGatewaySdk(): Promise<void> {
  if (window.Gateway) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://example.com/gateway-sdk.js';
    script.onload = () => resolve();
    script.onerror = () => reject(new Error('The gateway could not be loaded'));
    document.head.appendChild(script);
  });
}

export default function Gateway({
  context,
  settings,
  on,
  call,
}: ComponentProps<never, PaymentContext>) {
  // The submit handler is registered once, so it reads the latest cart from a ref
  const latest = useRef(context);
  latest.current = context;
  const publicKey = (settings.card as { public_key?: string } | undefined)?.public_key;

  useEffect(() => {
    void loadGatewaySdk().catch(() => {});

    return on('submit', async (): Promise<PaymentSubmitResult> => {
      const { cart } = latest.current;
      await loadGatewaySdk();

      // Runs the extension's payment.create_intent function
      const intent = await call<{ id: string }>('createIntent', {
        amount: cart.capture_total,
        currency: cart.currency,
      });

      // Open the gateway's payment UI and tokenize the card
      const response = await window.Gateway.open({ publicKey, intentId: intent.id });

      // Runs the extension's payment.get_intent function to verify the result
      const payment = await call<{ id: string; token: string; last4: string; brand: string }>(
        'getIntent',
        response,
      );

      // Merged into the cart's billing before checkout submits the order
      return {
        billing: {
          card: { token: payment.token, last4: payment.last4, brand: payment.brand },
          intent: { gateway: { id: payment.id } },
        },
      };
    });
  }, [on, call, publicKey]);

  return <p style={{ margin: 0 }}>You will enter your card details in a secure window.</p>;
}

export const config: SwellConfig = {
  extension: "card",
  description: "Example gateway client side integration",
};

export default function GatewayComponent({ registerHandlers, createIntent, getIntent, updateCart, onReady }: SwellData) {
  // ...
}