@paydock/client-sdk 1.140.0-beta → 1.140.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -87
- package/bundles/index.cjs +1 -1
- package/bundles/index.mjs +1 -1
- package/bundles/widget.umd.js +1 -1
- package/bundles/widget.umd.min.js +1 -1
- package/docs/open-wallet-buttons-examples.md +57 -87
- package/package.json +1 -1
- package/slate.md +57 -87
package/README.md
CHANGED
|
@@ -5627,44 +5627,37 @@ button.setEnv('sandbox');
|
|
|
5627
5627
|
|
|
5628
5628
|
button.setEnv('sandbox');
|
|
5629
5629
|
|
|
5630
|
-
button.onUnavailable((data) => {
|
|
5630
|
+
button.onUnavailable(({ data }) => {
|
|
5631
5631
|
console.log("Apple Pay not available:", data);
|
|
5632
|
-
// Show alternative payment methods
|
|
5633
5632
|
});
|
|
5634
5633
|
|
|
5635
|
-
button.onClick((
|
|
5634
|
+
button.onClick(() => {
|
|
5636
5635
|
console.log("Apple Pay button clicked");
|
|
5637
|
-
// Perform pre-payment validation
|
|
5638
5636
|
});
|
|
5639
5637
|
|
|
5640
|
-
button.onSuccess((data) => {
|
|
5638
|
+
button.onSuccess(({ data }) => {
|
|
5641
5639
|
console.log("Payment successful:", data);
|
|
5642
|
-
// Process the OTT token on your backend
|
|
5643
5640
|
processPayment(data.token);
|
|
5644
5641
|
});
|
|
5645
5642
|
|
|
5646
|
-
button.onError((data) => {
|
|
5643
|
+
button.onError(({ data }) => {
|
|
5647
5644
|
console.error("Payment error:", data);
|
|
5648
|
-
// Handle error appropriately
|
|
5649
5645
|
});
|
|
5650
5646
|
|
|
5651
|
-
button.onCancel((
|
|
5647
|
+
button.onCancel(() => {
|
|
5652
5648
|
console.log("Payment cancelled");
|
|
5653
|
-
// Handle cancellation
|
|
5654
5649
|
});
|
|
5655
5650
|
|
|
5656
|
-
button.onShippingAddressChange(async (
|
|
5657
|
-
|
|
5658
|
-
const response = await updateShippingCosts(addressData);
|
|
5651
|
+
button.onShippingAddressChange(async ({ data }) => {
|
|
5652
|
+
const response = await updateShippingCosts(data);
|
|
5659
5653
|
return {
|
|
5660
5654
|
amount: response.newAmount,
|
|
5661
5655
|
shipping_options: response.shippingOptions
|
|
5662
5656
|
};
|
|
5663
5657
|
});
|
|
5664
5658
|
|
|
5665
|
-
button.onShippingOptionsChange(async (
|
|
5666
|
-
|
|
5667
|
-
const response = await updateTotal(optionData);
|
|
5659
|
+
button.onShippingOptionsChange(async ({ data }) => {
|
|
5660
|
+
const response = await updateTotal(data);
|
|
5668
5661
|
return {
|
|
5669
5662
|
amount: response.newAmount
|
|
5670
5663
|
};
|
|
@@ -5696,17 +5689,15 @@ button.setEnv('sandbox');
|
|
|
5696
5689
|
};
|
|
5697
5690
|
}
|
|
5698
5691
|
|
|
5699
|
-
async function updateTotal(
|
|
5700
|
-
// Your total calculation logic
|
|
5692
|
+
async function updateTotal(shippingOption) {
|
|
5701
5693
|
const baseAmount = 100;
|
|
5702
|
-
const shippingAmount =
|
|
5694
|
+
const shippingAmount = shippingOption.amount;
|
|
5703
5695
|
return {
|
|
5704
5696
|
newAmount: baseAmount + shippingAmount
|
|
5705
5697
|
};
|
|
5706
5698
|
}
|
|
5707
5699
|
|
|
5708
5700
|
function processPayment(ottToken) {
|
|
5709
|
-
// Send OTT token to your backend for payment processing
|
|
5710
5701
|
fetch('/api/process-payment', {
|
|
5711
5702
|
method: 'POST',
|
|
5712
5703
|
headers: { 'Content-Type': 'application/json' },
|
|
@@ -5759,21 +5750,19 @@ let button = new paydock.ApplePayOpenWalletButton(
|
|
|
5759
5750
|
button.load();
|
|
5760
5751
|
```
|
|
5761
5752
|
|
|
5762
|
-
When supporting shipping,
|
|
5753
|
+
When supporting shipping, registering `onShippingAddressChange` and `onShippingOptionsChange` handlers lets you recalculate totals and update shipping options dynamically. If no handler is registered (or the handler throws), the SDK auto-accepts with the current amount and options.
|
|
5763
5754
|
|
|
5764
5755
|
```javascript
|
|
5765
|
-
button.onShippingAddressChange(async function(data) {
|
|
5756
|
+
button.onShippingAddressChange(async function({ data }) {
|
|
5766
5757
|
console.log("Shipping address has been updated", data);
|
|
5767
|
-
// Call your backend to recalculate shipping
|
|
5768
5758
|
return {
|
|
5769
5759
|
amount: newAmount,
|
|
5770
5760
|
shipping_options: updatedShippingOptions
|
|
5771
5761
|
};
|
|
5772
5762
|
});
|
|
5773
5763
|
|
|
5774
|
-
button.onShippingOptionsChange(async function(data) {
|
|
5764
|
+
button.onShippingOptionsChange(async function({ data }) {
|
|
5775
5765
|
console.log("Shipping option selected", data);
|
|
5776
|
-
// Update total based on selected shipping option
|
|
5777
5766
|
return {
|
|
5778
5767
|
amount: newTotalAmount
|
|
5779
5768
|
};
|
|
@@ -6027,46 +6016,40 @@ The GooglePayOpenWalletButton constructor accepts the following parameters:
|
|
|
6027
6016
|
|
|
6028
6017
|
button.setEnv('sandbox');
|
|
6029
6018
|
|
|
6030
|
-
|
|
6031
|
-
button.onSuccess((data) => {
|
|
6019
|
+
button.onSuccess(({ data }) => {
|
|
6032
6020
|
console.log("Payment successful:", data);
|
|
6033
6021
|
processPayment(data.token);
|
|
6034
6022
|
});
|
|
6035
6023
|
|
|
6036
|
-
button.onShippingAddressChange(async (
|
|
6037
|
-
const response = await updateShippingCosts(
|
|
6024
|
+
button.onShippingAddressChange(async ({ data }) => {
|
|
6025
|
+
const response = await updateShippingCosts(data);
|
|
6038
6026
|
return {
|
|
6039
6027
|
amount: response.newAmount,
|
|
6040
6028
|
shipping_options: response.shippingOptions
|
|
6041
6029
|
};
|
|
6042
6030
|
});
|
|
6043
6031
|
|
|
6044
|
-
button.onShippingOptionsChange(async (
|
|
6045
|
-
const response = await updateTotal(
|
|
6032
|
+
button.onShippingOptionsChange(async ({ data }) => {
|
|
6033
|
+
const response = await updateTotal(data);
|
|
6046
6034
|
return {
|
|
6047
6035
|
amount: response.newAmount
|
|
6048
6036
|
};
|
|
6049
6037
|
});
|
|
6050
6038
|
|
|
6051
|
-
|
|
6052
|
-
button.onUnavailable((data) => {
|
|
6039
|
+
button.onUnavailable(({ data }) => {
|
|
6053
6040
|
console.log("Google Pay not available:", data);
|
|
6054
|
-
// Show alternative payment methods
|
|
6055
6041
|
});
|
|
6056
6042
|
|
|
6057
|
-
button.onError((data) => {
|
|
6043
|
+
button.onError(({ data }) => {
|
|
6058
6044
|
console.error("Payment error:", data);
|
|
6059
|
-
// Handle error appropriately
|
|
6060
6045
|
});
|
|
6061
6046
|
|
|
6062
|
-
button.onCancel((
|
|
6047
|
+
button.onCancel(() => {
|
|
6063
6048
|
console.log("Payment cancelled");
|
|
6064
|
-
// Handle cancellation
|
|
6065
6049
|
});
|
|
6066
6050
|
|
|
6067
|
-
button.onClick((
|
|
6051
|
+
button.onClick(() => {
|
|
6068
6052
|
console.log("Google Pay button clicked");
|
|
6069
|
-
// Perform pre-payment validation
|
|
6070
6053
|
});
|
|
6071
6054
|
|
|
6072
6055
|
button.load();
|
|
@@ -6097,9 +6080,9 @@ The GooglePayOpenWalletButton constructor accepts the following parameters:
|
|
|
6097
6080
|
};
|
|
6098
6081
|
}
|
|
6099
6082
|
|
|
6100
|
-
async function updateTotal(
|
|
6083
|
+
async function updateTotal(shippingOption) {
|
|
6101
6084
|
const baseAmount = 100;
|
|
6102
|
-
const shippingAmount =
|
|
6085
|
+
const shippingAmount = shippingOption.amount;
|
|
6103
6086
|
return {
|
|
6104
6087
|
newAmount: baseAmount + shippingAmount
|
|
6105
6088
|
};
|
|
@@ -6125,7 +6108,7 @@ Both `ApplePayOpenWalletButton` and `GooglePayOpenWalletButton` share the same e
|
|
|
6125
6108
|
If the customer's browser is not supported, or the customer does not have any card added to their wallet, the button will not load. In this case the callback onUnavailable() will be called. You can define the behavior of this function before loading the button.
|
|
6126
6109
|
|
|
6127
6110
|
```javascript
|
|
6128
|
-
button.onUnavailable((data) => console.log("No wallet button available", data));
|
|
6111
|
+
button.onUnavailable(({ data }) => console.log("No wallet button available", data));
|
|
6129
6112
|
```
|
|
6130
6113
|
|
|
6131
6114
|
### Service type validation
|
|
@@ -6141,7 +6124,7 @@ let button = new paydock.GooglePayOpenWalletButton(
|
|
|
6141
6124
|
meta
|
|
6142
6125
|
);
|
|
6143
6126
|
|
|
6144
|
-
button.onError((data) => {
|
|
6127
|
+
button.onError(({ data }) => {
|
|
6145
6128
|
// Error: Service configuration type 'ApplePay' does not match expected wallet type 'google'.
|
|
6146
6129
|
console.error(data.error.message);
|
|
6147
6130
|
});
|
|
@@ -6151,31 +6134,26 @@ button.load();
|
|
|
6151
6134
|
|
|
6152
6135
|
### Performing actions when the wallet button is clicked
|
|
6153
6136
|
|
|
6154
|
-
You can perform validations or actions when the user clicks on the wallet button. The callback supports both synchronous and asynchronous operations using
|
|
6137
|
+
You can perform validations or actions when the user clicks on the wallet button. The callback supports both synchronous and asynchronous operations using its return value: return `false` to abort, return a `Promise` to defer the wallet sheet, or throw an error to abort.
|
|
6155
6138
|
|
|
6156
6139
|
```javascript
|
|
6157
|
-
// Synchronous
|
|
6158
|
-
button.onClick((
|
|
6140
|
+
// Synchronous — continue normally
|
|
6141
|
+
button.onClick(() => {
|
|
6159
6142
|
console.log("Perform actions on button click");
|
|
6160
|
-
// Perform validation logic
|
|
6161
|
-
// Optionally use attachResult to control flow
|
|
6162
|
-
data.attachResult(true); // Continue with payment
|
|
6163
|
-
// data.attachResult(false); // Halt payment
|
|
6164
6143
|
});
|
|
6165
6144
|
|
|
6166
|
-
//
|
|
6167
|
-
button.onClick((
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
|
|
6174
|
-
|
|
6175
|
-
|
|
6176
|
-
|
|
6177
|
-
|
|
6178
|
-
);
|
|
6145
|
+
// Synchronous — return false to abort the payment flow
|
|
6146
|
+
button.onClick(() => {
|
|
6147
|
+
if (!isOrderValid()) return false;
|
|
6148
|
+
});
|
|
6149
|
+
|
|
6150
|
+
// Asynchronous — defer the wallet sheet until the promise resolves
|
|
6151
|
+
button.onClick(async () => {
|
|
6152
|
+
const response = await fetch('/api/validate-order');
|
|
6153
|
+
const result = await response.json();
|
|
6154
|
+
if (!result.valid) {
|
|
6155
|
+
throw new Error('Order validation failed');
|
|
6156
|
+
}
|
|
6179
6157
|
});
|
|
6180
6158
|
```
|
|
6181
6159
|
|
|
@@ -6184,13 +6162,12 @@ button.onClick((data) => {
|
|
|
6184
6162
|
When the One Time Token (OTT) is successfully created, the onSuccess callback will be called with the token data. **This callback is required** - if no handler is provided, an error will be thrown.
|
|
6185
6163
|
|
|
6186
6164
|
```javascript
|
|
6187
|
-
button.onSuccess((data) => {
|
|
6165
|
+
button.onSuccess(({ data }) => {
|
|
6188
6166
|
console.log("OTT created successfully:", data.token);
|
|
6189
6167
|
console.log("Amount:", data.amount);
|
|
6190
6168
|
console.log("Shipping:", data.shipping);
|
|
6191
6169
|
console.log("Billing:", data.billing);
|
|
6192
6170
|
|
|
6193
|
-
// Use the OTT token to complete payment on your backend
|
|
6194
6171
|
fetch('/api/process-payment', {
|
|
6195
6172
|
method: 'POST',
|
|
6196
6173
|
headers: { 'Content-Type': 'application/json' },
|
|
@@ -6218,11 +6195,10 @@ googlePayButton.setMeta({ ...meta, amount: 29.99, merchant_name: 'Updated Store'
|
|
|
6218
6195
|
Register a callback function to handle errors that occur during wallet operations, including service type mismatches.
|
|
6219
6196
|
|
|
6220
6197
|
```javascript
|
|
6221
|
-
button.onError((data) => {
|
|
6198
|
+
button.onError(({ data }) => {
|
|
6222
6199
|
console.error("Open Wallet error:", data.error);
|
|
6223
6200
|
console.log("Error context:", data.context);
|
|
6224
6201
|
|
|
6225
|
-
// Show user-friendly error message
|
|
6226
6202
|
showErrorMessage("Payment initialization failed. Please try again.");
|
|
6227
6203
|
});
|
|
6228
6204
|
```
|
|
@@ -6232,10 +6208,8 @@ button.onError((data) => {
|
|
|
6232
6208
|
When the user cancels or closes the wallet payment interface, you can perform cleanup operations.
|
|
6233
6209
|
|
|
6234
6210
|
```javascript
|
|
6235
|
-
button.onCancel((
|
|
6236
|
-
console.log("Wallet checkout cancelled"
|
|
6237
|
-
|
|
6238
|
-
// Perform cleanup or redirect user
|
|
6211
|
+
button.onCancel(() => {
|
|
6212
|
+
console.log("Wallet checkout cancelled");
|
|
6239
6213
|
window.location.href = '/checkout';
|
|
6240
6214
|
});
|
|
6241
6215
|
```
|
|
@@ -6252,22 +6226,24 @@ button.destroy();
|
|
|
6252
6226
|
The above events can be used in a more generic way via the `eventEmitter.subscribe` method internally, but the recommended approach is to use the dedicated event handler methods provided by the button classes.
|
|
6253
6227
|
|
|
6254
6228
|
**Available Event Handler Methods:**
|
|
6255
|
-
- `onClick(handler)` - Button click events (
|
|
6229
|
+
- `onClick(handler)` - Button click events (return `false` to abort, `Promise` to defer)
|
|
6256
6230
|
- `onSuccess(handler)` - **Required** - OTT creation success events
|
|
6257
6231
|
- `onUnavailable(handler)` - Wallet unavailable events (supports Promise pattern)
|
|
6258
6232
|
- `onError(handler)` - Error events (supports Promise pattern)
|
|
6259
6233
|
- `onCancel(handler)` - Checkout cancellation events (supports Promise pattern)
|
|
6260
6234
|
- `onLoaded(handler)` - Button loaded/rendered events
|
|
6261
|
-
- `onShippingAddressChange(handler)` - **
|
|
6262
|
-
- `onShippingOptionsChange(handler)` - **
|
|
6235
|
+
- `onShippingAddressChange(handler)` - **Recommended for shipping** - Address change events (auto-accepted if not registered)
|
|
6236
|
+
- `onShippingOptionsChange(handler)` - **Recommended for shipping options** - Option change events (auto-accepted if not registered)
|
|
6263
6237
|
|
|
6264
6238
|
**Event Handler Patterns:**
|
|
6265
6239
|
|
|
6266
6240
|
```javascript
|
|
6267
|
-
// Required
|
|
6241
|
+
// Required handler
|
|
6268
6242
|
button.onSuccess(handler); // Always required
|
|
6269
|
-
|
|
6270
|
-
|
|
6243
|
+
|
|
6244
|
+
// Recommended when shipping is enabled (auto-accepted if not registered)
|
|
6245
|
+
button.onShippingAddressChange(handler);
|
|
6246
|
+
button.onShippingOptionsChange(handler);
|
|
6271
6247
|
|
|
6272
6248
|
// Optional handlers with Promise support
|
|
6273
6249
|
button.onUnavailable(handler); // or await button.onUnavailable()
|
|
@@ -6275,7 +6251,7 @@ button.onError(handler); // or await button.onError()
|
|
|
6275
6251
|
button.onCancel(handler); // or await button.onCancel()
|
|
6276
6252
|
|
|
6277
6253
|
// Click handler with flow control
|
|
6278
|
-
button.onClick(handler); //
|
|
6254
|
+
button.onClick(handler); // Return false to abort, or a Promise to defer
|
|
6279
6255
|
|
|
6280
6256
|
// Loaded handler
|
|
6281
6257
|
button.onLoaded(handler); // Notified when button renders
|
|
@@ -6363,20 +6339,14 @@ button.load();
|
|
|
6363
6339
|
|
|
6364
6340
|
### Error Handling Best Practices
|
|
6365
6341
|
```javascript
|
|
6366
|
-
button.onError(function(data) {
|
|
6342
|
+
button.onError(function({ data }) {
|
|
6367
6343
|
console.error('Full error object:', data);
|
|
6368
6344
|
|
|
6369
|
-
|
|
6370
|
-
const errorMessage = data.error?.message ||
|
|
6371
|
-
data.message ||
|
|
6372
|
-
'Unknown error occurred';
|
|
6345
|
+
const errorMessage = data.error?.message || 'Unknown error occurred';
|
|
6373
6346
|
|
|
6374
|
-
// Handle different error types
|
|
6375
6347
|
if (data.context?.operation === 'wallet_operation') {
|
|
6376
|
-
// Handle wallet-specific errors
|
|
6377
6348
|
showWalletError(errorMessage);
|
|
6378
6349
|
} else {
|
|
6379
|
-
// Handle general errors
|
|
6380
6350
|
showGeneralError(errorMessage);
|
|
6381
6351
|
}
|
|
6382
6352
|
});
|
package/bundles/index.cjs
CHANGED
|
@@ -1194,7 +1194,7 @@ SDK.headerKeys = Object.freeze({
|
|
|
1194
1194
|
version: 'x-sdk-version',
|
|
1195
1195
|
type: 'x-sdk-type'
|
|
1196
1196
|
});
|
|
1197
|
-
SDK._version = 'v1.140.
|
|
1197
|
+
SDK._version = 'v1.140.1';
|
|
1198
1198
|
|
|
1199
1199
|
function isFunction(value) {
|
|
1200
1200
|
return typeof value === 'function';
|
package/bundles/index.mjs
CHANGED
|
@@ -1192,7 +1192,7 @@ SDK.headerKeys = Object.freeze({
|
|
|
1192
1192
|
version: 'x-sdk-version',
|
|
1193
1193
|
type: 'x-sdk-type'
|
|
1194
1194
|
});
|
|
1195
|
-
SDK._version = 'v1.140.
|
|
1195
|
+
SDK._version = 'v1.140.1';
|
|
1196
1196
|
|
|
1197
1197
|
function isFunction(value) {
|
|
1198
1198
|
return typeof value === 'function';
|
package/bundles/widget.umd.js
CHANGED