@paydock/client-sdk
Version:
Paydock client sdk
64 lines (55 loc) • 2.11 kB
Markdown
## PayPalSavePaymentSource Widget
PayPalSavePaymentSource Widget allows to obtain a Paydock one time token linked with a Paypal payment source from the customer.
The general flow to use the widgets is:
1. Configure your PayPal gateway and connect it using Paydock API or Dashboard.
2. Create a container in your site
```html
<div id="widget"></div>
```
3. Initialize the specific `PayPalSavePaymentSourceWidget`, providing your Access token or Public Key, the Gateway ID that Paydock provides plus required and optional config parameter for the widget in use. The general format is:
```js
new paydock.PayPalSavePaymentSourceWidget(
"#widget",
accessTokenOrPublicKey,
gatewayId,
widgetSpecificConfig,
);
```
4. Handle the `onSuccess`, `onError` and `onCancel` for paypal setup token results.
5. If `onSuccess` event is emmited, event data should contain `token` and `email` ready to use.
### Example
A full description of the config parameters for [PayPalSavePaymentSourceWidget](#PayPalSavePaymentSourceWidget) meta parameters can be found [here](#PayPalSavePaymentSourceWidgetConfig). Below you will find a fully working html example.
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Using PayDock PayPalSavePaymentSourceWidget!</h2>
<div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
let button = new paydock.PayPalSavePaymentSourceWidget(
"#widget",
accessTokenOrPublicKey,
gatewayId,
{
style: {
layout: 'vertical',
color: 'gold',
shape: 'pill',
label: 'paypal'
}
}
);
payPalSavePaymentSourceWidget.onSuccess((data) => console.log('On success: ', data));
payPalSavePaymentSourceWidget.onError((data) => console.log('On error: ', data));
payPalSavePaymentSourceWidget.onCancel(() => console.log('On cancelled'));
button.setEnv('sandbox');
button.load();
</script>
</html>
```