Skip to content

Commit

Permalink
feat: add cardBin to js change events (#41)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinperaza
kevinperaza authored Jan 20, 2023
1 parent c0c7995 commit 7ac3e49
Showing 1 changed file with 16 additions and 10 deletions.
26 changes: 16 additions & 10 deletions docs/sdks/web/javascript/methods.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Once you have [created](/docs/sdks/web/javascript/lifecycle#create-element) and
```

| Name | Resulting Type | Eligible Elements | Description |
|------------|----------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------|
| ---------- | -------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| `clear` | _void_ | All | Clears the element input(s) value. |
| `focus` | _void_ | All | Focuses on the element input. |
| `blur` | _void_ | All | Blurs the element input. |
Expand Down Expand Up @@ -71,7 +71,7 @@ cardElement.on("change", (changeEvent) => {
```

| Parameter | Required | Type | Description |
|-----------|----------|------------|-------------------------------------------------------------------------------------------------|
| --------- | -------- | ---------- | ----------------------------------------------------------------------------------------------- |
| `event` | true | _"change"_ | The event type to listen to. |
| `handler` | true | _function_ | Callback function to be called when the event is fired. Takes in a [ChangeEvent](#changeevent). |

Expand All @@ -91,12 +91,18 @@ cardElement.on("change", (changeEvent) => {
```

| Attribute | Type | Eligible Elements | Description |
|-------------|-----------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `complete` | _boolean_ | All | Whether this element satisfies the mask and is valid, i.e. it is ready to be tokenized. |
| `empty` | _boolean_ | All | Whether the element is empty. Multi-input Elements will be `empty` only if all inputs are. |
| `errors` | _array_ | All | Array of [FieldError](#fielderror). |
| `cardBrand` | _string_ | [card](/docs/sdks/web/javascript/types#card-element)<br/>[cardNumber](/docs/sdks/web/javascript/types#card-number-element) | (Optional) The credit card [brand](/docs/sdks/web/javascript/options#card-brands) (e.g. `'american-express'`, `'visa'`, `'unknown'`). The value defaults to `'unknown'` until a card brand is recognized. |
| `cardLast4` | _string_ | [card](/docs/sdks/web/javascript/types#card-element)<br/>[cardNumber](/docs/sdks/web/javascript/types#card-number-element) | (Optional) The credit card's last 4 digits. The value is not provided until a complete card number is entered. |
| `cardBin` | _string_ | [card](/docs/sdks/web/javascript/types#card-element)<br/>[cardNumber](/docs/sdks/web/javascript/types#card-number-element) | (Optional) The credit card number's first 6 digits when the input is considered complete. |

<Alert>
If you need an eight digit BINs please email us at{" "}
<a href="mailto:info@basistheory.com">info@basistheory.com.</a>
</Alert>

#### FieldError

Expand All @@ -108,7 +114,7 @@ cardElement.on("change", (changeEvent) => {
```

| Attribute | Type | Description |
|------------|-------------------------------|-----------------------------------------------------------------------------------------------------|
| ---------- | ----------------------------- | --------------------------------------------------------------------------------------------------- |
| `targetId` | _string_ | Input ID that triggered the error. Values vary per [element type](/docs/sdks/web/javascript/types). |
| `type` | _"invalid"_ or _"incomplete"_ | Type of the error. |

Expand All @@ -121,7 +127,7 @@ cardElement.on("focus", (focusEvent) => {});
```

| Parameter | Required | Type | Description |
|-----------|----------|------------|-----------------------------------------------------------------------------------------------|
| --------- | -------- | ---------- | --------------------------------------------------------------------------------------------- |
| `event` | true | _"focus"_ | The event type to listen to. |
| `handler` | true | _function_ | Callback function to be called when the event is fired. Takes in a [FocusEvent](#focusevent). |

Expand All @@ -134,7 +140,7 @@ cardElement.on("focus", (focusEvent) => {});
```

| Attribute | Type | Description |
|------------|----------|-----------------------------------------------------------------------------------------------------|
| ---------- | -------- | --------------------------------------------------------------------------------------------------- |
| `targetId` | _string_ | Input ID that triggered the event. Values vary per [element type](/docs/sdks/web/javascript/types). |

### On Blur
Expand All @@ -146,7 +152,7 @@ cardElement.on("blur", (blurEvent) => {});
```

| Parameter | Required | Type | Description |
|-----------|----------|------------|---------------------------------------------------------------------------------------------|
| --------- | -------- | ---------- | ------------------------------------------------------------------------------------------- |
| `event` | true | _"blur"_ | The event type to listen to. |
| `handler` | true | _function_ | Callback function to be called when the event is fired. Takes in a [BlurEvent](#blurevent). |

Expand All @@ -159,7 +165,7 @@ cardElement.on("blur", (blurEvent) => {});
```

| Attribute | Type | Description |
|------------|----------|-----------------------------------------------------------------------------------------------------|
| ---------- | -------- | --------------------------------------------------------------------------------------------------- |
| `targetId` | _string_ | Input ID that triggered the event. Values vary per [element type](/docs/sdks/web/javascript/types). |

### On Keydown
Expand All @@ -171,7 +177,7 @@ cardElement.on("keydown", (keydownEvent) => {});
```

| Parameter | Required | Type | Description |
|-----------|----------|-------------|---------------------------------------------------------------------------------------------------|
| --------- | -------- | ----------- | ------------------------------------------------------------------------------------------------- |
| `event` | true | _"keydown"_ | The event type to listen to. |
| `handler` | true | _function_ | Callback function to be called when the event is fired. Takes in a [KeydownEvent](#keydownevent). |

Expand All @@ -189,7 +195,7 @@ cardElement.on("keydown", (keydownEvent) => {});
```

| Attribute | Type | Description |
|------------|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| ---------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `targetId` | _string_ | Input targetId that triggered the event. Values vary per [element type](/docs/sdks/web/javascript/types). |
| `key` | _Escape_ or _Enter_ | Key pressed by the user. |
| `ctrlKey` | _boolean_ | Flag indicating <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey" target="_blank">`control` key</a> was pressed when the event occurred. |
Expand Down

1 comment on commit 7ac3e49

@vercel
Copy link

@vercel vercel bot commented on 7ac3e49 Jan 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

developers-basistheory-com – ./

developers.basistheory.com
developers-basistheory-com-basis-theory.vercel.app
developers-basistheory-com-git-master-basis-theory.vercel.app

Please sign in to comment.