使用Swift创建iPhone应用程序,该应用程序使用Stripe和Heroku向信用卡收费

使用Swift创建iPhone应用程序,该应用程序使用Stripe和Heroku向信用卡收费

初学者入门教程,在Swift iPhone 6 OS 9上使用Xcode和Sublime与Composer,CocoaPods,Stripe和Alamofire创建首次充电,该OS与从您的OS X El Capitan终端运行的PHP Heroku服务器通信。

YouTube教程:http://youtu.be/ndho8R-VAPc

登录到您的资料:

确保您具有Apple ID和密码
注册/登录Stripe.com
注册/登录heroku.com

更新您的资料:

最新的Xcode和Swift:https://developer.apple.com/downloads或http://adcdownload.apple.com/Developer_Tools/Xcode_7.3/Xcode_7.3.dmg
最新Sublime:https://www.sublimetext.com/3(我正在使用v2)
最新的作曲者:https://getcomposer.org/download/
最新的Git:https://git-scm.com/downloads或https://coolestguidesontheplanet.com/install-update-latest-version-git-mac-osx-10-9-mavericks/
最新的PHP:http://php-osx.liip.ch/或https://coolestguidesontheplanet.com/upgrade-php-on-osx/(我正在使用v5.5.30)
最新的Heroku工具带:https://toolbelt.heroku.com/
最新的CocoaPods:https://cocoapods.org/

准备你的东西:

在浏览器中打开两个新选项卡,然后登录Stripe和Heroku仪表板。
打开一个新的终端窗口(应用程序->实用程序->终端)

在终端窗口中,键入(在美元符号和空格后看到的单词),然后单击Enter:

  $ CD 

这将带我们回家,您的项目文件将在其中保存。 *如果您从未使用过终端,请在Codecademy(https://www.codecademy.com/learn/learn-the-command-line)上尝试本教程。将其弄乱几分钟,以便您轻松使用实际的终端。

现在,为您的新项目创建一个文件夹。

  $ mkdir stripe-app 
$ CD
$ ls
$打开条纹应用程序

这将创建一个名为stripe-test的新文件夹,将目录更改回主文件夹,列出主文件夹中的文件,然后在Finder窗口(可以关闭)中打开实际文件夹。

打开Xcode以创建一个名为Stripe-test的新Xcode项目作为Single View Application,并将其保存到刚创建的文件夹中(home-> stripe-test)。 不要忘记从应用程序的“常规”选项卡中选择团队。这可能需要您使用Apple ID和密码登录。 退出Xcode。

再次打开终端到服务器文件夹:

  $ CD 
$ cd stripe-app
$ mkdir stripe-server
$ CD
$清除

我们在这里所做的只是回到家,然后打开stripe-app,创建一个名为stripe-server的新文件夹,然后回到家并清除终端窗口。 至此,我们所有的文件夹结构均已就绪。 我们有一个通用文件夹,其中包含所有内容(home-> stripe-app),包括我们的Xcode项目(home-> stripe-app-> stripe-test)以及什么是我们的PHP服务器(home-> stripe-app->条带服务器)。

至此,我们准备创建与该应用进行通信以向您的客户收费的服务器。 如果您想知道这将如何工作。.该应用程序(在您的手机或Xcode上)将使用伪造的信用卡号请求令牌。 我们将其发送到带区服务器的PHP文件(该文件将在Heroku上托管,并且将要创建)以及有关收费的信息等。 就是这样! 只有两个文件夹! 带电!

好的,让我们创建此PHP文件(以及其他必要的文件),并将它们上传到Heroku!

首先,我们创建所有必需的PHP文件:

  $ CD 
$ cd stripe-app
$ cd条纹服务器
$ git init(在我们的文件夹中创建一个git repo,对于上传是必需的)
  $ composer需要stripe / stripe-php(将下载Stripe PHP软件包并将其安装到供应商文件夹中,并在您的根文件夹中创建两个composer文件) 
  $ touch Procfile(创建上传到Heroku所需的文件。不需要像.php这样的文件类型) 
  $ touch index.php(创建我们的第一页!只是为了教程的缘故。 
  $ touch charge.php(我们的第一个充电脚本所在的位置) 

这些操作将带您回家,打开stripe-app文件夹,打开stripe-server文件夹,启动git repo,并创建所有必要的文件来完成此工作。

在Sublime(或您喜欢的文本编辑器)中编辑Procfile。 我喜欢从终端打开整个文件夹,呵呵:

  $ CD 
$ cd stripe-app
$ sublime stripe-server

这将打开所有服务器文件。 从左侧选择一个文件并保存文件(如果进行了任何更改)。 然后在Sublime(或您的文本编辑器)中,打开Procfile并在第1行中键入:

 网站:vendor / bin / heroku-php-apache2 

保存文件。 这将告诉Heroku运行PHP以及有关根文件所在位置的信息。

现在,让我们编辑index.php文件以显示一个简单的问候:

   
  


<?php
回声“你好,世界!”;
?>

   

保存文件。 上传后,我们的索引页应仅显示一个字符串(我们刚刚键入的字符串),并且不会直接与iPhone / Xcode应用程序或Stripe本身进行通信。 这仅仅是为了让您了解如何将收费文件集成到任何在线网站中(当然,使用正确的安全措施)。

接下来,编辑您的charge.php文件以方便充电。 这是您要在charge.php文件中使用的实际代码:

  <?php 
  require_once('vendor / autoload.php'); 
  //在这里查看您的密钥https://dashboard.stripe.com/account/apikeys 
\ Stripe \ Stripe :: setApiKey(“ sk_test_randomcharactersfromyourstripeaccount”);
  //获取表单提交的信用卡详细信息 
$ token = $ _POST ['stripeToken'];
$ amount = $ _POST ['amount'];
$ currency = $ _POST ['currency'];
$ description = $ _POST ['description'];
  //这是一次充电的简单逻辑 
尝试{
$ charge = \ Stripe \ Charge :: create(array(
“ amount” => $ amount * 100,//将以美分表示的金额转换为美元
“ currency” => $ currency,
“源” => $ token,
“ description” => $ description)
);
  //检查是否已付款: 
如果($ charge-> paid == true){
$ response = array('status'=>'Success','message'=>'Payment has been paid !!');
} else {//未支付费用!
$ response = array('status'=>'Failure','message'=>'由于付款系统拒绝了交易,您的付款无法处理。您可以重试或使用另一张卡。');
}
header('Content-Type:application / json');
回声json_encode($ response);
  } catch(\ Stripe \ Error \ Card $ e){ 
//卡已被拒绝
  header('Content-Type:application / json'); 
回声json_encode($ response);
}
  ?> 

如果分解此代码,您将看到只有三个步骤:
* require_once会将stripe php包添加到页面(运行composer命令时,该包已放在供应商文件夹中),并且设置ApiKey是Stripe确定汇款地点的方式。
*在尝试下,服务器将收集从iPhone / Xcode发布的费用信息,其中包括令牌,费用金额,货币和费用说明。
* stripe会尝试以给定的金额从卡中扣款,如果成功,则将返回表示成功的回复!

保存所有更改的文件(Procfile,index.php和charge.php),然后从终端上载到Heroku:

  $ CD 
$ cd stripe-app
$ cd条纹服务器
*请务必确保您打开了Stripe服务器,否则我们最终也会从Stripe-Test文件夹中上传iPhone / Xcode应用程序。
  $ git添加。  (在您的仓库上创建一个新的分支) 
  $ git commit -m“首次上传”(将所有文件/更改后的文件添加到git) 
  $ heroku create(创建应用程序。可能会要求您登录heroku) 
  $ git push heroku master(将这些本地更改推到heroku上并推向世界!) 
  $ heroku打开 

到这个时候,我们已经为第一次充电完全设置了服务器!!! 在heroku open命令之后,终端将打开一个带有新应用程序链接(randomname.herokuapp.com)的页面,您唯一应该看到的就是Hello world!

准备就绪后,我们将在Xcode中创建一个简单的应用程序,该应用程序将创建我们需要收费的令牌以及所有需要发送到服务器进行收费的信息! 此时(盯着电脑超过30分钟),我可能会退出所有应用程序,清空垃圾桶,清洁物理桌面和实际桌面,然后重新启动Mac。 只是为了感到新鲜(ᵔᴥᵔ)

让我们创建需要下载的Pod文件,并将Stripe和Alamofire安装并安装到Xcode应用程序中:

  $ CD 
$ cd stripe-app
$ cd stripe-test(确保您位于此文件夹中,而不是位于包含Xcode资产的该文件夹内的其他stripe-test文件夹。您应位于的正确文件夹中包含一个名为stripe-test.xcodeproj的文件)
  $ pod init(创建Pod文件) 

这些命令打开主文件夹,打开stripe-app文件夹,然后打开包含我们的Xcode文件的stripe-test文件夹,然后创建(初始化)下载和安装Stripe和Alamofire所需的Pod文件。

在Sublime或任何其他文本编辑器中配置新创建的Podfile:

  $ CD 
$ cd stripe-app
$ cd条纹测试
$ sublime Podfile
 删除Podfile中的所有文本,并替换为: 
  pod'Stripe','〜> 6.2.0' 
平台:ios,“ 9.0”
use_frameworks!
  pod'Alamofire','〜> 3.3' 

保存文件,退出文本编辑器,然后返回到Terminal。

从终端下载并为您的Xcode应用安装Stripe和Alamofire:

  $ CD 
$ cd stripe-app
$ cd条纹测试
$ pod install(这将读取我们刚刚编辑/保存的Podfile)

现在,我们有了一个新的Xcode文件,其中包含所需的Stripe和Alamofire文件。 它称为stripe-test.xcworkspace,我们将从现在开始使用此文件,而不是stripe-test.xcodeproj。 任何时候您想添加或删除Pod,只需编辑Podfile以反映这些更改,然后在终端中打开包含Podfile的文件夹,然后键入$ pod install。 要对任何这些依赖项进行简单更新,请执行相同的步骤,然后键入$ pod update。

创建一个Bridging-Header,将Stripe的代码转换为Swift:
*单击左侧导航器中的stripe-test下拉文件夹。
*文件->新建->文件
*选择iOS->源->头文件
*将文件另存为默认文件夹中的stripe-test-bridging-header(与AppDelegate.swift所在的文件夹相同)
*在#define之后但#endif之前,包括以下内容并保存文件:

  #import  

*从“构建设置”选项卡中找到“ Objective-C桥接标题设置”,然后双击右侧以打开一个小的空白文本编辑器弹出窗口。在这里,您将键入此内容并单击“输入”框以保存:
条测试/条测试桥接header.h

编辑您的AppDelegate文件,以包含Stripe可发布密钥(与我们在PHP服务器中使用的API密钥不同)
*在导入UIKit的直接下一行中,输入import Stripe
*在application(didFinishLaunchingWithOptions)函数中,添加此函数并保存整个文件:

  Stripe.setDefaultPublishableKey(“ pk_test_randomcharactersfromyourstripeaccount”) 

这些步骤使我们可以导入Stripe文件,以使用Stripe.setDefaultPublishableKey函数。

大! 这样我们就快完成了! 现在我们已经配置了Xcode应用程序,剩下要做的就是在Main.storyboard中添加一个pay按钮,并添加创建信用卡表格并将信息发送到Stripe的代码逻辑。 该表格将自动从Stripe的包裹中提取,我们将自己添加“付款”按钮。 至于收费金额,币种和说明,我们将仅从代码中发送这些代码。在将来,您可能希望从用户在应用中的操作中收集这些变量,并将其发送到与我们相同的代码中即将开始。 让我们开始吧! (ᵔᴥᵔ)

在Main.storyboard中的ViewController中添加一个pay按钮:
*单击Main.storyboard,然后将一个按钮从右侧的工具栏拖到视图控制器上。 使用指南将其放置在页面的最左上角,然后将文字替换为Pay一词。 单击一次按钮(不进行编辑),然后单击:编辑器->解决自动布局问题->添加缺少的约束。

这样会将按钮锁定在您留下的位置,以免打扰信用卡表格。

为新创建的“付款”按钮创建商店和操作:
*查看->助手编辑器->显示助手编辑器
在左侧,您应该看到Main.Storyboard,在右侧,您应该打开ViewController.swift文件。
*删除整个didReceiveMemoryWarning()函数(从遍历fun didRec…到倒数第二个大括号)。
*右键单击并从“付款”按钮拖动到viewDidLoad函数上方,但位于UIViewController类下方的右侧。
*使用名称paypayOutlet连接插座。 结果将是:

  @IBOutlet弱var payButtonOutlet:UIButton! 

右键单击并再次从“付款”按钮拖动到viewDidLoad函数的下方(和外部)。 连接名称为payButtonAction的动作。 结果将是:

  @IBAction func payButtonAction(sender:AnyObject){ 
  } 

保存Main.storyboard和ViewController.swift文件。 至此,我们已经完全配置了可视情节提要板,并且可以专注于代码。 要仅使用代码切换到常规视图:视图->标准编辑器->显示标准编辑器。 选择ViewController.swift。

导入依赖关系,委托cc文本字段,然后创建cc文本字段:
*在导入UIKit下的直接行中,导入Stripe并导入Alamofire。
*在ViewController:UIViewController类之后,添加委托:

  ViewController类:UIViewController,STPPaymentCardTextFieldDelegate 

*在此新类下,但在payButtonOutlet之前,创建付款字段:

 让paymentTextField = STPPaymentCardTextField() 

*在viewDidLoad()函数中,创建抄送文本字段,并隐藏payButton:

  super.viewDidLoad(); 
paymentTextField.frame = CGRectMake(15,199,CGRectGetWidth(self.view.frame)-30,44)
paymentTextField.delegate =自我
view.addSubview(paymentTextField)
payButtonOutlet.hidden = true;

保存文件。 这将创建实际的抄送表单,委派所有者,添加到加载视图中,并隐藏“付款”按钮(直到我们验证了实际的信用卡)。

大! 因此,现在我们离创建第一笔费用仅几步之遥! 剩下要做的就是创建用于测试信用卡,创建令牌并将令牌发布到我们的PHP服务器的逻辑!

验证信用卡并取消隐藏“付款”按钮:

*在viewDidLoad下,但在payButtonAction函数上方,开始输入此内容并通过单击正确的选项进行选择: paymentCardTextFieldDidChange

如果选择正确,您应该会看到一个新的函数,如下所示:

  func paymentCardTextFieldDidChange(textField:STPPaymentCardTextField){ 
  } 

在此didChange函数中,创建一个if规则来检查信用卡的有效性,然后取消隐藏“付款”按钮:

 如果textField.valid { 
pay.hidden = false;
}

现在,当输入信用卡时,表格将等待有效的信用卡并显示“付款”按钮。

让我们创建令牌
*在我们之前创建的payButtonAction函数中,为卡参数(如number,exp)创建一个变量。 日期和cvc:

 让卡= paymentTextField.cardParams 

*使用Stripe软件包用卡创建令牌,并使用if else规则将令牌发送给我们将在此步骤之后创建的chargeUsingToken函数。 这段代码应该放在let card变量下面的payButtonAction函数中:


STPAPIClient.sharedClient()。createTokenWithCard(card,complete:{{token,error)-> Void in
如果让错误=错误{
打印(错误)
}
否则,如果让令牌=令牌{
打印(令牌)
self.chargeUsingToken(令牌)
}
  }) 

* self.chargeUsingToken(令牌)上应该有一个错误。

最后,我们将令牌以及金额发送到我们的服务器进行处理:

*在payButtonAction函数下(不在内部),创建一个新函数:

  func chargeUsingToken(token:STPToken){ 
}

在这个名为chargeUsingToken的新函数内(以前的错误现在应该消失了),我们将链接到Heroku服务器,创建一个包含我们需要发送的所有信息的字典,并创建一个将以成功的Charge响应的请求:

 让requestString =“ https://thawing-inlet-46474.herokuapp.com/charge.php” 
  let params = [“ stripeToken”:token.tokenId,“ amount”:“ 200”,“ currency”:“ usd”,“ description”:“ testRun”] 
  //这行代码就足够了,但是我们需要一个响应 
Alamofire.request(.POST,requestString,参数:params)
  //带有响应处理程序: 
Alamofire.request(.POST,requestString,参数:params)
.responseJSON {
print(response.request)//原始URL请求
print(response.response)// URL响应
print(response.data)//服务器数据
print(response.result)//响应序列化的结果

如果让JSON = response.result.value {
打印(“ JSON:\(JSON)”)
}
}

现在进行最后一步..测试应用程序:
*在Xcode中,单击播放按钮。
*当表单出现在模拟器(或您的iPhone)中时,输入:

抄送:4242 4242 4242 4242
MMYY:0424
CVC:242

单击出现的“付款”按钮,并观察输出是否成功。
*检查您的Stripe仪表板,找到新的$ 200.00费用存入您的帐户!