Skip to content

Commit 3c19d0d

Browse files
bradmartinrigor789
bradmartin
and
rigor789
authored
feat(plugins): add payment plugins (#43)
* feat (plugins): add payment plugins * remove type from config * fix: await promises then exit Co-authored-by: Igor Randjelovic <rigor789@gmail.com>
1 parent 11ffc16 commit 3c19d0d

27 files changed

+1283
-120
lines changed

‎.vitepress/config.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ module.exports = {
121121
md.use(codeBlocksPlugin)
122122
},
123123
},
124+
125+
plugins: getPluginsSidebar(),
124126
}
125127

126128
function getSidebar() {
@@ -236,10 +238,6 @@ function getPluginsSidebar() {
236238
text: 'App Availability',
237239
link: '/plugins/appavailability',
238240
},
239-
// {
240-
// text: 'Apple Pay',
241-
// link: '/plugins/apple-pay',
242-
// },
243241
{
244242
text: 'Auto Fit Text',
245243
link: '/plugins/auto-fit-text',
@@ -278,10 +276,6 @@ function getPluginsSidebar() {
278276
text: 'Geolocation',
279277
link: '/plugins/geolocation',
280278
},
281-
// {
282-
// text: 'Google Pay',
283-
// link: '/plugins/google-pay',
284-
// },
285279
{
286280
text: 'Image Picker',
287281
link: '/plugins/imagepicker',
@@ -316,6 +310,23 @@ function getPluginsSidebar() {
316310
},
317311
],
318312
},
313+
{
314+
text: 'Payment Plugins',
315+
children: [
316+
{
317+
text: 'Apple Pay',
318+
link: '/plugins/apple-pay',
319+
},
320+
{
321+
text: 'Google Pay',
322+
link: '/plugins/google-pay',
323+
},
324+
{
325+
text: 'Payments - In App Purchases',
326+
link: '/plugins/payments',
327+
},
328+
],
329+
},
319330
{
320331
text: 'NativeScript UI Plugins',
321332
children: [

‎plugins/animated-circle.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: animated-circle
3-
link: https://raw.githubusercontent.com/NativeScript/plugins/master/packages/animated-circle/README.md
2+
title: Animated Circle
3+
link: https://raw.githubusercontent.com/NativeScript/plugins/main/packages/animated-circle/README.md
44
---
55

66
# @nativescript/animated-circle

‎plugins/appavailability.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: appavailability
3-
link: https://raw.githubusercontent.com/NativeScript/plugins/master/packages/appavailability/README.md
2+
title: App Availability
3+
link: https://raw.githubusercontent.com/NativeScript/plugins/main/packages/appavailability/README.md
44
---
55

66
# @nativescript/app-availability

‎plugins/apple-pay.md‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
---
2+
title: Apple Pay
3+
link: https://raw.githubusercontent.com/NativeScript/payments/main/packages/apple-pay/README.md
4+
---
5+
6+
# @nativescript/apple-pay
7+
8+
```javascript
9+
ns plugin add @nativescript/apple-pay
10+
```
11+
12+
## Usage
13+
14+
In order for Apple Pay to work in your iOS application you will need to complete the following steps. These steps are also outlined in the [Apple PassKit documentation](https://developer.apple.com/documentation/passkit/apple_pay/setting_up_apple_pay_requirements).
15+
16+
- Create a merchant ID.
17+
18+
- Create a Payment Processing certificate.
19+
20+
- Enable Apple Pay in Xcode.
21+
22+
Follow the instructions in Configure Apple Pay (iOS, watchOS), which guide you to create the following:
23+
24+
- Merchant ID.
25+
An identifier you register with Apple that uniquely identifies your business as a merchant able to accept payments. This ID never expires, and can be used in multiple websites and iOS apps. See [Create a merchant identifier](https://help.apple.com/developer-account/#/devb2e62b839?sub=dev103e030bb) for the setup steps.
26+
27+
- Payment Processing Certificate.
28+
A certificate associated with your merchant ID, used to secure transaction data. Apple Pay servers use the certificate’s public key to encrypt payment data. You (or your payment service provider) use the private key to decrypt the data to process payments. See [Create a payment processing certificate](https://help.apple.com/developer-account/#/devb2e62b839?sub=devf31990e3f) for the setup steps.
29+
30+
- Finally, you need to enable the Apple Pay capability in your Xcode project.
31+
See [Enable Apple Pay](https://help.apple.com/xcode/mac/9.3/#/deva43983eb7?sub=dev44ce8ef13) for the setup steps.
32+
33+
For a video showing the configuration steps, see: [Configuring Your Developer Account for Apple Pay](https://developer.apple.com/videos/play/tutorials/configuring-your-developer-account-for-apple-pay/).
34+
35+
Once that configuration is done for your Apple developer account, you will be able to use the PassKit framework for Apple Pay inside your iOS application.
36+
37+
```xml
38+
<ios>
39+
<ApplePayBtn tap="onApplePayTap" buttonType="InStore" />
40+
</ios>
41+
```
42+
43+
```ts
44+
import { ApplePayBtn, ApplePayContactFields, ApplePayEvents, ApplePayItems, ApplePayMerchantCapability, ApplePayNetworks, ApplePayPaymentItemType, ApplePayRequest, ApplePayTransactionStatus, AuthorizePaymentEventData } from '@nativescript/apple-pay';
45+
46+
export function onApplePayTap() {
47+
try {
48+
// just ensuring this runs only on iOS
49+
if (global.isIOS) {
50+
const applePayBtn = args.object as ApplePayBtn;
51+
52+
// setup the event listeners for the delegate for apple pay for our button
53+
applePayBtn.once(ApplePayEvents.DidAuthorizePaymentHandler, async (args: AuthorizePaymentEventData) => {
54+
console.log(ApplePayEvents.DidAuthorizePaymentHandler);
55+
56+
// this is where you do backend processing with your payment provider (Stripe, PayPal, etc.)
57+
// this payload is just a sample, your payload to a provider will likely be different
58+
// you can see here how to access the encrypted values from Apple Pay inside the `args.data.paymentData`
59+
const payloadToBackend = {
60+
transaction_type: 'purchase',
61+
merchant_ref: args.data.paymentData.header.transactionId,
62+
method: '3DS',
63+
'3DS': {
64+
merchantIdentifier: <SomeIdentifierFromPaymentProvider>,
65+
data: args.data.paymentData.data,
66+
signature: args.data.paymentData.signature,
67+
version: args.data.paymentData.version,
68+
header: args.data.paymentData.header
69+
}
70+
};
71+
72+
const result = await someHttpMethodToYourProviderBackend(payloadToBackend);
73+
74+
if (result && result.value === true) {
75+
// need this to call when the payment is successful to close the payment sheet correctly on iOS
76+
args.completion(ApplePayTransactionStatus.Success);
77+
// now you can follow through with your user flow since the transactin has been successful with your provider
78+
} else {
79+
// payment failed on the backend, so show the FAILURE to close the Apple Pay sheet
80+
args.completion(ApplePayTransactionStatus.Failure);
81+
}
82+
});
83+
84+
// these are the items your customer is paying for
85+
const paymentItems = [
86+
{
87+
amount: 20.50,
88+
label: 'Balance',
89+
type: ApplePayPaymentItemType.Final,
90+
},
91+
] as ApplePayItems[];
92+
93+
const request = {
94+
paymentItems,
95+
merchantId: <Your_Apple_Pay_Merchant_ID>, // the merchant ID for this app
96+
merchantCapabilities: ApplePayMerchantCapability.ThreeDS,
97+
countryCode: 'US',
98+
currencyCode: 'USD',
99+
shippingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
100+
billingContactFields: [ApplePayContactFields.Name, ApplePayContactFields.PostalAddress],
101+
supportedNetworks: [ApplePayNetworks.Amex, ApplePayNetworks.Visa, ApplePayNetworks.Discover, ApplePayNetworks.MasterCard],
102+
} as ApplePayRequest;
103+
104+
// `createPaymentRequest` will call into the Apple Pay SDK and present the user with the payment sheet for the configuration provided
105+
await applePayBtn.createPaymentRequest(request).catch((err) => {
106+
console.log('Apple Pay Error', err);
107+
});
108+
}
109+
} catch (error) {
110+
console.log(error);
111+
}
112+
}
113+
```
114+
115+
# API
116+
117+
## Methods
118+
119+
| Name | Description |
120+
| ---------------------------------------------- | ----------------------------------------------------------------------------------- |
121+
| createPaymentRequest(request: ApplePayRequest) | Creates the Apple Pay payment request and presents the user with the payment sheet. |
122+
123+
## Enums
124+
125+
### ApplePayEvents
126+
127+
| Key | Description |
128+
| -------------------------- | ------------------------------------------------------------------------------------------ |
129+
| DidAuthorizePaymentHandler | Tells the delegate that the user has authorized the payment request and asks for a result. |
130+
| AuthorizationDidFinish | Tells the delegate that payment authorization has completed. |
131+
132+
### ApplePayContactFields
133+
134+
| Key | Description |
135+
| ------------- | --------------------------------- |
136+
| EmailAddress | Indicates an email address field. |
137+
| Name | Indicates a name field. |
138+
| PhoneNumber | Indicates a phone number field. |
139+
| PhoneticName | Indicates a phonetic name field. |
140+
| PostalAddress | Indicates a postal address field. |
141+
142+
### ApplePayNetworks
143+
144+
| Key |
145+
| -------------- |
146+
| Amex |
147+
| CarteBancaire |
148+
| CarteBancaires |
149+
| ChinaUnionPay |
150+
| Discover |
151+
| Eftpos |
152+
| Electron |
153+
| Elo |
154+
| IDCredit |
155+
| Interac |
156+
| Jcb |
157+
| Mada |
158+
| Maestro |
159+
| MasterCard |
160+
| PrivateLabel |
161+
| QuicPay |
162+
| Suica |
163+
| Visa |
164+
| VPay |
165+
166+
### ApplePayMerchantCapability
167+
168+
| Key | Value |
169+
| ------- | ------------------------------------- |
170+
| ThreeDS | PKMerchantCapability.Capability3DS |
171+
| EMV | PKMerchantCapability.CapabilityEMV |
172+
| Credit | PKMerchantCapability.CapabilityCredit |
173+
| Debit | PKMerchantCapability.CapabilityDebit |
174+
175+
### ApplePayMerchantCapaApplePayTransactionStatusbility
176+
177+
| Key | Value |
178+
| ---------------------------- | --------------------------------------------------------- |
179+
| Success | PKPaymentAuthorizationStatus.Success |
180+
| Failure | PKPaymentAuthorizationStatus.Failure |
181+
| InvalidBillingPostalAddress | PKPaymentAuthorizationStatus.InvalidBillingPostalAddress |
182+
| InvalidShippingPostalAddress | PKPaymentAuthorizationStatus.InvalidShippingPostalAddress |
183+
| InvalidShippingContact | PKPaymentAuthorizationStatus.InvalidShippingContact |
184+
| PINRequired | PKPaymentAuthorizationStatus.PINRequired |
185+
| PINIncorrect | PKPaymentAuthorizationStatus.PINIncorrect |
186+
| PINLockout | PKPaymentAuthorizationStatus.PINLockout, |
187+
188+
### ApplePayPaymentItemType
189+
190+
| Key | Value |
191+
| ------- | -------------------------------- |
192+
| Final | PKPaymentSummaryItemType.Final |
193+
| Pending | PKPaymentSummaryItemType.Pending |
194+
195+
### ApplePayButtonType
196+
197+
| Key | Value |
198+
| --------- | ----------------------------- |
199+
| Plain | PKPaymentButtonType.Plain |
200+
| Buy | PKPaymentButtonType.Buy |
201+
| Book | PKPaymentButtonType.Book |
202+
| Checkout | PKPaymentButtonType.Checkout |
203+
| Donate | PKPaymentButtonType.Donate |
204+
| InStore | PKPaymentButtonType.Book |
205+
| Subscribe | PKPaymentButtonType.Subscribe |
206+
207+
### ApplePayButtonStyle
208+
209+
| Key | Value |
210+
| ------------ | --------------------------------- |
211+
| White | PKPaymentButtonStyle.White |
212+
| WhiteOutline | PKPaymentButtonStyle.WhiteOutline |
213+
| Black | PKPaymentButtonStyle.Black |
214+
215+
## Interfaces
216+
217+
### ApplePayRequest
218+
219+
```ts
220+
interface ApplePayRequest {
221+
paymentItems: Array<ApplePayItems>
222+
merchantId: string // the merchant ID for this app
223+
merchantCapabilities: number
224+
countryCode: string
225+
currencyCode: string
226+
supportedNetworks: Array<ApplePayNetworks>
227+
billingContactFields?: Array<ApplePayContactFields>
228+
shippingContactFields?: Array<ApplePayContactFields>
229+
shippingMethods?: Array<ApplePayShippingMethods>
230+
}
231+
```
232+
233+
### ApplePayItems
234+
235+
```ts
236+
interface ApplePayItems {
237+
label: string
238+
amount: number
239+
type: ApplePayPaymentItemType
240+
}
241+
```
242+
243+
### AuthorizePaymentEventData
244+
245+
```ts
246+
interface AuthorizePaymentEventData extends EventData {
247+
eventName: string
248+
object: any
249+
data?: {
250+
payment: PKPayment
251+
token: PKPaymentToken
252+
paymentData: ApplePayPaymentData
253+
billingAddress
254+
billingContact: PKContact
255+
shippingAddress
256+
shippingContact: PKContact
257+
shippingMethod: PKShippingMethod
258+
}
259+
completion: (status: ApplePayTransactionStatus) => void
260+
}
261+
```
262+
263+
### AuthorizationDidFinishEventData
264+
265+
```ts
266+
interface AuthorizationDidFinishEventData extends EventData {
267+
eventName: string
268+
object: any
269+
}
270+
```
271+
272+
### ApplePayPaymentData
273+
274+
```ts
275+
interface ApplePayPaymentData {
276+
/**
277+
* Encrypted payment data.
278+
*/
279+
data
280+
281+
/**
282+
* Additional version-dependent information used to decrypt and verify the payment.
283+
*/
284+
header
285+
286+
/**
287+
* Signature of the payment and header data. The signature includes the signing certificate, its intermediate CA certificate, and information about the signing algorithm.
288+
*/
289+
signature
290+
291+
/**
292+
* Version information about the payment token.
293+
* The token uses EC_v1 for ECC-encrypted data, and RSA_v1 for RSA-encrypted data.
294+
*/
295+
version: string
296+
}
297+
```
298+
299+
## License
300+
301+
Apache License Version 2.0

‎plugins/auto-fit-text.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: auto-fit-text
3-
link: https://raw.githubusercontent.com/NativeScript/plugins/master/packages/auto-fit-text/README.md
2+
title: Auto Fit Text
3+
link: https://raw.githubusercontent.com/NativeScript/plugins/main/packages/auto-fit-text/README.md
44
---
55

66
# @nativescript/auto-fit-text

0 commit comments

Comments
 (0)