@paydock/client-sdk
Version:
Paydock client sdk
202 lines (173 loc) • 6.9 kB
Markdown
## Express Wallet Buttons
Express Wallet Buttons allow to integrate with E-Wallets in an "express" operational mode, allowing to show the respective button in product or cart pages.
The general flow to use the widgets is:
1. Configure your 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 WalletButtonExpress, providing your Access Token (preferred) or Public Key, plus required and optional meta parameters for the wallet in use. The general format is:
```js
new paydock.{Provider}WalletButtonExpress(
"#widget",
accessTokenOrPublicKey,
gatewayId,
gatewaySpecificMeta,
);
```
4. (optional) If the screen where the button is rendered allows for cart/amount changes, call `setMeta` method to update the meta information.
5. Handle the `onClick` callback, where you should call your server, initialize the wallet charge via `POST v1/charges/wallet` and return the wallet token.
6. Handle the `onPaymentSuccessful`, `onPaymentError` and `onPaymentInReview` (if fraud is applicable) for payment results.
### Supported Providers
1. [Apple Pay](#apple-pay-wallet-button-express)
2. [Paypal](#paypal-wallet-button-express)
### Apple Pay Wallet Button Express
A full description of the meta parameters for [ApplePayWalletButtonExpress](#ApplePayWalletButtonExpress) meta parameters can be found [here](#ApplePayWalletMeta). Below you will find a fully working html example.
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Payment using PayDock ApplePayWalletButtonExpress!</h2>
<div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
let button = new paydock.ApplePayWalletButtonExpress(
"#widget",
accessTokenOrPublicKey,
gatewayId,
{
amount_label: 'TOTAL',
country: 'AU',
currency: 'AUD',
amount: 15.5,
// merchant_capabilities: ['supports3DS', 'supportsEMV', 'supportsCredit', 'supportsDebit'],
// supported_networks: ['visa', 'masterCard', 'amex', 'chinaUnionPay', 'discover', 'interac', 'jcb', 'privateLabel'],
// required_billing_contact_fields: ['email', 'name', 'phone', 'postalAddress'], // phone and email do not work according to relevant testing
// required_shipping_contact_fields: ['email', 'phone'], // Workaround to pull phone and email from shipping contact instead - does not require additional shipping address information
// supported_countries: ["AU"],
// style: {
// button_type: "buy",
// button_style: "black",
// },
}
);
button.setEnv('sandbox');
button.onUnavailable(function() {
console.log("Button not available");
});
button.onError(function(error) {
console.log("On Error Callback", error);
});
button.onPaymentSuccessful(function(data) {
console.log("Payment successful");
console.log(data);
});
button.onPaymentError(function(err) {
console.log("Payment error");
console.log(err);
});
button.onPaymentInReview(function(data) {
console.log("The payment is on fraud review");
console.log(data);
});
button.onClick(async (data) => {
console.log("Button clicked", data);
const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
const parsedData = await responseData.json();
return parsedData.resource.data.token;
});
button.onCheckoutClose(() => {
console.log("Checkout closed");
});
button.load();
</script>
</html>
```
### Paypal Wallet Button Express
A full description of the meta parameters for [PaypalWalletButtonExpress](#PaypalWalletButtonExpress) meta parameters can be found [here](#PaypalWalletMeta). Below you will find a fully working html example.
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Payment using PayDock PaypalWalletButtonExpress!</h2>
<div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
let button = new paydock.PaypalWalletButtonExpress(
"#widget",
accessTokenOrPublicKey,
gatewayId,
{
amount: 15.5,
currency: 'AUD',
pay_later: false,
standalone: false,
capture: true,
// style: {
// layout: 'horizontal', // or 'vertical'
// color: 'gold', // or 'blue', 'silver', 'black', 'white'
// shape: 'rect', // or 'pill', 'sharp'
// borderRadius: 5,
// height: 40,
// disableMaxWidth: false,
// label: 'paypal', // or 'checkout', 'buynow', 'pay', 'installment'
// tagline: true,
// messages: {
// layout: 'text', // or 'flex'
// logo: {
// type: 'primary', // or 'alternative', 'inline', 'none'
// position: 'left', // or 'right', 'top'
// },
// text: {
// color: 'black', // or 'white', 'monochrome', 'grayscale'
// size: 10, // or 11, 12, 13, 14, 15, 16
// align: 'left', // or 'center', 'right'
// },
// color: 'blue', // or 'black', 'white', 'white-no-border', 'gray', 'monochrome', 'grayscale'
// ratio: '1x1', // or '1x4', '8x1', '20x1'
// },
// }
}
);
button.setEnv('sandbox');
button.onUnavailable(function() {
console.log("Button not available");
});
button.onError(function(error) {
console.log("On Error Callback", error);
});
button.onPaymentSuccessful(function(data) {
console.log("Payment successful");
console.log(data);
});
button.onPaymentError(function(err) {
console.log("Payment error");
console.log(err);
});
button.onPaymentInReview(function(data) {
console.log("The payment is on fraud review");
console.log(data);
});
button.onClick(async (data) => {
console.log("Button clicked", data);
const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
const parsedData = await responseData.json();
return parsedData.resource.data.token;
});
button.onCheckoutClose(() => {
console.log("Checkout closed");
});
button.load();
</script>
</html>
```