10分钟搞定Directus支付集成：Stripe与PayPal无缝对接指南-优快云博客

10分钟搞定Directus支付集成：Stripe与PayPal无缝对接指南

【免费下载链接】directus Directus 是一个开源的、实时的内容管理平台，用于构建可扩展的数据管理应用程序。* 管理和操作数据库数据；支持多种数据库类型；支持自定义字段和表单；支持实时数据同步。* 特点：支持多种数据库类型；支持实时数据同步；支持自定义字段和表单；支持 RESTful API。项目地址: https://gitcode.com/GitHub_Trending/di/directus

你还在为数据管理平台接入支付功能头疼？开发文档零散、代码示例缺失、配置项复杂？本文将带你通过Directus的扩展系统，零代码基础也能完成Stripe和PayPal支付网关集成，10分钟实现从数据管理到支付收款的全流程打通。

读完本文你将获得：

3步完成支付网关配置的实操指南
现成可用的支付状态同步代码片段
支付数据与Directus集合关联的最佳实践
实时订单管理仪表盘搭建方案

扩展系统基础：支付集成的技术底座

Directus的扩展架构为支付集成提供了灵活的实现路径。核心扩展入口位于extensions/目录，包含API扩展extensions/api/和应用扩展extensions/app/两大类型。我们需要创建的支付扩展将主要涉及：

操作扩展：src/operations/目录下定义的自定义操作，用于触发支付流程
钩子系统：src/hooks/中的事件监听，处理支付状态回调
界面扩展：src/displays/中的自定义展示组件，显示支付状态

Stripe支付网关配置（3步速成）

1. 创建支付配置集合

在Directus数据模型中创建payments集合，包含以下字段：

amount (数字)：支付金额
currency (字符串)：货币代码
status (下拉选择)：pending/paid/failed
provider (下拉选择)：stripe/paypal
provider_payment_id (字符串)：支付平台交易ID

2. 配置Stripe API密钥

在项目根目录的.env文件中添加Stripe凭证：

STRIPE_SECRET_KEY=sk_test_51Hb...
STRIPE_WEBHOOK_SECRET=whsec_...

这些配置会被src/utils/env.ts中的环境变量加载器处理，确保敏感信息安全存储。

3. 导入支付操作扩展

下载Stripe支付操作扩展，解压至extensions/operations/stripe-payment/目录，包含：

index.ts：操作逻辑实现
schema.json：操作配置表单定义
icon.svg：操作图标

PayPal集成关键步骤

PayPal集成与Stripe类似，但需要特别处理其OAuth授权流程。核心实现位于src/services/paypal.ts，主要包含：

获取访问令牌

async function getAccessToken() {
  const auth = Buffer.from(`${process.env.PAYPAL_CLIENT_ID}:${process.env.PAYPAL_CLIENT_SECRET}`).toString('base64');
  const response = await fetch('https://api-m.paypal.com/v1/oauth2/token', {
    method: 'POST',
    headers: {
      'Authorization': `Basic ${auth}`,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'grant_type=client_credentials'
  });
  const data = await response.json();
  return data.access_token;
}

创建订单

async function createOrder(amount: number, currency: string) {
  const token = await getAccessToken();
  const response = await fetch('https://api-m.paypal.com/v1/checkout/orders', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      intent: 'CAPTURE',
      purchase_units: [{
        amount: { value: amount, currency_code: currency }
      }]
    })
  });
  return response.json();
}

支付状态同步与数据关联

支付完成后，需要将支付平台的回调通知同步到Directus。创建Webhook处理控制器src/controllers/payments/webhook.ts：

import { Request, Response } from 'express';
import { Database } from '@directus/database';

export async function stripeWebhookHandler(req: Request, res: Response) {
  const event = req.body;
  
  if (event.type === 'payment_intent.succeeded') {
    const paymentIntent = event.data.object;
    await updatePaymentStatus(
      req.database,
      paymentIntent.id,
      'paid'
    );
  }
  
  res.status(200).send({received: true});
}

async function updatePaymentStatus(db: Database, providerPaymentId: string, status: string) {
  await db.update('payments')
    .set({ status })
    .where({ provider_payment_id: providerPaymentId });
}

可视化仪表盘搭建

利用Directus的仪表盘功能，创建支付管理面板src/views/payments/dashboard.vue，包含：

支付趋势图表（使用src/components/charts/line-chart.vue）
最近订单列表
支付状态统计卡片

常见问题与解决方案

Q: 支付回调无法被Directus接收？

A: 检查src/middleware/cors.ts中的跨域配置，确保支付平台IP被允许。

Q: 如何处理支付失败场景？

A: 在src/flows/目录创建失败处理流程，配置自动退款或通知管理员。

Q: 能否同时使用多个支付网关？

A: 可以通过src/services/payment-factory.ts实现策略模式，动态选择支付提供商。

总结与进阶

通过本文方法，你已成功为Directus集成Stripe和PayPal支付功能。进阶方向：

实现订阅支付：参考src/services/subscription.ts
添加优惠券系统：扩展src/utils/discounts.ts
多语言支付界面：利用src/lang/目录下的i18n支持

完整代码示例可在examples/payments/目录找到，包含Postman测试集合和部署脚本。现在就动手试试，让你的数据管理平台秒变收款利器！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考