使用Vue-Stripe构建结帐按钮-DEV365 开发者社区

tl; dr

在此博客文章中，我解释了如何使用vue-stripe构建非常简单的产品页面，以便您今天开始销售产品或服务。
我还将谈论如何使用称为Dashcam的工具解决最常见的问题。

为什么？

在线销售很有趣！如果您有一个要货币化的项目，这是最快入门的方法！

让我们开始吧！ ð¥

让我们假设您已经安装了node.js和NPM。如果不是，you can learn how to do it here

我们要做的第一件事就是设置环境。我们将成为超级香草，并制作一个名为：
的文件夹

stripe-vue

这将是根目录，我们将在其中启动我们的VUE项目！

继续在您选择的终端中键入以下命令：

mkdir stripe-vue && cd stripe-vue

接下来，我们要启动一个VUE项目，所以让我们创建一个Vue App

npm init vue@latest

这样做的是，它以 vue.js 为npm初始化一个新项目。

我使用vue@latest-因为@latest表示应安装最新版本的vue.js。

ðä«
（我使用NPM，但是如果您更高级或挑剔，则可以选择您的包装管理器）

配置您的VUE项目

运行此命令时，npm会提示您提供有关该项目的信息（例如，项目名称，选项等）。
npm将生成一个软件包。就个人而言，我在每个选项上选择 no ，因为我只是构建一个简单的结帐按钮，但是您的里程可能会有所不同

在此步骤之后，CLI告诉我运行一些命令

cd vue-stripe-checkout
npm install
npm run dev

我要跑到其中的前两个，，但不是最后一个，因为我还不想运行该项目...！

前两个命令将我放在实际的项目文件夹中，我们的代码将进入并安装依赖项。

完成后，我需要一个依赖性：vue-stripe

npm install @vue-stripe/vue-stripe

等等！ ð在继续之前！

在条纹上创建产品和价格，并启用结帐

如果您想卖东西，需要告诉条纹您要出售的东西。

在此演示中，我们要出售辣味调味品/每罐15美元。很好，我保证

创建产品和设定价格

在继续之前，我们必须在Stripe的一边做一些事情。我们必须创建产品，并将价格贴上。 There's a beautiful step by step tutorial on the Stripe Doc portal

一旦您以价格创建了产品，您需要记下 sku ID ，您可以在刚创建的产品设置页面上找到它，看起来像sku_OHSgXJ1rXvtqrt

使用SKU ID值将告诉Stripe的结帐以找到产品的默认价格。

创造产品价格

如果您对同一产品有多个价格（也许您提供不同的地理位置/货币），而不是注意 sku ID （红色箭头），请找到 Price ID ID （绿色箭头）

确保启用结帐

我们还需要确保启用结帐功能，这只是一个开关，可以快速完成，the docs on Stripe's website clearly show the steps

创建产品后，将价格附加到了它（和另一个价格）之后，请确保启用结帐吧。现在，让我们继续在VUE中创建实际的结帐页面。

创建VUE组件

回到我们的VUE项目，让我们在组件文件夹中创建一个新文件，如果您遵循本文，应该逐步进行：

stripe-vue/vue-stripe-checkout/src/components/CheckoutButton.vue

现在，让我们编写一些代码。

打开结帐组件，让我们构建一个将导致条纹结帐的按钮，首先是从vue-stripe库中导入StripeCheckout

然后，我们将用默认导出导出一个对象。

我们将StripeCheckout作为可导出的组件。这样，它可以在我们的应用中渲染并使用！

<template>
  <!-- We're going to put our Stripe Checkout code here in a moment -->
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
};
</script>

接下来，我们将编写一些代码来自定义条纹结帐按钮。

我们将在<template></template>部分中的此组件中编写一些代码。

<template>
    <div>
      <stripe-checkout
        ref="checkoutRef"
        mode="payment"
        :pk="publishableKey"
        :line-items="lineItems"
        :success-url="successURL"
        :cancel-url="cancelURL"
        @loading="v => loading = v"
      />
      <button @click="submit">Pay now!</button>
    </div>
  </template>

这里有趣的事情要注意：

模式：这是我们要求Stripe创建的结帐类型，无论是payment或subscription。我们正在制作一次性付款表，所以让我们将其设置为payment。
行项目：客户应购买的物品，在结帐界面上显示并弥补通过结帐收集的总金额。
成功的URL：购买后重新定向客户的成功URL
cancel-url：取消付款时我们应该重定向客户的取消URL（即，单击Stripe Checkout Checkout ui上的背面箭头UI）

另外，让我们添加一个带有标签的按钮，上面写着“立即付款！”因此，我们可以在单击按钮时购买我们要出售的辛辣罐调味品。
让我们编写一些JavaScript以指定我们的条纹结帐的配置，一旦单击按钮！

！

Vue-Stripe组件设置

现在让我们挂起我们添加的组件，并可以购买。

我们将在<script></script>标签之间进行这样的设置

请注意，我们必须设置几个变量：

PublishableKey：您的PK来自Stripe的开发人员仪表板
lineItems：一个对象数组；每个对象都有您要出售的产品和数量的价格价格。您可以在此数组中有多个对象来创建更多“复杂”结帐，例如，如果您一次出售多个产品
succesurl ：用户购买后URL的价值
cancelll ：如果用户取消URL的值

<script>
  import { StripeCheckout } from '@vue-stripe/vue-stripe';
  export default {
    components: {
      StripeCheckout,
    },
    data () {
      return {
        publishableKey: "<YOUR-STRIPE-PUBLIC-KEY>",
        loading: false,
        lineItems: [
          {
            price: '<YOUR-SKU-ID>', // The SKU id of the product created in the Stripe dashboard
            //price: '<YOUR-PRICE-ID>', // the Price id of the product I want to sell, if you have multiple prices, pick one

            quantity: 1,
          }
        ],
        successURL: '<URL_SUCCESS>',
        cancelURL: '<URL_CANCEL>',
      };
    },
    methods: {
      submit () {
        this.$refs.checkoutRef.redirectToCheckout();
      },
    },
  };
  </script>

现在我们已经完成了代码，我们的最终组件应该看起来像这样：

<template>
    <div>
      <stripe-checkout
        ref="checkoutRef"
        mode="payment"
        :pk="publishableKey"
        :line-items="lineItems"
        :success-url="successURL"
        :cancel-url="cancelURL"
        @loading="v => loading = v"
      />
      <button @click="submit">Pay now!</button>
    </div>
  </template>
<script>
  import { StripeCheckout } from '@vue-stripe/vue-stripe';
  export default {
    components: {
      StripeCheckout,
    },
    data () {
      return {
        publishableKey: "<YOUR-STRIPE-PUBLIC-KEY>",
        loading: false,
        lineItems: [
          {
            price: '<YOUR-SKU-ID>', // The SKU id of the product created in the Stripe dashboard
            //price: '<YOUR-PRICE-ID>', // the Price id of the product I want to sell, if you have multiple prices, pick one

            quantity: 1,
          }
        ],
        successURL: '<URL_SUCCESS>',
        cancelURL: '<URL_CANCEL>',
      };
    },
    methods: {
      submit () {
        this.$refs.checkoutRef.redirectToCheckout();
      },
    },
  };
  </script>

显示结帐组件

我们将将组件加载到App.vue文件中，以便将其显示给我们的

因此，创建一个App.vue文件（如果存在，删除原始文件），让我们编写一些代码

<script setup>
import CheckoutButton from './components/CheckoutButton.vue'
</script>

<template>
  <div>
    <h1>Purchase a Spicy Jar</h1>
    <p>A Spicy Jar of condiment, delicious and adds a touch of fire to blander dishes</p>
    <div id="image"></div>
    <Checkout></Checkout>
</div>
</template>

<style>
  #app {display: inline-block;}
  #image {
    width: 108px; 
    height: 108px; 
    border-radius: 4px;
    background-size: cover;
    background-image: url("https://stripe-camo.global.ssl.fastly.net/1da6f350ad1131277e51712ee1b3a992efb07a9333055c2926e8db1ceb633ab6/68747470733a2f2f66696c65732e7374726970652e636f6d2f6c696e6b732f4d44423859574e6a6446387851335673596e564762484e50633367355a58565366475a735833526c6333526663564a3463577075617a4a51654746784e57786857585a61656c4261633063793030657347736d436d4f");
  }
</style>