@paydock/client-sdk/docs/paypal-save-payment-source.md

Paydock client sdk

## Classes

<dl>
<dt><a href="#PayPalSavePaymentSourceWidget">PayPalSavePaymentSourceWidget</a></dt>
<dd><p>PayPal Save Payment Source Widget constructor</p>
</dd>
</dl>

## Typedefs

<dl>
<dt><a href="#OnSuccessCallback">OnSuccessCallback</a> : <code>function</code></dt>
<dd><p>Callback for onSuccess method.</p>
</dd>
<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
<dd><p>Callback for onError method.</p>
</dd>
<dt><a href="#OnCancelCallback">OnCancelCallback</a> : <code>function</code></dt>
<dd><p>Callback for onCancel method.</p>
</dd>
</dl>

## Interfaces

<dl>
<dt><a href="#PayPalSavePaymentSourceWidgetConfig">PayPalSavePaymentSourceWidgetConfig</a> : <code>object</code></dt>
<dd><p>Interface of data used for PayPal configuration. For further information refer to <a href="https://developer.paypal.com/sdk/js/reference/#style">the documentation</a>.</p>
</dd>
<dt><a href="#ErrorCodes">ErrorCodes</a> : <code>object</code></dt>
<dd><p>Interface of possible error codes inside onError event data.</p>
</dd>
<dt><a href="#IOnSuccessEventData">IOnSuccessEventData</a> : <code>object</code></dt>
<dd><p>Interface for IOnSuccessEventData</p>
</dd>
<dt><a href="#IOnErrorEventData">IOnErrorEventData</a> : <code>object</code></dt>
<dd><p>Interface for IOnErrorEventData</p>
</dd>
<dt><a href="#IOnCancelEventData">IOnCancelEventData</a> : <code>object</code></dt>
<dd><p>Interface for IOnCancelEventData</p>
</dd>
</dl>

<a name="PayPalSavePaymentSourceWidgetConfig" id="PayPalSavePaymentSourceWidgetConfig" href="#PayPalSavePaymentSourceWidgetConfig">&nbsp;</a>

## PayPalSavePaymentSourceWidgetConfig : <code>object</code>
Interface of data used for PayPal configuration. For further information refer to [the documentation](https://developer.paypal.com/sdk/js/reference/#style).

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [style.layout] | <code>&#x27;vertical&#x27;</code> \| <code>&#x27;horizontal&#x27;</code> | Used for indicating the PayPal Button layout. |
| [style.color] | <code>&#x27;blue&#x27;</code> \| <code>&#x27;gold&#x27;</code> \| <code>&#x27;silver&#x27;</code> \| <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the main color of the PayPal Button. |
| [style.shape] | <code>&#x27;rect&#x27;</code> \| <code>&#x27;sharp&#x27;</code> \| <code>&#x27;pill&#x27;</code> | Used for indicating the shape of the PayPal Button. |
| [style.label] | <code>&#x27;paypal&#x27;</code> \| <code>&#x27;checkout&#x27;</code> \| <code>&#x27;buynow&#x27;</code> \| <code>&#x27;pay&#x27;</code> | Used for indicating the label of the PayPal Button. |
| [style.disableMaxWidth] | <code>boolean</code> | Used for indicating if the max width will be disabled. |
| [style.disableMaxHeight] | <code>boolean</code> | Used for indicating the max height will be disabled. |
| [style.height] | <code>number</code> | Used for indicating the height of the PayPal Button, if disableMaxHeight is true. |
| [style.borderRadius] | <code>number</code> | Used for indicating the border radius of the PayPal Button. |
| [style.tagline] | <code>boolean</code> | Used for indicating the tagline of the PayPal Button. |
| [message.amount] | <code>number</code> | Used for indicating an amount before the payment. |
| [message.align] | <code>&#x27;center&#x27;</code> \| <code>&#x27;left&#x27;</code> \| <code>&#x27;right&#x27;</code> | Used for indicating the align of the message. |
| [message.color] | <code>&#x27;black&#x27;</code> \| <code>&#x27;white&#x27;</code> | Used for indicating the color of the message. |
| [message.position] | <code>&#x27;top&#x27;</code> \| <code>&#x27;bottom&#x27;</code> | Used for indicating the position of the message. |

<a name="ErrorCodes" id="ErrorCodes" href="#ErrorCodes">&nbsp;</a>

## ErrorCodes : <code>object</code>
Interface of possible error codes inside onError event data.

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| [unavailable] | <code>string</code> | Error code when an error occurs loading the widget. |
| [onPaypalVaultSetupTokenError] | <code>string</code> | Error code when an error occrus on PayPal side. |
| [onGetIdTokenError] | <code>string</code> | Error code when trying to get ID token from PayPal. |
| [onGetWalletConfigError] | <code>string</code> | Error code when trying to get wallet config from Paydock. |
| [onGetSetupTokenError] | <code>string</code> | Error code when trying to get the setup token from PayPal. |
| [onOneTimeTokenError] | <code>string</code> | Error code when trying to get the one time token from Paydock. |

<a name="IOnSuccessEventData" id="IOnSuccessEventData" href="#IOnSuccessEventData">&nbsp;</a>

## IOnSuccessEventData : <code>object</code>
Interface for IOnSuccessEventData

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| event | <code>EVENTS</code> | Event Name is 'ON_SUCCESS' |
| data | <code>object</code> | Data object |
| data.token | <code>string</code> | One Time Token to be exchanged for a Paydock Customer. |
| [data.email] | <code>string</code> | Paypal account customer email if retrieved from Paypal servers. |

<a name="IOnErrorEventData" id="IOnErrorEventData" href="#IOnErrorEventData">&nbsp;</a>

## IOnErrorEventData : <code>object</code>
Interface for IOnErrorEventData

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| event | <code>EVENTS</code> | Event Name is 'ON_ERROR' |
| data | <code>object</code> | Error data object |
| data.error_code | [<code>ErrorCodes</code>](#ErrorCodes) | Error code. One of ErrorCodes. |
| [data.details] | <code>string</code> | Error details. |
| [data.message] | <code>string</code> | Error message. |

<a name="IOnCancelEventData" id="IOnCancelEventData" href="#IOnCancelEventData">&nbsp;</a>

## IOnCancelEventData : <code>object</code>
Interface for IOnCancelEventData

**Kind**: global interface  

| Param | Type | Description |
| --- | --- | --- |
| event | <code>EVENTS</code> | Event Name is 'ON_CANCEL' |

<a name="PayPalSavePaymentSourceWidget" id="PayPalSavePaymentSourceWidget" href="#PayPalSavePaymentSourceWidget">&nbsp;</a>

## PayPalSavePaymentSourceWidget
PayPal Save Payment Source Widget constructor

**Kind**: global class  

* [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget)
    * [new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)](#new_PayPalSavePaymentSourceWidget_new)
    * [.load()](#PayPalSavePaymentSourceWidget+load)
    * [.setEnv(env, [alias])](#PayPalSavePaymentSourceWidget+setEnv)
    * [.onSuccess([callback])](#PayPalSavePaymentSourceWidget+onSuccess)
    * [.onError([callback])](#PayPalSavePaymentSourceWidget+onError)
    * [.onCancel([callback])](#PayPalSavePaymentSourceWidget+onCancel)

<a name="new_PayPalSavePaymentSourceWidget_new" id="new_PayPalSavePaymentSourceWidget_new" href="#new_PayPalSavePaymentSourceWidget_new">&nbsp;</a>

### new PayPalSavePaymentSourceWidget(selector, publicKey, gatewayId, config)

| Param | Type | Description |
| --- | --- | --- |
| selector | <code>string</code> | Selector of html element. Container for PayPal Save Payment Source Widget. |
| publicKey | <code>string</code> | PayDock users public key. |
| gatewayId | <code>string</code> | PayDock's PayPal gatewayId. |
| config | [<code>PayPalSavePaymentSourceWidgetConfig</code>](#PayPalSavePaymentSourceWidgetConfig) | Extra configuration for the widget, like styles. |

**Example**  
```js
var payPalSavePaymentSourceWidget = new PayPalSavePaymentSourceWidget('#paypalButton', 'public_key', 'gateway_id');
```
<a name="PayPalSavePaymentSourceWidget+load" id="PayPalSavePaymentSourceWidget+load" href="#PayPalSavePaymentSourceWidget+load">&nbsp;</a>

### payPalSavePaymentSourceWidget.load()
The final method after configuring the PayPalSavePaymentSource Widget to
start the load process.

**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  
<a name="PayPalSavePaymentSourceWidget+setEnv" id="PayPalSavePaymentSourceWidget+setEnv" href="#PayPalSavePaymentSourceWidget+setEnv">&nbsp;</a>

### payPalSavePaymentSourceWidget.setEnv(env, [alias])
Current method can change environment. By default environment = sandbox.
Also we can change domain alias for this environment. By default domain_alias = paydock.com

**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  

| Param | Type | Description |
| --- | --- | --- |
| env | <code>string</code> | sandbox, production |
| [alias] | <code>string</code> | Own domain alias |

**Example**  
```js
payPalSavePaymentSourceWidget.setEnv('production');
```
<a name="PayPalSavePaymentSourceWidget+onSuccess" id="PayPalSavePaymentSourceWidget+onSuccess" href="#PayPalSavePaymentSourceWidget+onSuccess">&nbsp;</a>

### payPalSavePaymentSourceWidget.onSuccess([callback])
If the setup token was successfully approved and a OTT was generated, the function passed as parameter will be called.
Important: Do not perform thread blocking operations in callback such as window.alert() calls.

**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  

| Param | Type | Description |
| --- | --- | --- |
| [callback] | [<code>OnSuccessCallback</code>](#OnSuccessCallback) | Function to be called when the result is successful. |

**Example**  
```js
payPalSavePaymentSourceWidget.onSuccess((eventData) => console.log('One time token and email obtained successfully'));
```
<a name="PayPalSavePaymentSourceWidget+onError" id="PayPalSavePaymentSourceWidget+onError" href="#PayPalSavePaymentSourceWidget+onError">&nbsp;</a>

### payPalSavePaymentSourceWidget.onError([callback])
If in the process for obtaining the setup token fails, the function passed as parameter will be called.
Important: Do not perform thread blocking operations in callback such as window.alert() calls.

**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  

| Param | Type | Description |
| --- | --- | --- |
| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |

**Example**  
```js
payPalSavePaymentSourceWidget.onError((eventData) => console.log('Some error occurred'));
```
<a name="PayPalSavePaymentSourceWidget+onCancel" id="PayPalSavePaymentSourceWidget+onCancel" href="#PayPalSavePaymentSourceWidget+onCancel">&nbsp;</a>

### payPalSavePaymentSourceWidget.onCancel([callback])
If in the process for obtaining the setup token was cancelled, the function passed as parameter will be called.
Important: Do not perform thread blocking operations in callback such as window.alert() calls.

**Kind**: instance method of [<code>PayPalSavePaymentSourceWidget</code>](#PayPalSavePaymentSourceWidget)  

| Param | Type | Description |
| --- | --- | --- |
| [callback] | [<code>OnCancelCallback</code>](#OnCancelCallback) | Function to be called when the operation is cancelled. |

**Example**  
```js
payPalSavePaymentSourceWidget.onCancel(() => console.log('Operation cancelled'));
```
<a name="OnSuccessCallback" id="OnSuccessCallback" href="#OnSuccessCallback">&nbsp;</a>

## OnSuccessCallback : <code>function</code>
Callback for onSuccess method.

**Kind**: global typedef  

| Param | Type |
| --- | --- |
| data | [<code>IOnSuccessEventData</code>](#IOnSuccessEventData) | 

<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>

## OnErrorCallback : <code>function</code>
Callback for onError method.

**Kind**: global typedef  

| Param | Type |
| --- | --- |
| data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) | 

<a name="OnCancelCallback" id="OnCancelCallback" href="#OnCancelCallback">&nbsp;</a>

## OnCancelCallback : <code>function</code>
Callback for onCancel method.

**Kind**: global typedef  

| Param | Type |
| --- | --- |
| data | [<code>IOnCancelEventData</code>](#IOnCancelEventData) |