如何在 Deno 应用中使用 Stripe 支付？

前言

Stripe 是一家全球领先的在线支付平台，它提供了丰富的支付解决方案和完善的开发者文档。在 Deno 应用中使用 Stripe 支付可以为网站或应用提供便捷、快速、安全的支付服务，本文将介绍如何在 Deno 应用中使用 Stripe 支付。

Stripe 支付流程

使用 Stripe 支付需要遵循以下流程：

1. 创建 Stripe 帐户并获取 API 密钥。
2. 创建一个 Stripe 支付表单，用于收集用户支付信息。
3. 使用 Stripe API 发送支付请求，获取支付凭据。
4. 将支付凭据提交给服务器进行验证和处理。
5. 在服务器端更新订单状态，并向用户发送支付成功/失败的通知。

创建 Stripe 帐户并获取 API 密钥

在使用 Stripe 支付之前，我们需要先创建一个 Stripe 帐户，并获取 API 密钥。具体步骤如下：

1. 访问 Stripe 官网（https://stripe.com/）并注册一个帐户。
2. 登录后，在 Dashboard 页面中找到 API 密钥并复制。

创建 Stripe 支付表单

创建 Stripe 支付表单需要使用 Stripe Elements 和 Stripe.js。Stripe Elements 是一组预构建的 UI 组件，可以轻松地集成到应用中，用于收集用户支付信息。Stripe.js 是一个 JavaScript 库，用于与 Stripe API 进行通信。以下是创建 Stripe 支付表单的步骤：

1. 引入 Stripe.js 库

在 HTML 文件中，使用以下代码引入 Stripe.js 库：

<script src="https://js.stripe.com/v3/"></script>

1. 创建一个表单

创建一个表单，用于收集用户支付信息。以下是一个简单的表单例子：

// javascriptcn.com 代码示例
<form id="payment-form">
  <div class="form-group">
    <label>Card number</label>
    <div id="card-number-element"></div>
  </div>
  <div class="form-group">
    <label>Expiration date</label>
    <div id="card-expiry-element"></div>
  </div>
  <div class="form-group">
    <label>CVC</label>
    <div id="card-cvc-element"></div>
  </div>
  <button type="submit">Pay Now</button>
</form>

1. 初始化 Stripe Elements

在 JavaScript 文件中，使用以下代码初始化 Stripe Elements：

// javascriptcn.com 代码示例
const stripe = Stripe('your_stripe_api_key');
const elements = stripe.elements();
const cardNumberElement = elements.create('cardNumber');
const cardExpiryElement = elements.create('cardExpiry');
const cardCvcElement = elements.create('cardCvc');

cardNumberElement.mount('#card-number-element');
cardExpiryElement.mount('#card-expiry-element');
cardCvcElement.mount('#card-cvc-element');

1. 监听表单提交事件

在 JavaScript 文件中，使用以下代码监听表单提交事件：

// javascriptcn.com 代码示例
const paymentForm = document.querySelector('#payment-form');

paymentForm.addEventListener('submit', async (event) => {
  event.preventDefault();

  const { paymentMethod, error } = await stripe.createPaymentMethod({
    type: 'card',
    card: cardNumberElement,
    billing_details: {
      name: 'John Doe',
    },
  });

  if (error) {
    console.error(error);
  } else {
    console.log(paymentMethod);
  }
});

1. 发送支付请求并获取支付凭据

在 JavaScript 文件中，使用以下代码发送支付请求并获取支付凭据：

// javascriptcn.com 代码示例
const paymentForm = document.querySelector('#payment-form');

paymentForm.addEventListener('submit', async (event) => {
  event.preventDefault();

  const { paymentMethod, error } = await stripe.createPaymentMethod({
    type: 'card',
    card: cardNumberElement,
    billing_details: {
      name: 'John Doe',
    },
  });

  if (error) {
    console.error(error);
  } else {
    const { id } = paymentMethod;

    const response = await fetch('/process-payment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        payment_method_id: id,
      }),
    });

    const data = await response.json();

    console.log(data);
  }
});

1. 在服务器端处理支付凭据

在服务器端，使用 Stripe API 验证并处理支付凭据。以下是一个简单的 Node.js 服务器端例子：

// javascriptcn.com 代码示例
const stripe = require('stripe')('your_stripe_api_key');

app.post('/process-payment', async (req, res) => {
  const { payment_method_id } = req.body;

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: 1000,
      currency: 'usd',
      payment_method: payment_method_id,
      confirmation_method: 'manual',
      confirm: true,
    });

    res.json({ success: true });
  } catch (err) {
    console.error(err);
    res.json({ success: false });
  }
});

总结

本文介绍了如何在 Deno 应用中使用 Stripe 支付，包括创建 Stripe 帐户并获取 API 密钥、创建 Stripe 支付表单、发送支付请求并获取支付凭据、在服务器端处理支付凭据等步骤。使用 Stripe 支付可以为网站或应用提供便捷、快速、安全的支付服务，希望本文能对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65729306d2f5e1655db7af61