Fastlane reference

1interface FastlaneOptions {
2  shippingAddressOptions: AddressOptions,
3  cardOptions: CardOptions,
4  styles: StyleOptions
5}
6/*
7 * To restrict the use of Fastlane to specific countries or regions, set
8 * allowedLocations to an array containing the countries or regions where Fastlane
9 * should be allowed.
10 *
11 * To allow all regions within a particular country, specify only the country's
12 * ISO 3166-1 alpha-2 country code.
13 *
14 * To allow only specific regions in a country, specify the country's
15 * ISO 3166-1 alpha-2 country code, followed by a colon (":"), followed by the
16 * name of the region.
17 *
18 * Examples:
19 *   - [ "US" ] = Allow all regions within the United States
20 *   - [ "US:CA", "US:AZ" ] = Allow in California in Arizona, but nowhere else
21 *   - [ "US:CA", "US:AZ", "FR" ] = Allow in California, Arizona, and France,
22 *       but nowhere else
23 */
24interface AddressOptions {
25  // default: empty array = all locations allowed
26  allowedLocations: [AddressLocationEnum];
27}
28Enum AddressLocationEnum {
29  {
30    ISO - country - code
31  } {
32    ISO - country - code
33  }: {
34    ISO - region - code
35  }
36}
37interface CardOptions {
38  // default: empty array = all brands allowed
39  allowedBrands: [CardBrandEnum];
40}
41Enum CardBrandEnum {
42  VISA
43  MASTERCARD
44  AMEX
45  DINERS
46  DISCOVER
47  JCB
48  CHINA_UNION_PAY
49  MAESTRO
50  ELO
51  MIR
52  HIPER
53  HIPERCARD
54}

1type create = (options: FastlaneOptions) => Fastlane;

1interface Fastlane {
2  identity {
3    lookupCustomerByEmail: (email: string) => LookupCustomerResult,
4    triggerAuthenticationFlow: (customerContextId: string, options: AuthenticationFlowOptions) => AuthenticatedCustomerResult
5  }
6  profile {
7    showShippingAddressSelector: () => ShowShippingAddressSelectorResult,
8    showCardSelector: () => ShowCardSelectorResult,
9  }
10  setLocale: (locale: string) => void, // options: en_us, es_us, fr_us, zh_us
11    FastlaneCardComponent: (options: FastlaneCardComponentOptions) => FastlaneCardComponent,
12    FastlanePaymentComponent: (options: FastlanePaymentComponentOptions) => FastlanePaymentComponent,
13    FastlaneWatermarkComponent: (options: FastlaneWatermarkOptions) => FastlaneWatermarkComponent
14}

1interface LookupCustomerResult {
2  customerContextId: string
3}

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

1interface AuthenticatedCustomerResult {
2  authenticationState: 'succeeded' | 'failed' | 'canceled' | 'not_found';
3  profileData: ProfileData;
4}
5interface ProfileData {
6  name: Name;
7  shippingAddress: Shipping;
8  card: PaymentToken;
9}
10interface Name = {
11  firstName: string;
12  lastName: string;
13  fullName: string;
14};
15interface Phone = {
16  nationalNumber: string;
17  countryCode: string;
18};
19interface Address = {
20  addressLine1: string,
21  addressLine2: string,
22  adminArea1: string,
23  adminArea2: string;
24  postalCode: string,
25  countryCode: string
26  phone: Phone;
27};
28interface Shipping = {
29  name: Name;
30  address: Address;
31  companyName: string;
32}
33interface BillingAddress = Address;
34interface PaymentToken {
35  id: string; // This is the payment paymentToken
36  paymentSource: PaymentSource;
37}
38interface PaymentSource {
39  card: CardPaymentSource;
40}
41interface CardPaymentSource {
42  brand: string;
43  expiry: string; // "YYYY-MM"
44  lastDigits: string; // "1111"
45  name: string;
46  billingAddress: Address;
47}

1interface ShowShippingAddressSelectorResult {
2  selectionChanged: boolean;
3  selectedAddress: Address;
4}
5interface ShowCardSelectorResult {
6  selectionChanged: boolean;
7  selectedCard: PaymentToken;
8}

1const fastlaneCardComponent = await fastlane.FastlaneCardComponent({
2  ...
3})
4fastlaneCardComponent.render("#card-container")

1type FastlaneCardComponent = (options: FastlaneCardComponentOptions) => FastlaneCardComponent;
2interface FastlaneCardComponent {
3  render: (container) => FastlaneCardComponent;
4  getPaymentToken: async (options: PaymentTokenOptions) => PaymentToken;
5}
6interface FastlaneCardComponentOptions {
7  styles: StyleOptions;
8  fields: {
9    Field
10  };
11}
12interface Field {
13  placeholder: string;
14  prefill: string;
15  enabled: boolean;
16}
17interface PaymentTokenOptions {
18  billingAddress: Address;
19  cardholderName: Name;
20}

1const styles: {};
2const fields: {
3  number: {
4    placeholder: "Number",
5  },
6  phoneNumber: {
7    prefill: "555-555-5555"
8  }
9}
10} 
11
12fastlane.FastlaneCardComponent({
13  styles,
14  fields
15}).render(elem);
16fastlane.FastlanePaymentComponent({
17  styles,
18  fields
19}).render(elem);

1interface StyleOptions {
2  root: {
3    backgroundColor: string,
4    errorColor: string,
5    fontFamily: string,
6    textColorBase: string,
7    fontSizeBase: string,
8    padding: string,
9    primaryColor: string,
10  },
11  input: {
12    backgroundColor: string,
13    borderRadius: string,
14    borderColor: string,
15    borderWidth: string,
16    textColorBase: string,
17    focusBorderColor: string,
18  },
19}