# MangopayVault SDK - User integration guide

## Installation

The MangoPay MangopayVault SDK is available on npm. See @mangopay/vault-sdk for an API reference.

```
npm install --save @mangopay/vault-sdk
# or
yarn add @mangopay/vault-sdk
```

## Create a Card Registration

Send the request to [https://api.mangopay.com/v2.01/clientId/cardregistrations](https://api.mangopay.com/v2.01/oauth/token/) with the input JSON data, where clientId is the ID of your MangoPay client account.

### CreateCardRegistrationResult

```
Promise<CreateCardRegistrationResult>;
```

| Prop                                                                          | Type          |
| ----------------------------------------------------------------------------- | ------------- |
| Id                                                                            | String        |
| CardRegistrationURL <br/> The URL to submit the card details form to          | String        |
| AccessKey <br/> A special key to use when registering a card                  | String        |
| PreregistrationData <br/> A specific value to pass to the CardRegistrationURL | String        |
| errors                                                                        | MgpTypedError |

### MgpTypedError

```ts
type MgpTypedError<T> = {
  [Property in keyof T]: string;
};
```

## Initialisation

```jsx
import { MangopayVault } from '@mangopay/vault-sdk';

const options = {
  clientId: 'MANGOPAY_CLIENT_ACCOUNT_ID',
  environment: 'SANDBOX | PRODUCTION',
};

const vault = MangopayVault.initialize(options);
```

### How it works

The MangopayVault API provides you with _tokenizePaymentMethod( );_

## Tokenize Payment Method

### CardInfoObject

| Prop                                                                     | Type   |
| ------------------------------------------------------------------------ | ------ |
| cardNumber <br/> The card number, as a string without any separators     | String |
| cardExpirationDate <br/> Card expiration date - should be in format MMYY | String |
| cardCvx <br/> Card security code                                         | String |

```jsx
const cardInfoObject = {
  cardNumber: '4970107111111119',
  cardExpirationDate: '1127',
  cardCvx: '123',
};

const preregistrationData = {
  id: createCardRegistrationResult.Id,
  cardRegistrationURL: createCardRegistrationResult.CardRegistrationURL,
  accessKeyRef: createCardRegistrationResult.AccessKey,
  data: createCardRegistrationResult.PreregistrationData,
};

const tokenizePaymentMethodResult = await vault.tokenizePaymentMethod(cardInfoObject, preregistrationData);
```

### TokenizePaymentMethodResult

```
Promise<UpdateCardRegistrationOutput>;
```

### UpdateCardRegistrationOutput

| Prop                                                                          | Type          |
| ----------------------------------------------------------------------------- | ------------- |
| Id                                                                            | String        |
| CardRegistrationURL <br/> The URL to submit the card details form to          | String        |
| AccessKey <br/> A special key to use when registering a card                  | String        |
| PreregistrationData <br/> A specific value to pass to the CardRegistrationURL | String        |
| CardId <br/> The ID of a card                                                 | String        |
| errors                                                                        | MgpTypedError |