Expo大作战(三十一)--expo sdk api之Payments(expo中的支付),翻译这篇文章傻逼了，完全不符合国内用户，我只负责翻译大家可以略过！

简要：本系列文章讲会对expo进行全面的介绍，本人从2017年6月份接触expo以来，对expo的研究断断续续，一路走来将近10个月，废话不多说，接下来你看到内容，讲全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式，对expo进行一次大补血！欢迎加入expo兴趣学习交流群：597732981

【之前我写过一些列关于expo和rn入门配置的东i西，大家可以点击这里查看：从零学习rn开发】

相关文章：

Expo大作战(一)--什么是expo，如何安装expo clinet和xde，xde如何使用

Expo大作战(二)--expo的生命周期，expo社区交流方式，expo学习必备资源，开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app，expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link，对link这块东西没有详细看，大家可以来和我交流

更多>>

写在二十三章以后的话，之前的翻译，不管如何，好与不好，终究是告一段落，也把expo基础理论的东西又深入的理解了一遍，后续expo大作战系列将主要介绍expo sdk的api。

---

支付(Payments)

【告读者：本文所提 的支付，可能不适合国情，文中提到的Stripe，下午我自己百度了一些，是一个国外的第四方支付，和国内的ping++，聚合支付类似...】

Expo包括通过ExpoKit在iOS上通过Stripe和Apple Pay进行支付，以及在Android上通过Stripe和Android Pay进行支付。

需要比网页上的内容更多的帮助？ 付款模块主要基于提示条。 那里的文档和问题可能会有帮助。

建立Setup

如果您之前没有使用Stripe进行付款，请使用Stripe创建一个帐户。 获得帐户设置后，导航到Stripe API仪表板。 在这里，您需要记下列出的可发布密钥和密钥。

在iOS上添加付款模块(Adding the Payments Module on iOS)

付款模块目前仅支持iOS上的ExpoKit（为了解为什么，请参阅iOS上为什么使用ExpoKit？）。

首先，使用ExpoKit分离您的expo项目（请参阅分离到ExpoKit获取更多信息）。 然后，导航到并打开your-project-name / ios / Podfile。 将“支付”添加到您的Podfile的子规格。 例：

...
target 'your-project-name' do
  pod 'ExpoKit',
    :git => "https://github.com/expo/expo.git",
    :subspecs => [
      "Core",
      "CPP", # Add a comma here!
      "Payments" # Add this line here!
    ]

  pod 'React',
  ...

最后，确保CocoaPods已安装并在your-project-name/ios中，运行 pod install。 这会将付款模块文件添加到您的项目和相应的依赖项。

导入支付模块（Importing Payments）

Payments SDK位于Alpha，目前位于Expo的DangerZone名称空间下。 你可以像这样导入它：

import { DangerZone } from 'expo';
const { Payments } = DangerZone;

使用Payments SDK

首先，用您的凭证初始化Payments模块：（First, initialize the Payments module with your credentials:）

payments.initialize({
  publishableKey: 'PUBLISHABLE_KEY' // Your Stripe publishable key
})

接下来，您需要创建一个令牌对象。 创建令牌后，您需要将其发送给某种后端（例如，Node.js服务器）来处理付款。 重要的是不要在前端expo应用程序中处理敏感的卡片细节（It’s important not to handle sensitive card details in the front-end Expo application.）。

令牌对象（The Token object）

从提交付款明细（通过paymentRequestWithApplePayAsync和createTokenWithCardAsync）返回给Stripe API的令牌对象。

token

具有以下键的对象：

• tokenId String - 令牌的值。 您可以将此值存储在您的服务器上，并将其用于收费和客户。The value of the token. You can store this value on your server and use it to make charges and customers.

• created Number 当令牌被创建时 When the token was created.

• livemode Number -该标记是否在livemode中创建。 如果您使用了Live Publishhable Key，则为1;如果使用了Test Publihable Key，则为0。 Whether or not this token was created in livemode. Will be 1 if you used your Live Publishable Key, and 0 if you used your Test Publishable Key.

• card Object - 用于创建令牌的信用卡详细信息对象。 The credit card details object that were used to create the token.

• bankAccount Object - 用于创建令牌的外部（银行）帐户明细对象 The external (bank) account details object that were used to create the token.

• extra Object (iOS only)- 该方法可以提供的附加信息。An additional information that method can provide.

卡 Card

具有以下键的对象：

• cardId String - 卡片的条纹ID。
• brand String  - 卡的品牌。可以是以下其中一种：JCB | American Express | Visa | Discover | Diners Club |MasterCard|其他。
• funding String（仅适用于iOS） - 该卡的资金。可以是以下其中一项：借方|贷方|预付|不知。
• last4 String  - 卡的最后4位数字。
• dynamicLast4 String （仅适用于iOS） - 对于使用Apple Pay制作的卡片，这指的是标记卡片的设备帐号的最后4位数字。
• isApplePayCard Bool （仅适用于iOS） - 卡片是否源自Apple Pay。
• expMonth Number- 卡的到期月份。 1索引（即1 == 1月）
• expYear Number  - 卡的到期年份。
• country String- 代表卡片发行国的双字母ISO代码。
• currency String - 这仅适用于将借记卡标记为向支付账户发放支出的情况。该卡可以用作此币种资金的转帐目的地。
• name String - 持卡人的姓名。
• addressLine1 String - 持卡人的第一个地址行。
• addressLine2 String - 持卡人的第二个地址行。
• addressCity String - 持卡人的城市。
• addressState String - 持卡人的状态。
• addressCountry String - 持卡人的国家/地区。
• addressZip String  - 持卡人的邮政编码。

{
  tokenId: 'tok_19GCAQI5NuVQgnjeKNE32K0p',
  created: ,
  livemode: ,
  card: {
    cardId: 'card_19GCAQI5NuVQgnjeRZizG4U3',
    brand: 'Visa',
    funding: 'credit',
    last4: '',
    expMonth: ,
    expYear: ,
    country: 'US',
    name: 'Eugene Grissom',
    addressLine1: 'Green Street',
    addressLine2: '',
    addressCity: 'Nashville',
    addressState: 'Tennessee',
    addressCountry: 'US',
    addressZip: '',
  },
}

使用Apple Pay生成令牌

请记住：要在真实设备上使用Apple Pay，您需要先设置Apple Pay。

openApplePaySetup（）
打开用户界面为Apple Pay设置信用卡。

deviceSupportsApplePayAsync（） - > Promise
返回用户是否可以进行Apple Pay付款。用户可能因多种原因无法付款。例如，此功能可能不受其硬件支持，或者可能受到家长控制的限制。如果设备支持付款，则返回true;否则是false.

注意：iOS模拟器始终返回true

paymentRequestWithApplePayAsync（items，[options]） - > Promise
启动Apple Pay视图以接受付款。

item

具有以下键的对象数组：

• label String - 该项目的简短的本地化描述。
• amount String - 汇总项目的金额。

注：最后的项目应该代表你的公司;它会预先加上“付款”一词（即“Pay Tipsi，Inc $ 50”）

option

具有以下键的对象：

• requiredBillingAddressFields String - 处理事务所需的帐单地址字段的位字段。可以是：all | name | email | phone | postal_address或不指定禁用。
• requiredShippingAddressFields String - 处理事务所需的传送地址字段的位域。可以是：all | name | email | phone | postal_address或不指定禁用。
• shippingMethods Array - 一组shippingMethod对象，描述支持的送货方式。
• currencyCode String - 三字母ISO 4217货币代码。

邮寄方式(shippingMethod)

具有以下键的对象：

• id String - 应用使用的发货方式的唯一标识符。
• lable String - 送货方式的简短的本地化说明。
• detail String - 运输方法的用户可读描述。
• amount String - 运送方法的金额。

completeApplePayRequestAsync（）/ cancelApplePayRequestAsync（） - > Promise
在requiredBillingAddressFields之后，您应该通过调用completeApplePayRequest来完成操作，或者在发生错误时取消操作。这关闭了Apple Pay。 （解决未定义，你不需要存储承诺）

额外的信息  (Extra info)

令牌的额外领域

Extra

具有以下键的对象：

• shippingMethod对象 - 选择的shippingMethod对象。
• billingContact Object - 用户的账单联系对象。
• shippingContact Object - 用户的送货联系人对象。

联系（contact）

具有以下键的对象：

• name String - 联系人的姓名。
• phoneNumber  String - 联系人的电话号码。
• emailAddress String- 联系人的电子邮件地址。
• street String - 邮政地址中的街道名称。
• city String - 邮政地址中的城市名称。
• state String - 邮政地址中的州名称。
• country String - 邮政地址中的国家/地区名称。
• ISOCountryCode String - 邮政地址中国家的ISO国家代码。
• postalCode String - 邮政地址中的邮政编码。
• supplementarySubLocality String - 联系人的子地址。

const items = [{
  label: 'T-Shirt',
  amount: '50.00',
}, {
  label: 'Expo, Inc',
  amount: '50.00',
}]

const shippingMethods = [{
  id: 'fedex',
  label: 'FedEX',
  detail: 'Test @ 10',
  amount: '10.00',
}]

const options = {
  requiredBillingAddressFields: 'all',
  requiredShippingAddressFields: 'all',
  shippingMethods,
}

const token = await payments.paymentRequestWithApplePayAsync(items, options)

// Client specific code
// api.sendTokenToBackend(token)

// You should complete the operation by calling
payments.completeApplePayRequestAsync()

// Or cancel if an error occurred
// payments.cancelApplePayRequestAsync()

通过启动卡片表单生成令牌(Generating a token by launching a card form)

paymentRequestWithCardFormAsync（options） - > Promise
此承诺将启动一个卡片表单对话框，并在成功完成卡片表单时解析为令牌，否则将出现错误。

Option

具有以下键的对象：

• requiredBillingAddressFields String - 用户在提示其付款明细时必须填写的帐单地址字段。可以是：full | zip或不指定禁用。
• prefilledInformation Object - 您可以设置此属性以预先填写您已从用户收集的任何信息。
• managedAccountCurrency String - 要求能够将卡添加到帐户（在所有其他情况下，不使用此参数）。更多信息。
• smsAutofillDisabled Bool - 输入付款信息时，用户通过输入短信代码可以提示已保存的带有条形卡的用户自动填充。将此属性设置为true以禁用此功能。
• theme Object - 可用于直观地设置Stripe提供的UI。

prefilledInformation

具有以下键的对象：

• email String  - 用户的电子邮件地址。
• phone String - 用户的电话号码。
• billingAddress Object - 用户的帐单地址。设置后，添加卡表格将填入此地址。

billingAddress

具有以下键的对象：

• name String - 用户的全名（例如“Jane Doe”）。
• line1 String - 用户街道地址的第一行（例如“123 Fake St”）。
• line2 String - 用户街道地址的公寓，楼层号等（例如“Apartment 1A”）。
• city String - 用户所在的城市（例如“旧金山”）。
• state String - 用户所在的状态（例如“CA”）。
• postalCode String - 用户所在的邮政编码（例如“90210”）。
• country String - 地址的ISO国家代码（例如“US”）。
• phone String - 地址的电话号码（例如“8885551212”）。
• email String  - 地址的电子邮件（例如“[e-mail]”）。

theme

具有以下键的对象：

1. primaryBackgroundColor String - 主题的主要背景色。
2. secondaryBackgroundColor String - 此主题的辅助背景颜色。
3. primaryForegroundColor String - 此主题的主要前景颜色。这将用作具有此主题的视图中任何重要标签的文本颜色（例如用户需要填写的文本字段的文本颜色）。
4. secondaryForegroundColor String - 此主题的辅助前景颜色。这将用作具有此主题的视图中任何补充标签的文本颜色（例如用户需要填写的文本字段的占位符颜色）。
5. accentColor String - 此主题的重音颜色 - 它将用于视图上任何重要突出显示的按钮和其他元素。
6. errorColor String - 此主题的错误颜色 - 它将用于呈现任何错误消息或视图

const options = {
  smsAutofillDisabled: true,
  requiredBillingAddressFields: 'full',
  prefilledInformation: {
    billingAddress: {
      name: 'Gunilla Haugeh',
      line1: 'Canary Place',
      line2: '',
      city: 'Macon',
      state: 'Georgia',
      country: 'US',
      postalCode: '',
    },
  },
}

const token = await Payments.paymentRequestWithCardFormAsync(options)

// Client specific code
// api.sendTokenToBackend(token)

使用自定义卡片形式生成令牌(Generating a token with a custom card form)

也可以通过在参数中传递必要的细节来生成令牌。

createTokenWithCardAsync（params） - > Promise

params

具有以下键的对象：

• number String （必填） - 卡的号码。
• expMonth Number（必填） - 卡的到期月份。
• expYear Number（必填） - 该卡的到期年份。
• cvc String - 卡片的安全代码，位于后面。
• name String - 持卡人的姓名。
• addressLine1 String - 帐单地址的第一行。
• addressLine2 String - 帐单地址的第二行。
• addressCity String - 帐单地址的城市。
• addressState String - 帐单地址的状态。
• addressZip String- 帐单邮寄地址的邮政编码。
• addressCountry String - 帐单邮寄地址的国家/地区。
• brand String（仅限Android） - 此卡的品牌。可以是以下其中一种：JCB | American Express | Visa | Discover | Diners Club |万事达卡|不明。
• last4 String（仅限Android） - 卡的最后4位数字。
• fingerprint String （仅限Android） - 卡片指纹。
• funding String（仅适用于Android） - 卡的资金类型。可以是以下其中一项：借方|贷方|预付|不知。(The funding type of the card. Can be one of: debit|credit|prepaid|unknown)
• country String （仅限Android） - 卡本身的ISO国家代码。
• currency String - 表示支付给银行帐户的货币的三字母ISO货币代码。这仅适用于将借记卡标记为向支付账户发放支出的情况。否则不应该设置它。该卡可以用作此币种资金的转帐目的地。

const params = {
  // mandatory
  number: '',
  expMonth: ,
  expYear: ,
  cvc: '',
  // optional
  name: 'Test User',
  currency: 'usd',
  addressLine1: '123 Test Street',
  addressLine2: 'Apt. 5',
  addressCity: 'Test City',
  addressState: 'Test State',
  addressCountry: 'Test Country',
  addressZip: '',
}

const token = await stripe.createTokenWithCardAsync(params)

// Client specific code
// api.sendTokenToBackend(token)

在ExpoKit中启用Apple Pay

如果您想使用Apple Pay进行付款，则需要先在XCode中设置您的商家ID。 请注意，您不需要通过此流程来使用付款模块 - 您仍然可以使用Stripe处理付款，而无需执行本节中的步骤。

如果您还没有，请通过Apple Developer Portal设置Apple Merchant ID。 然后，在XCode中打开应用程序并导航到功能选项卡。 启用Apple Pay并将您的商家ID插入相应的空间。

applepay

最后，您需要在发布独立应用程序之前将您的商家ID包含在JavaScript代码中。 更改付款的初始化以模仿以下内容：

payments.initialize({
  publishableKey: 'PUBLISHABLE_KEY', // Your Stripe publishable key
  merchantId: 'MERCHANT_ID' // Your Apple Pay merchant ID
})

注意：Apple Pay只能用于真实世界的物品（例如上诉，汽车共享，食物）而不是虚拟物品。 有关正确使用Apple Pay的更多信息，请访问Apple的Apple Pay指南和可接受使用。

为什么在iOS上使用ExpoKit？

expo以前包括支持没有ExpoKit的本地付款API。 我们了解到，苹果有时会拒绝包含Stripe SDK的应用程序，但不提供任何可供出售的应用程序(but don’t offer anything for sale.)。 为了帮助您的App Review流程更加顺畅，我们决定从使用Expo独立构建器构建的应用中删除Stripe SDK和实验性付款API。 我们仍然很高兴能够为开发者提供一种让用户在需要时支付货款的方式，并且我们会尽快公布这种方式。

---

下一张继续介绍，这一篇主要介绍了：expo sdk api之Payments(expo中的支付),翻译这篇文章傻逼了，完全不符合国内用户，我只负责翻译大家可以略过！，欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！