@nativescript/google-pay
A plugin that allows you to offer Google Pay in your Android app.
Contents
Installation
ns plugin add @nativescript/google-pay
Prerequisites
Before you get started, review the following prerequisites:
Important note about payment token
If you're using a payments service provider, you need a valid payment token for your app in production mode. You can view the configuration for a number of providers in the Google documentation..
During development you can use the example below for the gateway token configuration when creating a payment request.
parameters: { gateway: 'example', gatewayMerchantId: 'exampleGatewayMerchantId' }
Use @nativescript/google-pay
To implement Google Pay in your app, follow the steps below:
- Register GooglePayBtn view in your app and add it markup.
<android> <GooglePayBtn cardNetworks="VISA, AMEX, DISCOVER" authMethods="PAN_ONLY, CRYPTOGRAM_3DS" tap="onGooglePayTap" width="100%" height="40" buttonType="PAY_BLACK" /> </android>
- Listen to the GooglePayBtn tap event
Tapping the GooglePayBtn initiates payment with Google Pay. In the tap event handler(onGooglePayTap function ), manage the payments with Google Pay as follows:
- Listen to the
GooglePayEvents.PaymentSuccess event on the button instance.
- The event is emitted when a user approves your app to make payments with their Google Pay payments data.
- The
GooglePayEvents.PaymentSuccess event's callback receives a token and other data, of PaymentSuccessEventData from Google Pay. You send that to your payments services provider for payment processing.
googlePayBtn.once( GooglePayEvents.PaymentSuccess, async (args: PaymentSuccessEventData) => { const payloadToBackend = { amount: 25.2, method: '3DS', '3DS': { signature: args.data.paymentMethodData.tokenizationData.token.signature, type: 'G', version: args.data.paymentMethodData.tokenizationData.token.protocolVersion, data: args.data.paymentMethodData.tokenizationData.token.signedMessage } } const result = await someHttpCallToPaymentServiceProvider(payloadToBackend) } )
2. Present the user with the payment sheet. To present the user with the payment sheet to complete the transaction, call the `createPaymentRequest()` passing it a [GooglePayRequest](#googlepayrequest) object. ```ts const options = { environment: 'development', // change this to production when in prod mode theme: 'light', merchantInfo: { merchantName: 'YOUR_MERCHANT_NAME' }, allowedPaymentMethods: { type: AllowedPaymentMethodsType.CARD, parameters: { allowPrepaidCards: true, allowCreditCards: true, billingAddressRequired: true, billingAddressParameters: { format: BillingAddressParametersFormat.MIN, // FULL phoneNumberRequired: true } }, tokenizationSpecification: { type: TokenizationSpecificationType.PAYMENT_GATEWAY, parameters: { gateway: 'example', // in production replace with your gateway provider gatewayMerchantId: 'exampleGatewayMerchantId' // in production replace with your gateway provider merchant ID } } }, transactionInfo: { currencyCode: 'USD', countryCode: 'US', // transactionId: '283999292929929', // A unique ID that identifies a transaction attempt. Merchants can use an existing ID or generate a specific one for Google Pay transaction attempts. This field is required when you send callbacks to the Google Transaction Events API. totalPriceStatus: TotalPriceStatusValue.FINAL, totalPrice: 25.20, totalPriceLabel: 'Total', checkoutOption: CheckoutOptionValue.DEFAULT }, emailRequired: true, shippingAddressRequired: true, shippingAddressParameters: { allowedCountryCodes: ['US'], phoneNumberRequired: true } } as GooglePayRequest; googlePayBtn.createPaymentRequest(options).catch(err => { console.log('error with create payment request', err); }); ```
You can find a complete code example for above stepshere
API
GooglePayBtn class
A class to initiate and manage payment with Google Pay.
| Method | Returns | Description |
|---|
createPaymentRequest(args: GooglePayRequest) | Promise<unknown> | Creates the Google Pay payment request and presents the user with the payment sheet. |
Enums
GooglePayAuthMethods
| Key | Description |
|---|
PAN_ONLY | This authentication method is associated with payment cards stored on file with the user's Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year. |
CRYPTOGRAM_3DS | This authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device. |
GooglePayCardNetworks
| Key | Value |
|---|
| AMEX | 'AMEX' |
| DISCOVER | 'DISCOVER' |
| INTERAC | 'INTERAC' |
| JCB | 'JCB' |
| MASTERCARD | 'MASTERCARD' |
| VISA | 'VISA' |
GooglePayEvents
| Key | Value |
|---|
| PaymentCancelled | 'PaymentCancelled' |
| PaymentError | 'PaymentError' |
| PaymentSuccess | 'PaymentSuccess' |
TokenizationSpecificationType
| Enum | Description |
|---|
PAYMENT_GATEWAY | To retrieve payment and customer information from a payment gateway that's supported by the Google Pay API, set type to PAYMENT_GATEWAY |
DIRECT | The Direct integration allows merchants to decrypt the Google Pay response on their servers. To qualify, you must be Payments Card Industry (PCI) Data Security Standard (DSS) Level 1 compliant. Your servers also need to have the required infrastructure to securely handle users' payment credentials. |
| Key | Description |
|---|
MIN | Name, country code, and postal code (default). |
FULL | Name, street address, locality, region, country code, and postal code. |
AllowedPaymentMethodsType
TotalPriceStatusValue
| Key | Description |
|---|
NOT_CURRENTLY_KNOWN | Used for a capability check. Do not use this property if the transaction is processed in an EEA country. |
ESTIMATED | Total price may adjust based on the details of the response, such as sales tax collected based on a billing address. |
FINAL | Total price doesn't change from the amount presented to the shopper. |
CheckoutOptionValue
| Key | Description |
|---|
DEFAULT | Standard text applies for the given totalPriceStatus (default). |
COMPLETE_IMMEDITATE_PURCHASE | The selected payment method is charged immediately after the payer confirms their selections. This option is only available when totalPriceStatus is set to FINAL. |
| Key | Value |
|---|
| PAY_WHITE | 'PAY_WHITE' |
| PAY_WHITE_NO_SHADOW | 'PAY_WHITE_NO_SHADOW' |
| BUY_WHITE | 'BUY_WHITE' |
| BUY_WHITE_NO_SHADOW | 'BUY_WHITE_NO_SHADOW' |
| PAY_BLACK | 'PAY_BLACK' |
| BUY_BLACK | 'BUY_BLACK' |
| DONATE_BLACK | 'DONATE_BLACK' |
Interfaces
GooglePayRequest
interface GooglePayRequest { environment: 'development' | 'production' theme: 'dark' | 'light' apiVersion: number apiVersionMinor: number merchantInfo: { merchantName: string } allowedPaymentMethods: { type: string parameters: { allowedAuthMethods: Array<string> allowedCardNetworks: string allowPrepaidCards?: boolean allowCreditCards?: boolean assuranceDetailsRequired?: boolean billingAddressRequired?: boolean billingAddressParameters?: { format?: string phoneNumberRequired?: boolean } } tokenizationSpecification?: { type: TokenizationSpecificationType parameters: { gateway: string gatewayMerchantId: string } } } transactionInfo: { displayItems: Array<GoogelPayDisplayItems> currencyCode: string countryCode?: string transactionId?: string totalPriceStatus: TotalPriceStatusValue totalPrice?: string totalPriceLabel?: string checkoutOption?: CheckoutOptionValue } emailRequired?: boolean shippingAddressRequired?: boolean shippingAddressParameters?: { allowedCountryCodes?: Array<string> phoneNumberRequired?: boolean } }
PaymentCancelledEventData
interface PaymentCancelledEventData extends EventData { eventName: string object: any }
PaymentErrorEventData
interface PaymentErrorEventData extends EventData { eventName: string object: any data: { statusCode: number } }
PaymentSuccessEventData
interface PaymentSuccessEventData extends EventData { eventName: string object: any data: { paymentMethodData: { type: string description: string info: { cardDetails: string assuranceDetails: { accountVerified: boolean cardHolderAuthenticated: boolean } cardNetwork: string billingAddress?: Address } tokenizationData: { type: string token: { protocolVersion: string signature: string signedMessage: string rawToken: string } } } email: string shippingAddress: Address } }
Address
Address { name; postalCode; countryCode; phoneNumber; address1; address2; address3; locality; administrativeArea; sortingCode; }
GooglePayDisplayItems
interface GoogelPayDisplayItems { label: string type: string price: string }
License
Apache License Version 2.0