@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' |