Stripe 是处理在线支付的最佳方式之一,最近他们发布了 Stripe Elements。Stripe Elements是他们预先构建的 UI 组件库,可帮助您轻松创建自己的结帐流程。现在,为您的应用设置自定义支付表单比以往任何时候都更容易,但是在集成两者时需要注意一些问题。

在这篇文章中,我将向您展示如何集成 Vue.js 和 Stripe Elements,以便您可以在您的网站或应用程序中快速设置自定义卡支付表单。

如果您有兴趣将 Stipe Elements 集成到 Angular 应用程序中,请查看这篇文章。

什么是条纹元素?

Stripe Elements 是一个包含各种元素的组件集合,您可以使用这些元素创建结帐表单,例如用于从用户那里收集信息的按钮和输入。我们将在这篇文章中重点关注的是卡片元素。卡片元素可让您在一个元素中收集卡片信息。它包括一个动态更新的卡片品牌图标以及数字、有效期、CVC 和邮政编码的输入。

安装

Stripe Elements 可作为 Stripe.js 的一部分使用,因此您所要做的就是在页面中包含带有以下脚本标记的脚本。 Stripe 建议始终使用以下网址将其直接包含在您的 index.html 页面中:

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

初始化卡元素

Stripe Elements 处理和初始化它自己的 UI,因此如果 Vue.js 在 Stripe Elements 之前初始化可能会发生冲突。为避免这种情况,请在 Vue.js 元素安装到 DOM 后设置 Stripe Elements。

<template>
  <div ref="card"></div>
</template>

<script>
let stripe = Stripe(`YOUR_STRIPE_PUBLISHABLE_KEY`),
    elements = stripe.elements(),
    card = undefined;

export default {
  mounted: function () {
    card = elements.create('card');
    card.mount(this.$refs.card);
  }
};
</script>

自定义卡片元素样式

为了自定义元素的样式,您必须在对象内部声明样式:

let style = {
  base: {
    border: '1px solid #D8D8D8',
    borderRadius: '4px',
    color: "#000",
  },

  invalid: {
    // All of the error styles go inside of here.
  }

};

然后,您可以在初始化 card 元素时将该对象传递给 create 方法,这将确保您声明的样式应用于该元素。

card = elements.create('card', style);

收集Stripe Token

Stripe 允许您收集 Elements 收集的卡片信息并将其转换为一次性令牌,然后您可以将其传递到您的服务器以在 API 调用中使用。

您可以将purchase方法绑定到按钮,然后在该方法内调用stripe.createToken方法。

<template>
  <div ref="card"></div>
  <button v-on:click="purchase">Purchase</button>
</template>

<script>
let stripe = Stripe(`YOUR_STRIPE_PUBLISHABLE_KEY`),
    elements = stripe.elements(),
    card = undefined;

export default {
  mounted: function () {
    card = elements.create('card');
    card.mount(this.$refs.card);
  },

  purchase: function () {
    stripe.createToken(card).then(function(result) {
      // Access the token with result.token
    });
  }
};
</script>

捕获卡错误

card 元素将自动捕获不符合 Visa、MasterCard 和其他支持的卡类型语法的卡号错误。尽管如此,有时可能会出现不同类型的错误,Stripe Elements 允许您使用result.error变量在createToken方法内部处理该错误。

purchase: function () {

  let self = this;

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      self.hasCardErrors = true;
      self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update.
      return;
    }

  });
}

参考

Stripe Elements 是 Stripe 的解决方案,可以快速轻松地处理付款,并且非常容易集成到 Vue.js 项目中。请务必查看文档以获取更多信息。