与电容器和nodejs集成了离子VUE JS应用中的条纹付款-DEV365 开发者社区

此代码将向您展示如何使用Capacitor Community Stripe Plugin设置Ionic Vue应用程序以支持条纹的付款表。我们还将创建一个小型服务器应用程序以在本地运行，以创建应用程序与条纹正常工作所需的付款意图秘密。最后，我们将展示如何使用Ionic Capacitor

将应用程序包装和部署到移动设备

您需要为此演示设置Stripe帐户。请参阅文档以在此处设置您的帐户-https://stripe.com/docs/implementation-guides/core-payments/welcome-stripe

视频

vue客户端应用程序

创建离子Vue应用程序

ionic start --type vue

使用以下命令安装电容器条纹插件：

npm install @capacitor-community/stripe

其他插件配置可在此处提供https://stripe.capacitorjs.jp/docs/configuration

在项目的根部创建.env以保持

VITE_STRIPE_PUBLISHABLE_KEY='pk_test_VALUE'

用您的应用程序中的可发布键初始化条纹插件：

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script setup lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { Capacitor } from '@capacitor/core';
import { Stripe } from '@capacitor-community/stripe';

// Initialize the Stripe plugin
if (Capacitor.isPluginAvailable("Stripe")) {
  debugger;
  Stripe.initialize({
    publishableKey : import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY,
  })
}
</script>

为StripeCheckoutButton创建一个新组件并添加以下代码。

确保调整API调用的IP地址以匹配计算机的地址，以便在设备上适当测试。

此代码完成了两件事
1）拨打API以从服务器中获取付款意图
2）出示付款表以从用户那里获取信用卡信息并向用户收取费用。

<template>
    <ion-button @click=handleCheckout :disabled="loading">
      {{loading ? "Loading..." : "Checkout - Payment Sheet"}}
    </ion-button>
</template>
<script setup lang="ts">
import { Stripe } from "@capacitor-community/stripe";
import { ref } from 'vue';
import { IonButton } from "@ionic/vue";

const loading = ref<boolean>(false);

const handleCheckout = async () => {
    loading.value =true;

    try {
      const response = await fetch(
        "http://192.168.1.56:3000/create-payment-intent",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ amount: 1000, currency: "usd" }),
        }
      );

      const data = await response.json();
      console.log("PaymentIntent client secret:", data.clientSecret);

      await Stripe.createPaymentSheet({
        paymentIntentClientSecret: data.clientSecret,
        merchantDisplayName: "Inclusive Innovation Incubator",
      });

      const { paymentResult } = await Stripe.presentPaymentSheet();
      console.log(paymentResult);

    } catch (error) {
      console.error("Payment failed:", error);
    } finally {
      loading.value = false;
    }
  };
</script>

显示付款表时，用户可以输入其付款信息并提交付款。如果付款成功，则支付意志对象将包含有关成功付款的信息。如果付款失败，将丢失错误。

服务器

我们需要在服务器上创建一个付款意图端点，以创建付款客户的秘密并将其传递给付款表。

出于本示例的目的，我们将创建一个小节点服务器并在本地运行。

首先在您的项目中创建一个名为Server的新目录

mkdir server
cd server

然后初始化节点项目

npm init

然后安装所需的库

npm install express body-parser cors stripe

首先，使用Node.js Project root Directory中的以下命令安装一个名为DOTENV的NPM软件包；

npm install dotenv --save

dotenv软件包自动将.ENV文件的环境变量自动加载到node.js应用程序中的process对象。

在您的服务器根目录中创建一个.env文件并添加条纹键，我们将在createPaymentIntent方法中使用它

STRIPE_SECRET_KEY='sk_test_VALUE'

下一步创建一个名为index.js的文件作为服务器的主文件；它有一条路线/create-payment-intent。

在此代码中，我们正在从createPaymentIntent.js文件中导入createPaymentIntent方法，并设置了一个Express应用程序，该应用程序会听取邮政请求到 /createPaymentIntent path。< /p>

当在此路径上收到邮政请求时，createPaymentIntent函数将带有请求和响应对象。

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { createPaymentIntent } = require('./createPaymentIntent');

const app = express();

app.use(bodyParser.json());
app.use(cors());

app.post('/create-payment-intent', createPaymentIntent);

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

然后创建具有/create-payment-intent路由代码的文件。

在此代码中，我们需要条纹软件包并创建一个createPaymentIntent函数，该功能涉及req（request）和res（wendesp）对象。

在功能中，我们正在从请求正文中提取金额和货币值，并使用Stripe SDK与这些值创建新的付款意图。

创建了付款意图后，我们将向客户秘密发送回响应机构中的客户，然后可以使用该客户来完成付款过程。

在这里，我们还使用.env文件中的信息来设置API键

require('dotenv').config();
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

function createPaymentIntent(req, res) {
  const { amount, currency } = req.body;

  stripe.paymentIntents.create({
    amount,
    currency,
    // You can also add additional parameters here, such as a customer ID or payment method ID
    metadata: { integration_check: 'accept_a_payment' },
  })
    .then(paymentIntent => {
      res.json({ clientSecret: paymentIntent.client_secret });
    })
    .catch(error => {
      console.error(error);
      res.status(500).send({ error: 'An error occurred while creating the payment intent' });
    });
}

module.exports = {
  createPaymentIntent,
};

要运行服务器，请导航到index.js文件所在的目录，然后运行node index.js。这将启动服务器，并允许您在本地测试您的付款过程。

您也可以使用邮递员或雷霆之类的客户端在本地测试API

运行应用程序

首先启动节点服务器

node index.js

下一个启动您的电容器应用程序，我正在使用iOS，因此我需要添加电容器iOS软件包。

npx cap add ios

实际构建和运行项目，然后使用以下命令

npx cap add ios
npx ionic build
npx cap copy ios;
npx cap run ios --external --no-build --no-sync

链接

Stripe插件-https://stripe.capacitorjs.jp/
电容器-https://capacitorjs.com/
离子vue -https://ionicframework.com/docs/vue
Stripe帐户设置-https://stripe.com/docs/implementation-guides/core-payments/welcome-stripe