@projektionisten/capacitor-braintree

@projektionisten/capacitor-braintree

Braintree is a payment platform many developers use to facilitate specifically paypal payments in their apps, but other payment methods like Google/Apple Pay and credit cards are available through the Braintree SDK. This Capacitor plugin is meant to provide ways to use that SDK for different platforms through a web app

Install

NPM

npm i @projektionisten/capacitor-braintree
npx cap sync

YARN

yarn add @projektionisten/capacitor-braintree
npx cap sync

Android

For the paypal browser flow to work, you need to add this overload to the MainActivity of your android project

@Override
protected void onNewIntent(Intent newIntent) {
    super.onNewIntent(newIntent);

    setIntent(newIntent);
}

Also, an intent-filter for returning into the app needs to be defined. The ${applicationId} does not need to be replaced by anything, it automatically inserts the package name of the application

Beware: If your package name includes special characters like an _underscore, the intent filter is not going to work and you have to replace ${applicationId} with a version of your package name with the special characters removed. For example, if your package name is com.package_name.example, the scheme would have to be com.packagename.example.braintree

<intent-filter >
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data android:scheme="${applicationId}.braintree" />
</intent-filter>

If you want to enable GooglePay, you also need to add this meta tag to the application element in your Manifest file

<meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true"/>

API

• setClientToken(...)
• startPaypalPayment(...)
• startApplePayPayment(...)
• startGooglePayPayment(...)
• isGooglePayReady()
• isApplePayReady()
• Interfaces
• Enums

setClientToken(...)

setClientToken(options: TokenOptions) => Promise<void>

This updates the plugin with a new auth token.

This needs to be called before the SDK can be used.

Param	Type
options	TokenOptions

---

startPaypalPayment(...)

startPaypalPayment(options: PaypalPaymentOptions) => Promise<PaymentUIResult>

Starts a transaction with the paypal sdk. Will open a seperate browser window or similar to complete and return with information about the used account and the payment nonce

Param	Type
options	PaypalPaymentOptions

Returns: Promise<PaymentUIResult>

---

startApplePayPayment(...)

startApplePayPayment(options: ApplePaymentOptions) => Promise<PaymentUIResult>

Starts a transaction with the apple pay sdk. Will open a seperate browser window or similar to complete and return with information about the used account and the payment nonce

Param	Type
options	ApplePaymentOptions

Returns: Promise<PaymentUIResult>

---

startGooglePayPayment(...)

startGooglePayPayment(options: GooglePaymentOptions) => Promise<PaymentUIResult>

Starts a transaction with the google pay sdk. Will open a seperate browser window or similar to complete and return with information about the used account and the payment nonce

Param	Type
options	GooglePaymentOptions

Returns: Promise<PaymentUIResult>

---

isGooglePayReady()

isGooglePayReady() => Promise<PaymentMethodReadyResult>

Google pay specifically offers a method to wait for it to be ready to use. Returns a promise that resolves when it is ready.

Returns: Promise<PaymentMethodReadyResult>

---

isApplePayReady()

isApplePayReady() => Promise<PaymentMethodReadyResult>

Check if apple pay is available on this device

Returns: Promise<PaymentMethodReadyResult>

---

Interfaces

TokenOptions

Options for setting up payment tokens

Prop	Type	Description	Default
token	string	The token to be used
env	'development' | 'production'	Environment for the payment providers. Currently only used by the google pay client in the *WEBimplementation. When env is 'development', the google pay client will use the TEST config, accessing only the sandbox.	'production'

PaymentUIResult

Successful callback result for the payment methods.

Prop	Type	Description
userCancelled	boolean	Indicates if the user used the cancel button to close the dialog without completing the payment.
nonce	string	The nonce for the payment transaction (if a payment was completed).
type	string	The payment type (if a payment was completed).
localizedDescription	string	A description of the payment method (if a payment was completed).
card	{ lastTwo: string; network: CREDIT_CARD_NETWORK; }	Information about the credit card used to complete a payment (if a credit card was used).
paypalAccount	{ email: string; firstName?: string; lastName?: string; phone?: string; billingAddress?: string; shippingAddress?: string; clientMetadataId?: string; payerId?: string; }	Information about the PayPal account used to complete a payment (if a PayPal account was used).
threeDSecureCard	{ liabilityShifted: boolean; liabilityShiftPossible: boolean; }	Information about 3D Secure card used to complete a payment (if 3D Secure was used).

PaypalPaymentOptions

Options for the payment methods.

Prop	Type	Description	Default
amount	string	The amount of the transaction to show in the drop-in UI on the summary row as well as the call to action button.
primaryDescription	string	The description of the transaction to show in the drop-in UI on the summary row.
paymentFlow	PAYPAL_PAYMENT_FLOW	Type of payment flow. Either an one-time checkout or a vaulted payment, for easier transactions in the future	PAYPAL_PAYMENT_FLOW.CHECKOUT
userAction	PAYPAL_USER_ACTION	Defines the type of call to action button the user clicks to return to the shop. By default, the call to action button will imply that there is a checkout with a final price after the user authorization. Use PAYPAL_USER_ACTION.COMMIT if it should be a final "pay now" button.	PAYPAL_USER_ACTION.CONTINUE_TO_CHECKOUT

ApplePaymentOptions

Options for the payment methods.

Prop	Type	Description	Default
amount	string	The amount of the transaction to show in the drop-in UI on the summary row as well as the call to action button.
currencyCode	string	ISO 4217 code of the currency used, like 'EUR' or 'USD'	'EUR'
countryCode	string	ISO 3166 code of the merchants country, like 'DE' or 'US'. Defaults to the settings in your braintree backend
primaryDescription	string	The description of the transaction to show in the drop-in UI on the summary row.

GooglePaymentOptions

Options for the payment methods.

Prop	Type	Description	Default
merchantId	string	Merchant ID to use for this transaction if it differs from the one in your braintree account
amount	string	The amount of the transaction to show in the drop-in UI on the summary row as well as the call to action button.
amountStatus	'ESTIMATED' | 'FINAL'	Is the price already the final one to be paid, or will potential sales taxes or shipping prices be added later in the checkout	'FINAL'
currencyCode	string	ISO 4217 code of the currency used, like 'EUR' or 'USD'	'EUR'

PaymentMethodReadyResult

Result for a method that checks if a given payment method is ready to be used

Prop	Type
ready	boolean

Enums

CREDIT_CARD_NETWORK

Members	Value
UNKNOWN	'BTCardNetworkUnknown'
AMEX	'BTCardNetworkAMEX'
DINERS_CLUB	'BTCardNetworkDinersClub'
DISCOVER	'BTCardNetworkDiscover'
MASTER_CARD	'BTCardNetworkMasterCard'
VISA	'BTCardNetworkVisa'
JCB	'BTCardNetworkJCB'
LASER	'BTCardNetworkLaser'
MAESTRO	'BTCardNetworkMaestro'
UNION_PAY	'BTCardNetworkUnionPay'
SOLO	'BTCardNetworkSolo'
SWITCH	'BTCardNetworkSwitch'
UK_MAESTRO	'BTCardNetworkUKMaestro'

PAYPAL_PAYMENT_FLOW

Members	Value
CHECKOUT	'checkout'
VAULT	'vault'

PAYPAL_USER_ACTION

Members	Value
CONTINUE_TO_CHECKOUT	'continue'
COMMIT	'commit'