Accelerated checkout for Braintree reference

DOCS

Last updated: Aug 15th, 7:36am

Connect create configuration

Name	Default value	Notes
`allowedLocations: [AddressLocationEnum];`	Empty array	All locations are allowed if array is empty.
`allowedBrands: [CardBrandEnum];`	Empty array	All card brands are allowed if array is empty.

The AddressLocationEnum supports 1 or more countries in the ISO 3166-1 alpha-2 country code format. To allow an entire country, specify only the country code. For example, [ "US" ] would allow all regions within the United States. To allow a region in a country, specify the region code. For example, ["US:CA","US:NC", "FR"] only allows payers from California, North Carolina, and France only.

The same applies to the CardBrandEnum. This can restrict which card brands you accept from your payer. For example, ` [ "VISA", "MASTER_CARD", "DISCOVER", "AMEX" ] would only allow payments from those card brands.

1interface ConnectOptions {
2  authorization: string,
3  client: braintree.client,
4  deviceData: string,
5  shippingAddressOptions: AddressOptions,
6  cardOptions: CardOptions
7}
8interface AddressOptions {
9  // default: empty array = all locations allowed
10  allowedLocations: [AddressLocationEnum];
11}
12Enum AddressLocationEnum {
13  ISO-COUNTRY-CODE
14  ISO-COUNTRY-CODE:ISO-REGION-CODE
15}
16interface CardOptions {
17  // default: empty array = all brands allowed
18  allowedBrands: [CardBrandEnum];
19}
20Enum CardBrandEnum {
21  VISA
22  MASTER_CARD
23  DISCOVER
24  AMEX
25  SOLO
26  JCB
27  STAR
28  DELTA
29  SWITCH
30  MAESTRO
31  CB_NATIONALE
32  CONFIGOGA
33  CONFIDIS
34  ELECTRON
35  CETELEM
36  CHINA_UNION_PAY
37}

1type create = (options: ConnectOptions) => Connect;

Connect namespace

Returned as the result of calling connect.create({...}).

1interface Connect {
2  identity {
3    lookupCustomerByEmail: (email: string) => LookupCustomerResult,
4    triggerAuthenticationFlow: (customerContextId: string, options: AuthenticationFlowOptions) => AuthenticatedCustomerResult
5  }
6  profile {
7    showShippingAddressSelector: () => {selectionChanged: bool, selectedAddress: Address},
8    showCardSelector: () => {selectionChanged: bool, selectedCard: PaymentToken},
9  }
10  setLocale: (locale: string) => void,
11  ConnectCardComponent: (options: ConnectCardComponentOptions) => ConnectCardComponent,
12  ConnectWatermark: (options: ConnectWaterOptions) => ConnectWatermark
13}

LookupCustomerResult

The LookupCustomerResult object type is returned from the identity.lookupCustomerByEmail(email) method.

1interface LookupCustomerResult {
2  customerContextId: string
3}

ConnectWatermark

1interface ConnectWatermarkOptions {
2    includeAdditionalInfo: boolean
3}
4interface ConnectWatermark {
5  render: (container) => null
6}

Style options

You can use any color value that CSS supports, such as hex values, RGB, RGA, and color names.

Default values for each option are as follows:

Option	Default value
`backgroundColorPrimary`	`#ffffff`
`errorColor`	`#C40B0B`
`fontFamily`	`"Helvetica, Arial, sans-serif"`
`borderRadius`	`0.25rem`
`borderColor`	`#9E9E9E`
`focusBorderColor`	`#4496F6`
`colorPrimary`	`#0F005E`
`colorSecondary`	`#ffffff`
`text.body.color`	`#222222`
`text.body.fontSize`	`1rem`
`text.caption.color`	`#515151`
`text.caption.fontSize`	`0.875rem`
`branding`	`light`

1interface StyleOptions {
2  root: {
3    backgroundColorPrimary: string
4    errorColor: string,
5    fontFamily: string,
6  },
7  input: {
8    borderRadius: string,
9    borderColor: string,
10    focusBorderColor: string
11  },
12  toggle: { 
13    colorPrimary: string,
14    colorSecondary: string,
15  },
16  text: {
17    body: {
18      color: string,
19      fontSize: string,
20    },
21    caption: {
22      color: string,
23      fontSize: string,
24    },
25  },
26  branding: 'light',
27}

Authentication flow options

This object is passed as a parameter to your identity.triggerAuthenticationFlow() call.

1interface AuthenticationFlowOptions {
2  styles: StylesOptions;
3}
4interface AuthenticationFlowOptions { styles: StylesOptions; }

AuthenticatedCustomerResult

The AuthenticatedCustomerResult object type is returned from the identity.triggerAuthenticationFlow() call.

1interface AuthenticatedCustomerResult {
2  authenticationState: 'succeeded'|'failed'|'canceled';
3  profileData: ProfileData;
4}
5interface ProfileData {
6  name: Name;
7  shippingAddress: Address;
8  card: PaymentToken;
9}
10interface Name {
11    firstName: string;
12    lastName: string;
13}
14interface Address {
15  firstName: string;
16  lastName: string;
17  company: string;
18  streetAddress: string;
19  extendedAddress: string;
20  locality: string;
21  region: string;
22  postalCode: string;
23  countryCodeNumeric: number;
24  countryCodeAlpha2: string;
25  countryCodeAlpha3: string;
26  phone: string;
27}
28interface PaymentToken {
29  id: string;
30  paymentSource: PaymentSource;
31}
32interface PaymentSource {
33  card: CardPaymentSource;
34};
35interface CardPaymentSource {
36  brand: string;
37  expiry: string;
38  lastDigits: string;
39  name: string;
40  billingAddress: Address;
41}

ConnectCardComponent

Component that uses the hosted card fields. The resulting interface is a subset of the card fields interface.

The instance of a ConnectCardComponent can be created using:

1const connectCardComponent = connect.ConnectCardComponent({...}).render('#card-container')

ConnectCardComponent reference types

1type ConnectCardComponent = (options: ConnectCardComponentOptions) => ConnectCardComponent;
2interface Field {
3  placeholder: string;
4  prefill: string;
5}
6interface ConnectCardComponentOptions {
7  fields: {Field};
8}
9interface TokenizeDetails {
10  bin: string;
11  cardType: string;
12  expirationMoth: string;
13  expirationYear: string;
14  cardholderName: string;
15  lastFour: string;
16  lastTwo: string;
17}
18interface TokenizeResult {
19  nonce: string;
20  details: TokenizeDetails;
21  description: string;
22  type: string;
23}
24interface TokenizeOptions {
25  billingAddress: Address;
26  shippingAddress: Address; (optional)
27}
28interface Card {
29  type: string;
30  niceType: string;
31  code: {
32    name: 'CVV' | 'CID' | 'CVC';
33    size: number;
34  }
35}
36interface ConnectCardComponent {
37  tokenize: async (options: TokenizeOptions) => TokenizeResult;
38}

Configuring fields

Fields can be configured or pre-filled during instantiation of the ConnectCardComponentas follows:

1connect.ConnectCardComponent({
2  fields: {
3    number: {
4      placeholder: 'Number',
5    },
6    phoneNumber: {
7      prefill: '555-555-5555'
8    }
9  }
10}).render(elem)

Available fields

Name	Type	Attributes	Description
`number`	field	Optional	Card number.
`expirationDate`	field	Optional	Expiration date in `MM/YYYY` or `MM/YY` format. Don't use with the `expirationMonth` and `expirationYear` properties.
`expirationMonth`	field	Optional	Expiration month in `MM` format. Use this field with the `expirationYear` property.
`expirationYear`	field	Optional	Expiration year in `YYYY` or `YY` format. Use this field with the `expirationMonth` property.
`cvv`	field	Optional	3 or 4 digit card verification code such as CVV or CID. To create a CVV-only payment method nonce to verify a saved card, omit all other fields to only collect CVV.
`postalCode`	field	Optional	Postal or region code.
`cardholderName`	field	Optional	Cardholder name on the payer’s credit card.
`phoneNumber`	field	Optional	Phone number associated with the payer’s credit card.