# API

## <roadsync-checkout>

RoadSync checkout dialog.

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key | The RoadSync API key | string | ''
amount | The amount to charge in USD | number | 0
location-id | The RoadSync location ID | string | ''

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
apiKey | api-key | The RoadSync API key | string | ''
amount | amount | The amount to charge in USD | number | 0
locationId | location-id | The RoadSync location ID | string | ''
_selectedPaymentType |  |  | number |
_isPaymentComplete |  |  | boolean | false
isCreditCardSelected |  |  | boolean |
isFuelCardSelected |  |  | boolean |
isComchekSelected |  |  | boolean |
isEFSSelected |  |  | boolean |
isTchekSelected |  |  | boolean |
isUSBankSelected |  |  | boolean |

### Events

Name | Description
--- | ---
roadsync-transaction-complete | Indicates when the transaction is complete
roadsync-transaction-failed | Indicates when the transaction fails

### Slots

Name | Description
--- | ---
(default) | This element has a slot

## <roadsync-comchek-form>

RoadSync Comchek payment form.

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key |  | string | ''
location-id |  | string | ''
amount |  | number | 0

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
_fieldValues |  |  | { [key: string]: string } | { expressCode: '', firstName: '', lastName: '', phone: '', }
_fieldValidity |  |  | { [key: string]: boolean } | { expressCode: false, firstName: false, lastName: false, phone: true, }
apiKey | api-key | The RoadSync API key | string | ''
locationId | location-id | The RoadSync location ID | string | ''
amount | amount | The amount to charge in USD | number | 0
_error |  |  | string | ''
_loading |  |  | boolean | false
_isPaymentSuccessful |  |  | boolean | false
_isFormValid |  |  |  |
_isFormInvalid |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_paymentForm |  |  |
_onPhoneChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_updateField |
Name | Description | Type
--- | --- | ---
target |  | HTMLInputElement
value |  | string
|  | void
_onChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_onError |
Name | Description | Type
--- | --- | ---
e |  | string
|  | void
_onSuccess |
Name | Description | Type
--- | --- | ---
data |  | RoadSyncPaymentResponse
|  | void

### Events

Name | Description
--- | ---
roadsync-transaction-complete | Indicates when the transaction is complete
roadsync-transaction-failed | Indicates when the transaction fails

## <roadsync-complete-payment>

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
amount |  | string | undefined |

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
amount | amount |  | string | undefined |

## <roadsync-credit-card-form>

RoadSync credit card payment form.

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key |  | string | ''
location-id |  | string | ''
amount |  | number | 0

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
_collectJs |  |  |  | new GlobalCollectJS( 'checkout_public_jYt9gzu2s8W74JfrmGkznvR6Q54z7dku' )
_nmiFields |  |  | { [key: string]: NMIField } | { ccnumber: { isValid: false, message: '' }, ccexp: { isValid: false, message: '' }, cvv: { isValid: false, message: '' }, }
_collectJsLoaded |  |  | boolean | false
_fieldValues |  |  | { [key: string]: string } | { email: '', phone: '', firstName: '', lastName: '', address: '', city: '', state: '', zipCode: '', }
_fieldValidity |  |  | { [key: string]: boolean } | { email: false, phone: false, firstName: false, lastName: false, address: false, city: false, state: false, zipCode: false, }
_isFormValid |  |  |  |
apiKey | api-key | The RoadSync API key | string | ''
locationId | location-id | The RoadSync location ID | string | ''
amount | amount | The amount to charge in USD | number | 0
_error |  |  | string | ''
_loading |  |  | boolean | false
_isPaymentSuccessful |  |  | boolean | false
_isFormInvalid |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_nmiCallback |
Name | Description | Type
--- | --- | ---
r |  | CardResponse
|  | Promise
_onPhoneChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_updateField |
Name | Description | Type
--- | --- | ---
target |  | HTMLInputElement
value |  | string
|  | void
_onChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_onError |
Name | Description | Type
--- | --- | ---
e |  | string
|  | void
_onSuccess |
Name | Description | Type
--- | --- | ---
data |  | RoadSyncPaymentResponse
|  | void

### Events

Name | Description
--- | ---
roadsync-transaction-complete | Indicates when the transaction is complete
roadsync-transaction-failed | Indicates when the transaction fails

## <roadsync-efs-form>

RoadSync fuel card payment form.

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key |  | string | ''
location-id |  | string | ''
amount |  | number | 0

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
_fieldValues |  |  | { [key: string]: string } | { expressCode: '', firstName: '', lastName: '', driverLicenseNumber: '', driverLicenseState: '', tripNumber: '', unitNumber: '', driverNumber: '', phone: '', }
_fieldValidity |  |  | { [key: string]: boolean } | { expressCode: false, firstName: false, lastName: false, driverLicenseNumber: false, driverLicenseState: false, tripNumber: false, unitNumber: false, driverNumber: false, phone: false, }
apiKey | api-key | The RoadSync API key | string | ''
locationId | location-id | The RoadSync location ID | string | ''
amount | amount | The amount to charge in USD | number | 0
_error |  |  | string | ''
_loading |  |  | boolean | false
_isPaymentSuccessful |  |  | boolean | false
_isFormValid |  |  |  |
_isFormInvalid |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_paymentForm |  |  |
_onPhoneChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_updateField |
Name | Description | Type
--- | --- | ---
target |  | HTMLInputElement
value |  | string
|  | void
_onChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_onError |
Name | Description | Type
--- | --- | ---
e |  | string
|  | void
_onSuccess |
Name | Description | Type
--- | --- | ---
data |  | RoadSyncPaymentResponse
|  | void

### Events

Name | Description
--- | ---
roadsync-transaction-complete | Indicates when the transaction is complete
roadsync-transaction-failed | Indicates when the transaction fails

## <roadsync-error>

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
error |  | string | undefined |

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
error | error |  | string | undefined |

## <roadsync-checkout>

RoadSync feature flag container

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
name | The feature flag name | string |
environment-id |  | string | 'GxLjGQvjDcwmnNqdb4UAsQ'

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
name | name | The feature flag name | string |
environmentID | environment-id |  | string | 'GxLjGQvjDcwmnNqdb4UAsQ'
enabled |  |  | boolean | false
_flagsmith |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_onChange |  |  | void

### Slots

Name | Description
--- | ---
(default) | Elements to show when the feature flag is enabled
disabled | Content to show when the feature flag is disabled

## <roadsync-fuel-card-form>

RoadSync fuel card payment form.

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key |  | string | ''
location-id |  | string | ''
amount |  | number | 0

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
_fieldValues |  |  | { [key: string]: string } | { cardNumber: '', driverNumber: '', odometer: '', tripNumber: '', poNumber: '', trailerNumber: '', }
_fieldValidity |  |  | { [key: string]: boolean } | { cardNumber: false, driverNumber: true, odometer: true, tripNumber: true, poNumber: true, trailerNumber: true, }
apiKey | api-key | The RoadSync API key | string | ''
locationId | location-id | The RoadSync location ID | string | ''
amount | amount | The amount to charge in USD | number | 0
_error |  |  | string | ''
_loading |  |  | boolean | false
_isPaymentSuccessful |  |  | boolean | false
_isFormValid |  |  |  |
_isFormInvalid |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_onPhoneChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_updateField |
Name | Description | Type
--- | --- | ---
target |  | HTMLInputElement
value |  | string
|  | void
_onChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_onError |
Name | Description | Type
--- | --- | ---
e |  | string
|  | void
_onSuccess |
Name | Description | Type
--- | --- | ---
data |  | RoadSyncPaymentResponse
|  | void

### Events

Name | Description
--- | ---
roadsync-transaction-complete | Indicates when the transaction is complete
roadsync-transaction-failed | Indicates when the transaction fails

## <roadsync-grid-column>

### Slots

Name | Description
--- | ---
(default) | This element has a slot

## <roadsync-grid-item>

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
blocks |  | number | undefined |

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
blocks | blocks |  | number | undefined |

### Slots

Name | Description
--- | ---
(default) | This element has a slot

## <roadsync-grid-row>

### Slots

Name | Description
--- | ---
(default) | This element has a slot

## <undefined>

## <roadsync-loader>

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
is-loading |  | boolean | false
label |  | string | "Loading..."

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
isLoading | is-loading |  | boolean | false
label | label |  | string | "Loading..."
containerClasses |  |  | ClassInfo | {}
containerStyles |  |  | StyleInfo | { height: "0" }

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
onTransitionEnd |  |  |
onTransitionRun |  |  |

## <undefined>

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key |  | string | ''
location-id |  | string | ''
amount |  | number | 0

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
apiKey | api-key |  | string | ''
locationId | location-id |  | string | ''
amount | amount |  | number | 0
_fieldValues |  |  | { [key: string]: string } | {}
_fieldValidity |  |  | { [key: string]: boolean } | {}
_error |  |  | string | ''
_loading |  |  | boolean | false
_isPaymentSuccessful |  |  | boolean | false
_isFormValid |  |  |  |
_isFormInvalid |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_onPhoneChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_updateField |
Name | Description | Type
--- | --- | ---
target |  | HTMLInputElement
value |  | string
|  | void
_onChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_onError |
Name | Description | Type
--- | --- | ---
e |  | string
|  | void
_onSuccess |
Name | Description | Type
--- | --- | ---
data |  | RoadSyncPaymentResponse
|  | void

## <roadsync-payment-method-button>

RoadSync payment method selection button

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
icon | The button icon | number | ''
selected |  | boolean | false

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
icon | icon | The button icon | number | ''
selected | selected |  | boolean | false
label |  | The button label | string |

### Slots

Name | Description
--- | ---
(default) | This element has a slot
icon | Payment method icon

## <roadsync-tchek-form>

RoadSync TChek payment form.

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key |  | string | ''
location-id |  | string | ''
amount |  | number | 0

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
_fieldValues |  |  | { [key: string]: string } | { expressCode: '', driverLicenseNumber: '', driverLicenseState: '', tripNumber: '', truckNumber: '', driverNumber: '', mileage: '', poNumber: '', }
_fieldValidity |  |  | { [key: string]: boolean } | { expressCode: false, driverLicenseNumber: false, driverLicenseState: false, tripNumber: true, truckNumber: true, driverNumber: true, mileage: true, poNumber: true, }
apiKey | api-key | The RoadSync API key | string | ''
locationId | location-id | The RoadSync location ID | string | ''
amount | amount | The amount to charge in USD | number | 0
_error |  |  | string | ''
_loading |  |  | boolean | false
_isPaymentSuccessful |  |  | boolean | false
_isFormValid |  |  |  |
_isFormInvalid |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_onPhoneChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_updateField |
Name | Description | Type
--- | --- | ---
target |  | HTMLInputElement
value |  | string
|  | void
_onChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_onError |
Name | Description | Type
--- | --- | ---
e |  | string
|  | void
_onSuccess |
Name | Description | Type
--- | --- | ---
data |  | RoadSyncPaymentResponse
|  | void

### Events

Name | Description
--- | ---
roadsync-transaction-complete | Indicates when the transaction is complete
roadsync-transaction-failed | Indicates when the transaction fails

## <roadsync-usbank-form>

RoadSync US Bank payment form.

### Attributes

Name | Description | Type | Default
--- | --- | --- | ---
api-key |  | string | ''
location-id |  | string | ''
amount |  | number | 0

### Properties

Name | Attribute | Description | Type | Default
--- | --- | --- | --- | ---
_fieldValues |  |  | { [key: string]: string } | { adminCode: '', cardNumber: '', }
_fieldValidity |  |  | { [key: string]: boolean } | { adminCode: false, cardNumber: false, }
apiKey | api-key | The RoadSync API key | string | ''
locationId | location-id | The RoadSync location ID | string | ''
amount | amount | The amount to charge in USD | number | 0
_error |  |  | string | ''
_loading |  |  | boolean | false
_isPaymentSuccessful |  |  | boolean | false
_isFormValid |  |  |  |
_isFormInvalid |  |  |  |

### Methods

Name | Parameters | Description | Return
--- | --- | --- | ---
_onPhoneChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_updateField |
Name | Description | Type
--- | --- | ---
target |  | HTMLInputElement
value |  | string
|  | void
_onChange |
Name | Description | Type
--- | --- | ---
ev |  | Event
_onError |
Name | Description | Type
--- | --- | ---
e |  | string
|  | void
_onSuccess |
Name | Description | Type
--- | --- | ---
data |  | RoadSyncPaymentResponse
|  | void

### Events

Name | Description
--- | ---
roadsync-transaction-complete | Indicates when the transaction is complete
roadsync-transaction-failed | Indicates when the transaction fails