簡要：本系列文章講會對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: 1479236426,
  livemode: 0,
  card: {
    cardId: ‘card_19GCAQI5NuVQgnjeRZizG4U3‘,
    brand: ‘Visa‘,
    funding: ‘credit‘,
    last4: ‘4242‘,
    expMonth: 4,
    expYear: 2024,
    country: ‘US‘,
    name: ‘Eugene Grissom‘,
    addressLine1: ‘Green Street‘,
    addressLine2: ‘3380‘,
    addressCity: ‘Nashville‘,
    addressState: ‘Tennessee‘,
    addressCountry: ‘US‘,
    addressZip: ‘37211‘,
  },
}

使用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 - 地址的電子郵件（例如“[email protected]”）。

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: ‘3‘,
      city: ‘Macon‘,
      state: ‘Georgia‘,
      country: ‘US‘,
      postalCode: ‘31217‘,
    },
  },
}

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: ‘4242424242424242‘,
  expMonth: 11,
  expYear: 17,
  cvc: ‘223‘,
  // optional
  name: ‘Test User‘,
  currency: ‘usd‘,
  addressLine1: ‘123 Test Street‘,
  addressLine2: ‘Apt. 5‘,
  addressCity: ‘Test City‘,
  addressState: ‘Test State‘,
  addressCountry: ‘Test Country‘,
  addressZip: ‘55555‘,
}

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中的支付),翻譯這篇文章傻逼了，完全不符合國內用戶，我只負責翻譯大家可以略過！，歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！

Expo大作戰(三十一)--expo sdk api之Payments(expo中的支付),翻譯這篇文章傻逼了，完全不符合國內用戶，我只負責翻譯大家可以略過！