0.1.10 • Published 11 days ago
@strivve/strivve-cx v0.1.10
Strivve CX
Varying levels of customizable Javascript Components which easily drop into desktop and mobile web applications as well as native applications as reqired.
Documentation
https://swch.github.io/Strivve-UX-Components/
Install via CDN
<script src="https://cdn.jsdelivr.net/npm/@strivve/strivve-cx"></script>Usage
<body>
<div id="account-link"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@strivve/strivve-cx"></script>
<script>
Strivve.mountLinkingJourney({
element_id: 'account-link',
api_instance: 'customer-dev',
card: {
pan: '4111111111111111',
cvv: '321',
expiration_month: '2',
expiration_year: '24',
name_on_card: 'Jane',
},
});
</script>Install as package
npm install @strivve/strivve-cxUsage
import Strivve from '@strivve/strivve-cx';
Strivve.mountLinkingJourney({
element_id: 'account-link',
api_instance: 'customer-dev',
card: {
pan: '4111111111111111',
cvv: '321',
expiration_month: '2',
expiration_year: '24',
name_on_card: 'Jane',
address: {
city: 'Seattle',
postal_code: '98177',
country: 'USA',
first_name: 'Jane',
last_name: 'Smith',
email: 'jane@test.com',
phone_number: '2065555555',
address1: 'test',
state: 'test',
subnational: 'WA',
is_primary: true,
},
},
});Config
| name | params | description |
|---|---|---|
| element_id | string | required |
| api_instance | string | required |
| card | CardConfig | optional |
| card_id | string | optional |
| appearance | Appearance | optional |
| localization | Localization | optional |
| grant | string | optional |
| select_site | mountSelectSiteViewOptions | optional |
| account_link | mountAccountLinkViewOptions | optional |
Card
| name | params | description |
|---|---|---|
| pan | string | Unique Personal Account Reference number for this card, to be used for card lookup. Generated automatically from PAN, expiration date, and username if using the SDK. |
| cvv | string | - |
| expiration_month | string | - |
| expiration_year | string | - |
| name_on_card | string | - |
| address | Address | required |
Address
| name | params | description |
|---|---|---|
| city | string | required |
| postal_code | string | required |
| first_name | string | required |
| last_name | string | required |
| string | required | |
| phone_number | string | required |
| address1 | string | required |
| address2 | string | optional |
| state | string | required |
| subnational | string | required |
| is_primary | boolean | required |
| country | string | optional |
| postal_other | string | optional |
Service, Core and Component
We can use parts of the functions and components.
const service = Strivve.createService({ api_instance: 'customer-dev' });
const core = Strivve.createCore({
service,
card: {
pan: '4111111111111111',
cvv: '321',
expiration_month: '2',
expiration_year: '24',
name_on_card: 'Jane',
},
});
const component = Strivve.createComponent({ core });
component.mountAccountLinkView('account-link', {
site_id: '1',
});
component.mountSelectSiteView('select-sites', {
submit: (selected) => {
alert(selected.map((item) => item.name).join(', '));
},
});