# credify-web-sdk

A serviceX SDK for web application

Example app is here:

:link: https://web-sdk.credify.one

## Installation

```sh
yarn add credify-web-sdk
```

or

```sh
npm install credify-web-sdk
```

## Usage

Please refer to the `NormalPage.tsx` in the example project inside this repo to see how it works with Credify's sandbox server. For detail of API usages, please check the API type spec.

This is a url demo for the example app: `https://web-sdk.credify.one/market?env=sandbox`. You should change `demoUserUrl` and `pushClaimUrl` to map with your API endpoint. For now, it uses Credify's demo organization in sandbox environment.

In case of Buy Now Pay Later (BNPL) flow, you can refer to the `BNPLPage.tsx`.
This is a url demo for bnpl: `https://web-sdk.credify.one/bnpl?env=sandbox`.

Your back-end needs to expose an API to get [offer list](https://api-servicex-integration.credify.one/#tag/Markets/paths/~1offer-filtering/post) (visit [the developer page](https://developers.credify.one/details/be-data-provider.html#api-definition-5) for more details.). The offer information will be used later.
E.g: `showOfferByCode`, `showBnplByCodes` methods.

```js
import {
  initialize,
  getOffers,
  startOfferFlow,
  setPassportCloseCallback,
} from "credify-web-sdk"

/**
 * Instantiates the SDK
 * @param apiKey - The org's apiKey
 * @param environment - The development environment: "SANDBOX" or "PRODUCTION"
 * @param marketId - Your organization ID which you can get from the Dashboard when you create a new organization
 * @param theme - The theme customization. It's PassportThemeConfig object and it's optional
 * */
initialize(environment, apiKey, marketId, theme)

/**
 * Begins offer flow
 * @param data - A payload that contains an `offerCode` that you want to show, profile containing user info and customization
 * theme(PassportThemeConfig object). The theme is optional.
 * @param pushClaimCB - A callback for an organization to push the user's claim tokens
 */
showOfferByCode(data, pushClaimCB)

/**
 * Begins offer flow
 * @param data - A payload that contains an `offerCode` list that you want to show, profile containing user info and customization
 * theme(PassportThemeConfig object). The theme is optional.
 * @param pushClaimCB - A callback for an organization to push the user's claim tokens
 */
showPromotionOffersByCodes(data, pushClaimCB)

/**
 * If we want to handle events like refresh data when the redemption flow finishes, we need to set the call back here
 * @param closeCB - callback
 */
setPassportCloseCallback(closeCB)

/**
 * Redirect user to passport consent page to finish the redemption flow
 */
redirectToConsentPage()

/**
 * Starts OIDC for an OIDC client
 * @param oidcSetupUrl - A full OIDC setup URL that contains some properties like a phone number.
 */
login(oidcSetupUrl)

/**
 * Handle logic for proxy login
 * @param loginCallback - Code logic after login
 */
proxyLogin(loginCallback)

/**
 * Begins offer flow for BNPL
 * @param shouldRedirect - True: Redirect on the current url. False: open new window
 * @param data - A payload that contains `offerCode` list/`productCode`(get from offer object),
 * profile containing user info and order info is required.
 * @param pushClaimTokenCB - A callback for an organization to push the user's claim tokens
 * @param newWindow - New window in case
 */
showBnplByCodes(data, pushClaimTokenCB, newWindow)

/**
 * To add logic after bnpl payment complete
 * @param e - The event that will be executed after completeting BNPL payment
 */
registerBNPLPaymentCompleteHandler(e)

/**
 * A function to registerd window object before opening new window. To resolving issue for opening new popup on Safari
 */
getPreparedWindowToOpen()
```

### Theme customization
```typescript jsx
// This is struct for theme customization
const THEME: PassportThemeConfig = {
    color: THEME_COLOR,
    font: THEME_FONT,
    inputFieldRadius: 5,
    modelRadius: 10,
    buttonRadius: 5,
    boxShadow: "0px 4px 30px rgba(0, 0, 0, 0.1)",
  };
```
![Theme](./imgs/Theme.png)

```typescript jsx
/**
 * This is struct for font customization
 */
const THEME_FONT: ThemeFont = {
    primaryFontFamily: "Roboto",
    secondaryFontFamily: "Roboto",
    bigTitleFontSize: 21,
    bigTitleFontLineHeight: 31,
    modelTitleFontSize: 20,
    modelTitleFontLineHeight: 29,
    sectionTitleFontSize: 16,
    sectionTitleFontLineHeight: 21,
    bigFontSize: 18,
    bigFontLineHeight: 26,
    normalFontSize: 14,
    normalFontLineHeight: 18,
    smallFontSize: 13,
    smallFontLineHeight: 20,
    boldFontSize: 15,
    boldFontLineHeight: 21,
};
```
![Theme font](./imgs/ThemeFont.png)

```typescript jsx
/**
 * This is struct for color customization
 */
const THEME_COLOR: ThemeColor = {
    primaryBrandyStart: "#1382F8",
    primaryBrandyEnd: "#17A6EF",
    primaryText: "#333333",
    secondaryActive: "#1483F7",
    secondaryDisable: "#E0E0E0",
    secondaryText: "#999999",
    secondaryComponentBackground: "#DFF3FE",
    secondaryBackground: "#F5F8FF",
    primaryButtonTextColor: "#FFFFFF",
    primaryButtonBrandyStart: "#02D15D",
    primaryButtonBrandyEnd: "#01B779", 
};
```
![Theme color](./imgs/ThemeColor.png)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT