Stripe是将支付集成到您的网站或应用程序的最杰出的开发人员工具之一。该服务允许您开始接受来自 14 个国家和 24 种货币的用户的付款,这一切都相对容易设置!但是,并非每个企业都需要一个成熟的网站来向客户收取款项。在这个简短的教程中,我们将在 Appsmith 上构建一个应用程序,它将直接从您的仪表板为您生成 Stripe 支付链接。您可以创建任意数量的付款链接,并通过电子邮件提供。即使有人没有互联网连接或使用未安装浏览器的计算机,他们仍然可以利用您的服务!

Appsmith 是一个与自定义 API 和数据库集成的开源应用程序构建器。它非常适合构建团队的内部工具、管理面板和仪表板。

让我们潜入吧!

设置 Stripe 账户

构建支付链接生成器的第一步是设置一个 Stripe 账户。如果您是现有用户,您可以创建一个新帐户或登录。

请注意,此应用程序为内置测试模式,需要额外的业务信息才能生成支付链接。要使其成为功能齐全的应用程序,您需要添加有关您的银行和税务信息的其他详细信息。

您的仪表板将如下所示:

即使在测试模式下,您也可以访问 Stripe API 的所有功能,但这将无法通过我们生成的链接进行完整的交易。

下一步是从 Appsmith 发出我们的 API 请求;我们需要复制仪表板主页上可用的密钥。

这个密钥允许我们通过基于承载令牌的身份验证访问我们的 Stripe 帐户。

在下一节中,我们将构建一个简单的 UI,使我们能够根据给定的客户信息和支付价格生成支付链接。

在 Appsmith 上构建 UI

第一步是在 Appsmith 上创建一个帐户。在本指南中,我将使用 Appsmith 的云版本,但您始终可以选择在本地使用 Appsmith 或在您的服务器上自行托管它。

• 导航到appsmith.com如果您是新用户,请注册一个新帐户或登录现有帐户。

• 在您的首选组织下创建一个新应用程序。您将看到一个编辑器,其中包含构建内部应用程序所需的一切。

• 创建一个新应用后,您会在左侧边栏看到一个包含小部件和数据源的所有详细信息的画布。

现在,单击小部件选项卡并将容器小部件拖放到画布上;这将允许我们将所有小部件分组到一个容器中。这可以完全定制;您可以通过打开属性窗格添加边框、背景颜色、阴影等。

在容器小部件中,拖放一个新的表单小部件并将一些输入小部件添加到容器上,以便我们收集支付链接的信息:

• 产品名称

• 价格

• 数量

• 成功网址

• 捕获方法

我们还可以根据需要收集的信息添加一些额外的配置,参考Stripe 文档。

以下是 Appsmith 上 UI 外观的屏幕截图:

接下来,让我们创建一个新的数据源,一个 API 端点,它将创建一个新的 Stripe 支付链接。

• 点击侧边栏中数据源旁边的 + 图标

• 选择 API Endpoint 并粘贴以下 URL:

https://api.stripe.com/v1/checkout/sessions

• 你可以通过双击现有的URL来重命名这个URL;让我们称之为stripe-session.

• Stripe API 使用基于 BEARER 令牌的身份验证;因此,API 需要一个带有不记名令牌的授权标头。

• 从 Stripe 仪表板复制令牌并将其粘贴到标题中。

Authorization - BEARER <token>

• 最后,让我们使用填充 FORM_URLENCODED 数据将数据作为有效负载发送,因为我们正在收集表单小部件中的所有输入。或者,我们也可以在 JSON Body 文件中添加有效负载。

要在 API 上绑定数据,我们需要使用 mustache 绑定和输入小部件名称。以下是我们如何从价格金额小部件访问数据的方法:

{{amountInput.text*100}}

同样,我们在有效负载上添加所有必填字段以创建新会话。下面是有效载荷的截图:

我们的 API 现在准备好了;让我们再添加一个输入小部件,生成一个 Stripe Session 链接(支付链接),用于通过我们的输入小部件传递的数据。

这是我们绑定来自 API 端点的响应所需的内容;我们可以通过绑定以下内容来做到这一点:

​​{{stripe_Session.data.url}}

API 请求的 .data 属性将返回来自 API 端点的响应;在这里,我们访问了 URL 字段,它本质上是支付链接。

如果您打开此 URL,您将看到一个新的 Stripe 会话,其中包含您在表单中输入的金额和详细信息。

这是它如何工作的记录:

---

如果您有兴趣使用我们网站上未列出的数据库作为集成,请通过在Github上提出 PR 让我们知道,我们将尽最大努力尽早将其包含在内。

在Discord上加入我们不断发展的社区,并在Youtube和Twitter上关注我们以保持最新状态。