陈潇冰 react权威指南_React中条带化付款的分步指南
陈潇冰 react权威指南
This is an adapted from several excerpts from Scott Hasbrouck's book, "The Node.js Engineer's Guide to Stripe" - Available Now! with a 10% discount for David Walsh readers with code: WALSH10
这是从Scott Hasbrouck的书“ The Node.js Stripe Engineer's Guide to Stripe”的摘录中摘录的- 现在可以使用! 使用代码 : WALSH10的 David Walsh读者 可获得 10%的折扣
我们将涵盖的内容 (What We’ll Cover)
- Replace Checkout.js with Stripe.js
用Stripe.js替换Checkout.js - Removing the Checkout.js button
删除Checkout.js按钮 - Adding required Stripe fields
添加必需的条带字段 - Integration the form action with Stripe.js
将表单动作与Stripe.js集成
When you first build a Stripe integration, the advantage of Checkout.js over Stripe.js is its ease of integration and speed to a working app. However, it does not allow adding any additional input fields. In many situations, you'll want to collect other values such as Quantity, a drop down of products, shipping address, etc, and submit it with the same form that collects payment details. Or perhaps, you really just want a uniform style with the rest of your app that doesn't require a modal dialog to popup. Stripe’s smaller frontend library, called Stripe.js, does not include any UI elements but has all of the client side API functionality of generating payment tokens. Customizing the payment form will require no changes to the backend functionality of your Node.js app, because the front end will still be generating the same payment token.
首次构建Stripe集成时,Checkout.js优于Stripe.js的优点是易于集成,并且可以加快运行中的应用程序的运行速度。 但是,它不允许添加任何其他输入字段。 在许多情况下,您需要收集其他值,例如数量,产品下拉列表,送货地址等,然后以收集付款明细的相同表格提交。 或者,也许您真的只想要与应用程序其余部分保持一致的样式,而无需弹出模态对话框。 Stripe的较小的前端库称为Stripe.js,它不包含任何UI元素,但具有生成支付令牌的所有客户端API功能。 自定义付款表格将不需要更改Node.js应用程序的后端功能,因为前端仍将生成相同的付款令牌。
Checkout.js功能的简要概述 (Brief Overview of Checkout.js Functionality)
Checkout.js bundles the cardholder data collection mechanism with a beautiful and easy to integrate modal popup form that collects that payment details from the user. This is a fantastic option for putting together a very quick Stripe integration, but will not seamlessly flow with the rest of your user interface. This is where Stripe.js come into play. The API still offers JavaScript methods for sending the payment details directly to Stripe, and receiving a payment token to represent the payment.
Checkout.js将持卡人数据收集机制与美观且易于集成的模式弹出式表格捆绑在一起,该表格可从用户那里收集付款细节。 这是将非常快速的Stripe集成在一起的绝佳选择,但不会与用户界面的其余部分无缝连接。 这就是Stripe.js发挥作用的地方。 该API仍提供JavaScript方法,用于将付款明细直接发送到Stripe,并接收代表付款的付款令牌。
安装Stripe.js (Installing Stripe.js)
<html>
<head>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
</head>
<body style="margin: 0px;">
<div id="main"></div>
<script src="react-bundle.js"></script>
</body>
<html>
A much better option would be to dynamically load this script with ReactScriptLoader! Considering a React app is a Single Page App, there are likely huge chunks of your app that do not have a payment form. Why load Stripe.js for the entire page when we can simply load it for just the payment form component? Let's make an empty React component for our payment form and dynamically load Stripe.js (note, this method would work just as well for Checkout.js!):
一个更好的选择是动态加载这个脚本ReactScriptLoader! 考虑到React应用程序是单页应用程序,您的应用程序中可能有很大一部分没有付款表格。 当我们只需为付款表单组件简单地加载它时,为什么还要为整个页面加载Stripe.js? 让我们为付款表单制作一个空的React组件,并动态加载Stripe.js(注意,此方法对Checkout.js同样适用!):
var React = require('react');
var ReactScriptLoaderMixin = require('react-script-loader').ReactScriptLoaderMixin;
var PaymentForm = React.createClass({
mixins: [ ReactScriptLoaderMixin ],
getInitialState: function() {
return {
stripeLoading: true,
stripeLoadingError: false
};
},
getScriptURL: function() {
return 'https://js.stripe.com/v2/';
},
onScriptLoaded: function() {
if (!PaymentForm.getStripeToken) {
// Put your publishable key here
Stripe.setPublishableKey('pk_test_xxxx');
this.setState({ stripeLoading: false, stripeLoadingError: false });
}
},
onScriptError: function() {
this.setState({ stripeLoading: false, stripeLoadingError: true });
},
render: function() {
if (this.state.stripeLoading) {
return <div>Loading</div>;
}
else if (this.state.stripeLoadingError) {
return <div>Error</div>;
}
else {
return <div>Loaded!</div>;
}
}
});
module.exports = PaymentForm;
The ReactScriptLoaderMixin begins loading the remote script, and upon successfully loading it, or reaching an error, will invoke one of two event listeners. Once the script is successfully loaded, we can set the public key for Stripe.js. This in turn, gives us a conditional in the render function for three states of loading, errored, or loaded! Note that this method can also be used to load Checkout.js.
ReactScriptLoaderMixin开始加载远程脚本,并在成功加载它或遇到错误后,将调用两个事件侦听器之一。 成功加载脚本后,我们可以为Stripe.js设置公钥。 反过来,这为我们在渲染函数中提供了一个条件,用于加载,错误或加载的三种状态! 请注意,此方法也可以用于加载Checkout.js。
建立表格 (Building the Form)
现在我们已经加载了一个Stripe.js的React组件,让我们开始构建自定义付款表单。 至少,我们需要为Stripe收集四个值以为我们生成一个支付令牌:信用卡号,到期月份,到期年份和cvc。
var React = require('react');
var ReactScriptLoaderMixin = require('react-script-loader').ReactScriptLoaderMixin;
var PaymentForm = React.createClass({
mixins: [ ReactScriptLoaderMixin ],
getInitialState: function() {
return {
stripeLoading: true,
stripeLoadingError: false,
submitDisabled: false,
paymentError: null,
paymentComplete: false,
token: null
};
},
getScriptURL: function() {
return 'https://js.stripe.com/v2/';
},
onScriptLoaded: function() {
if (!PaymentForm.getStripeToken) {
// Put your publishable key here
Stripe.setPublishableKey('pk_test_xxxx');
this.setState({ stripeLoading: false, stripeLoadingError: false });
}
},
onScriptError: function() {
this.setState({ stripeLoading: false, stripeLoadingError: true });
},
onSubmit: function(event) {
var self = this;
event.preventDefault();
this.setState({ submitDisabled: true, paymentError: null });
// send form here
Stripe.createToken(event.target, function(status, response) {
if (response.error) {
self.setState({ paymentError: response.error.message, submitDisabled: false });
}
else {
self.setState({ paymentComplete: true, submitDisabled: false, token: response.id });
// make request to your server here!
}
});
},
render: function() {
if (this.state.stripeLoading) {
return <div>Loading</div>;
}
else if (this.state.stripeLoadingError) {
return <div>Error</div>;
}
else if (this.state.paymentComplete) {
return <div>Payment Complete!</div>;
}
else {
return (<form onSubmit={this.onSubmit} >
<span>{ this.state.paymentError }</span><br />
<input type='text' data-stripe='number' placeholder='credit card number' /><br />
<input type='text' data-stripe='exp-month' placeholder='expiration month' /><br />
<input type='text' data-stripe='exp-year' placeholder='expiration year' /><br />
<input type='text' data-stripe='cvc' placeholder='cvc' /><br />
<input disabled={this.state.submitDisabled} type='submit' value='Purchase' />
</form>);
}
}
});
module.exports = PaymentForm;
Once Stripe.js is loaded, our payment form component returns a form with the required input fields. We’ve added the required data-stripe attributes per the Stripe documentation. The form onSubmit event invokes a handler on our component which calls Stripe.createToken(). If an error is returned, we display that to our users by setting state.paymentError equal to the error message. Otherwise, we set the payment is complete with this.paymentComplete, and that is also the point where we would pass the token and required purchasing information to our server with a module such as superagent.
加载Stripe.js后,我们的付款表单组件将返回带有必需输入字段的表单。 我们已根据Stripe文档添加了必需的数据条带属性。 形式onSubmit事件会在我们的组件上调用一个处理程序,该处理程序调用Stripe.createToken()。 如果返回错误,我们通过将state.paymentError设置为等于错误消息来向用户显示该错误。 否则,我们将使用this.paymentComplete设置付款完成,这也是我们将令牌和所需的购买信息通过诸如superagent之类的模块传递给服务器的关键点。
摘要 (Summary)
Checkout.js does add a layer of perceived security by showing the Stripe brand, and recognizing the card type as you enter your credit card number. I would recommend putting some effort into showing visual clues of security for the user when building your own form, also. For example, this would be a great place to show your SSL certificate badge from Comodo or Network Solutions. To further comfort your users, integrating something similar to react-credit-card would be a great finishing touch. This component automatically detects credit card type, and shows the appropriate logo on a CSS generated credit card, along with the credit card number itself.
Checkout.js通过显示Stripe品牌并在您输入信用卡号时识别卡类型,确实增加了可感知的安全性。 我建议在构建自己的表单时也要花一些力气为用户显示安全性的视觉线索。 例如,这是一个显示Comodo或Network Solutions的SSL证书徽章的好地方。 为了进一步让您的用户满意,集成类似于react-credit-card的功能将是一个很好的画龙点睛。 该组件自动检测信用卡类型,并在CSS生成的信用卡上显示适当的徽标以及信用卡号本身。
Thankfully, integrating Stripe on your front end is fairly straightforward - it does not really get much more complicated than this! The real work (and fun!) begins on your server code, which can become complicated and buggy if you are doing more than accepting one-time payments for non-repeat users. Best of luck on your online payment endeavors with JavaScript, and if you want input on your own projects, or have feedback with how you've integrated Stripe with React please reach out or comment! The first five people to leave a comment about their favorite takeaway from this post or React tip and tweet the article will recieve a FREE copy of my book: The Node.js Engineer's Guide to Stripe! Just mention me in the tweet and I will DM you directions on how to claim your copy.
幸运的是,在您的前端上集成Stripe非常简单-并没有比这复杂得多! 真正的工作(很有趣!)始于您的服务器代码,如果您要做的不仅仅是接受非重复用户的一次性付款,这可能会变得很复杂且容易出错。 祝您使用JavaScript进行在线支付时万事如意,如果您想在自己的项目中输入信息,或者对将Stripe与React集成的方式有任何反馈,请联系或发表评论! 前五个对本文或React技巧中最喜欢的内容发表评论并在推特上发表评论的人将获得我的书的免费副本:Node.js Stripe工程师指南! 只需在推文中提及我,我将向您发送有关如何索取您的副本的指示。
翻译自: https://davidwalsh.name/step-step-guide-stripe-payments-react
陈潇冰 react权威指南
相关文章:
- ListViewItem实现listview中条目的显示控制
- SpringBoot 在main或者普通类中条用service接口
- RAID中条带的概念
- vue iframe里内容无法撑开高度 固定150px 解决方法
- ubuntu20.04安装PX4固件错误总结
- CSS 字符间距letter-spacing属性
- “postcss-px-to-viewport”——移动端前端适配的又一种方案
- DIV + CSS 学习笔记(盒模型)
- px、rem、em的区别与联系
- css元素旋转原点,使用transform-origin属性改变元素变换原点
- px、em 和 rem 三者区别
- css的优先级和权重问题 以及!important优先级
- css实现1px的几种办法
- 用css动态实现圆环百分比分配——初探css3动画
- padding在css中是什么意思,padding
- css简单样式(旋转正方形、纸片旋转、轮播图3D、简单轮播图)
- CSS3 使用 calc() 计算高度 vh px
- CSS中垂直居中的七种方法
- border-radius属性的使用方法
- rem与px换算
- 关于CSS中left:50%; top:50%; margin-left: -150px; margin-top: -75px;
- layer弹出iframe的高度不自适应。一直是150px
- 微信小程序选项卡swiper默认高度150px(让高度实现自适应)怎么解决?
- 微信小程序-----解决swiper默认高度150px
- 小试牛刀的图片
- 今天的小试
- YOLOv5小试
- 小试vue
- python牛刀小试 - 两数之和
- JCTF 2014 -小试身手
陈潇冰 react权威指南_React中条带化付款的分步指南相关推荐
- react同步请求_React中setState同步更新策略
setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...
- react 条件渲染_React中的条件渲染语法
react 条件渲染 为什么我们不能使用If-Else以及三元运算符如何提供帮助 (Why We Can't Use If-Else and How the Ternary Operator can ...
- react 嵌套渲染_React 中嵌套数组数据如何渲染到前端页面
现在有后端提供的类似下面这种格式的数据 { status:X, body: [ {year: 2017, month: [December, October, ...]} {year: 2016, m ...
- react回调函数_React中的回调中自动绑定ES6类函数
在使用ES6类的React组件时,您必须遇到这种现象,必须显式绑定类函数,然后将其传递给诸如onClick.例如,采用以下示例. import React from 'react';class MyC ...
- react 元素延迟加载_React中的延迟加载路线
react 元素延迟加载 As developers, when we build apps for users on the internet, it is very important to en ...
- react取消捕获_React中阻止事件冒泡的问题详析
前言 最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始 ...
- react封装函数_React中函数式声明组件
前文介绍的组件的定义方式主要是声明式组件,其与传统的jQuery中以DOM操作为核心的命令式组件生成相比具有更大的灵活性与可组合性.而实际上随着应用复杂度与所需要的组件数目的持续增加,我们所需要的组件 ...
- react动画库_React 2020动画库
react动画库 Animations are important in instances like page transitions, scroll events, entering and ex ...
- 如何在React Native和Firebase中设置Google登录
Google sign-in is a great login feature to offer to your app's users. It makes it easier for them to ...
最新文章
- 通过WebService调用SQLXML(SQL Server 2005) [ZT]
- js 获取 eWebEditor 的内容
- C语言N台服务器通信,使用socket的Linux上的C语言文件传输顺序服务器和客户端示例程序 ....
- 蔚来汽车5月份交付6711辆电动汽车 同比增长95.3%
- 11.2.3 退出Vim编辑器
- java歌词添加,分享 :java实现 歌词文件的智能命名解决方法
- vue富文本编辑器 Vue-Quill-Editor
- Python文章归档
- Object中Equals和ReferenceEquals不解之谜
- 教程,word导出为pdf既要书签和链接又要高清图片
- python画3维图_python如何画三维图像?
- 你肯定用过手机护眼模式, 但你知道怎么将电脑Win10窗口背景色修改为护眼的淡绿色吗?(附带如何备份注册表)
- 《弦理论》--笔记读后感
- 反光衣穿戴识别检测系统 OpenCV
- unity粒子实现烟雾效果
- 心理测评软件php mysql_心理测评系统
- 【2013最新XP系统下载】木叶 GhostXP SP3 装机版_2013.09
- 自由之城开启,Free DAO元宇宙将是开启的密钥
- CAD主流电气原理图,通俗易懂,合适工控爱好者学习
- 日本品牌山地车java_2018“JAVA(佳沃)杯”第九届凤凰山山地自行车挑战赛在深圳举行...
热门文章
- 华硕EZ模式下安装windows10成功方法总结
- GENI: Estimating Node Importance in Knowledge Graphs Using Graph Neural Networks
- 自顶向下计算机网络 传输层
- typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)
- 打印机驱动下载,有哪些下载途径推荐?
- Unity-技术美术 199-208
- BZOJ 1812 IOI 2005 riv
- 【附源码】计算机毕业设计SSM商品推荐系统
- R语言rjags使用随机效应进行臭氧数据分析
- 数据库选课系统mysql_数据库设计(学生选课系统).doc