Braintree-commercetools-client NPM

Braintree client app

In here we explain how to use the client app and get payment methods to work.

General properties

Each payment component takes a set of props that will be the same for everything. They are as follows:

createPaymentUrl: string
POST-Request - we get a CreatePaymentResponse
It is your responsibility to develop this API
The url that gets called to the endpoint of the connect app to create a payment in commerce tools. Communicates with CommerceTools backend
See the examples in our CoFe integration example repository
getClientTokenUrl: string
POST-Request - we get a ClientTokenResponse
It is your responsibility to develop this API
The url that gets called to the endpoint of the connect app to get the client token. Communicates with CommerceTools backend See the examples in our CoFe integration example repository
purchaseUrl: string
POST-Request - we get a TransactionSaleRequest that will be returned from the Braintree integration module
It is your responsibility to develop this API
The url that gets called to the endpoint of the connect app to make the purchase at. Communicates with CommerceTools backend See the examples in our CoFe integration example repository
purchaseCallback: (result: any) => void
Function to execute after a successful purchase.
fullWidth: boolean
Makes the pay button use the full amount of width available (defaults to true).
buttonText: string
The text to be shown on the pay button. Could be the final amount the customer has to pay.
shippingMethodId: string
The id of the selected shipping. It will be sent back in the create purchase call to calculate the correct shipping costs.
cartInformation: object
Information about the customers cart to crate payments with. Structure:
lineItems: object
Line Items that will send as payload to createPaymentUrl. You can find the structure on LineItems.
shipping: object
Shipping that will send as payload to createPaymentUrl. You can find the structure on Shipping.
useKount: boolean
if you set useKount to true it will send the kount request to Braintree on the client side.
taxAmount: string
Tax amount that will send as payload to createPaymentUrl.
shippingAmount: string
Shipping amount that will send as payload to createPaymentUrl.
discountAmount: string
Discount amount that will send as payload to createPaymentUrl.

account: {
  email: string;
};
billing: {
  firstName: string;
  lastName: string;
  streetName: string;
  streetNumber: string;
  city: string;
  country: string;
  postalCode: string;
};
shipping: {
  firstName: string;
  lastName: string;
  streetName: string;
  streetNumber: string;
  city: string;
  country: string;
  postalCode: string;
};

requestHeader: object Information that you want to send to the server as a header. Structure for CoFe:
```
"Frontastic-Session": string;
"Commercetools-Frontend-Extension-Version": string;
```

Payment specific properties

In addition, each payment component comes with its own specific properties.

ApplePay

applePayDisplayName: string
Name of your store.

CreditCard

showPostalCode: boolean
Show field for postal code in credit card mask.
showCardHoldersName: boolean
Show field for name in credit card mask.
threeDSBillingAddress: object
An optional billingAddress object for verification.
threeDSAdditionalInformation: object
An optional additionalInformation object for verification.
enableVaulting: boolean
Displays a checkbox enabling the customer to store their card information in braintree.
continueOnLiabilityShiftPossible: boolean - optional, default false
Card brands are recommending to ask the user to choose a different form of payment. However, it is still possible to continue. Refer to the documentation for more information.
continueOnNoThreeDS: boolean - optional, default false
This card was ineligible for 3D Secure, but you can still continue with this transaction. Refer to the documentation for more information.

GooglePay

environment: "PRODUCTION" | "TEST"
Environment in which GooglePay operates in.
totalPriceStatus: "NOT_CURRENTLY_KNOWN" | "ESTIMATED" | "FINAL"
Specifies the status of amount the shown amount. See Googles reference for more details.
googleMerchantId: string
A Google merchant identifier issued after registration with the Google Pay and Wallet Console.
buttonTheme: google.payments.api.ButtonColor
Sets the color theme of the button.
buttonType: google.payments.api.ButtonType
Sets what kind of label the button will get.
phoneNumberRequired: booloean
Customer has to provide their phone number in the GooglePay form.
billingAddressFormat: "FULL" | "MIN"
Sets whether the customer is required to provide a full or minimal billing address.
billingAddressRequired: boolean
Customer is required to provide a billing address in the GooglePay form.
acquirerCountryCode: string
The ISO 3166-1 alpha-2 country code where the transaction is processed. Merchants must specify the acquirer bank country code.

PayPal

flow: FlowType
Set to checkout for one-time payment flow, or vault for Vault flow. If vault is used with a client token generated with a customer ID, the PayPal account will be added to that customer as a saved payment method.
buttonColor: ButtonColorOption
Sets the color theme of the PayPal button.
buttonLabel: ButtonLabelOption
Sets what kind of label the PayPal button will get.
payLater: booloean
Set to true to show an extra pay later button from PayPal.
payLaterButtonColor: ButtonColorOption
Sets the color theme of the pay later button.
locale: string
Sets the locale for PayPal buttons.
intent: Intent
Sets the intent for PayPal buttons.
commit: boolean
Sets the commit for PayPal buttons.
enableShippingAddress: boolean
Sets the enableShippingAddress for PayPal buttons.
paypalLineItem: LineItem[]
Sets the lineItens for PayPal buttons.
billingAgreementDescription: string
Sets the billingAgreementDescription for PayPal buttons.
shippingAddressOverride: ShippingAddressOverride
Sets the shippingAddressOverride for PayPal buttons.
shippingOptions: PayPalShippingOptions[]
If you want to use onShippingChange feature of PayPal pass shippingOptions to the PayPal component. You can find the structure on PayPalShippingOptions.

You see information about all these options in the PayPal official documents.

Venmo

mobileWebFallBack: boolean
Use this option when you want to use a web-login experience, such as if on mobile and the Venmo app isn't installed.
desktopFlow: "desktopWebLogin" | "desktopQRCode"
Sets Venmos desktop usage.
- desktopWebLogin - the customer will authorize payment via a window popup that allows them to sign in to their Venmo account. This is used explicitly for customers operating from desktop browsers wanting to avoid the QR Code flow.
- desktopQRCode - render a scannable QR-code customers scan with their phone to approve via the mobile app.
paymentMethodUsage: "multi_use" | "single_use"
The intended usage for the Venmo payment method nonce. Possible options are:
- single_use - intended as a one time transaction
- multi_use - intended to be vaulted and used for multiple transactions
allowNewBrowserTab: boolean
This should be set to false if your payment flow requires returning to the same tab, e.g. single page applications. Doing so causes isBrowserSupported to return true only for mobile web browsers that support returning from the Venmo app to the same tab.
profile_id: string
The Venmo profile ID to be used during payment authorization. Customers will see the business name and logo associated with this Venmo profile.
useTestNonce: boolean
If set to true the component will use a test nonce and username to succeed the payment. Even if you cancel the login popup it will continue.
setVenmoUserName: (venmoName: string) => any
Returns the Venmo username of the customer. Has to be shown in the checkout according to Venmo guidelines.
ignoreBowserSupport: boolean
Venmo does check for browser support and won't load if it fails. You can ignore the check here. Useful for testing purposes, should not be used in production.

Local Payments

Local payments group together multiple region specific payment methods. Each payment method is being exported as its own component wich restricts the possible options for countryCode, currencyCode and paymentType props. Please refer to the braintree guidelines for payment specific restrictions.
They accept the following props:

saveLocalPaymentIdUrl: string
It is your responsibility to develop this API
The url that gets called to the endpoint of the connect app to map the id of local payments to the transaction as recommended in Braintrees documentation. Communicates with CommerceTools backend See the examples in our CoFe integration example repository
paymentType: any
Determined by the specific payment method being used. Refer to this table.
countryCode: any
Determined by the specific payment method being used. Refer to this table.
currencyCode: any
Determined by the specific payment method being used. Refer to this table.
merchantAccountId: string - optional
If not specified it will use the generated clientToken. Otherwise, it is possible to make the transaction to the merchant specified in here.
shippingAddressRequired: boolean - optional, defaults to false
If you need a shipping address to ship physical goods, set shippingAddressRequired to true.
fallbackUrl: string
Users with a mobile App will be redirected from their payment provider to this url where they can complete the payment
fallbackButtonText: string - optional
The text to appear on the button

Pure Vaulting

The Credit-Card and PayPal components can offer pure vaulting for registered customers, so they can go through checkouts faster in the future.
In addition to the general payment properties mentioned earlier, both of them need:

createPaymentForVault: string
POST-Request - we get a CreatePaymentResponse with an amount of 0.
It is your responsibility to develop this API
The url that gets called to the endpoint of the connect app to create a payment in commerce tools. Communicates with CommerceTools backend
See the examples in our CoFe integration example repository
vaultPaymentMethodUrl: string
POST-Request - we get a success/fail that will be returned from the Braintree integration module
It is your responsibility to develop this API
The url that gets called to the endpoint of the connect app to vault the payment method for the current customer. Communicates with CommerceTools backend
See the examples in our CoFe integration example repository
isPureVault: boolean Must be true to enable pure vaulting.

Braintree Commercetools Connector

In order to use this client package you need to run braintree-commercetools-connector connect app as well.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.\ See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.