@strivve/strivve-cx
v0.1.25
Published
Varying levels of customizable Javascript Components which easily drop into desktop and mobile web applications as well as native applications as reqired.
Downloads
609
Readme
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: '[email protected]',
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 | | email | 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(', '));
},
});