@paydock/client-sdk 1.103.1 → 1.103.24-beta
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 +245 -199
- package/bundles/widget.umd.js +144 -214
- package/bundles/widget.umd.min.js +1 -1
- package/lib/api/api-service-internal.d.ts +2 -1
- package/lib/api/api-service-internal.js +1 -0
- package/lib/api/api-service-internal.js.map +1 -1
- package/lib/components/iframe-event.d.ts +2 -0
- package/lib/components/iframe-event.js +2 -0
- package/lib/components/iframe-event.js.map +1 -1
- package/lib/components/link.d.ts +3 -2
- package/lib/components/link.js +1 -0
- package/lib/components/link.js.map +1 -1
- package/lib/components/param.d.ts +2 -2
- package/lib/components/param.js.map +1 -1
- package/lib/configs/env/env.d.ts +3 -0
- package/lib/configs/env/env.js +9 -0
- package/lib/configs/env/env.js.map +1 -1
- package/lib/configs/sdk.js +1 -1
- package/lib/secure-remote-commerce/index.d.ts +102 -1
- package/lib/secure-remote-commerce/index.js +102 -1
- package/lib/secure-remote-commerce/index.js.map +1 -1
- package/lib/secure-remote-commerce/interfaces.d.ts +109 -32
- package/lib/secure-remote-commerce/interfaces.js +31 -11
- package/lib/secure-remote-commerce/interfaces.js.map +1 -1
- package/lib/secure-remote-commerce/mastercard-secure-remote-commerce.d.ts +30 -0
- package/lib/secure-remote-commerce/mastercard-secure-remote-commerce.js +39 -0
- package/lib/secure-remote-commerce/mastercard-secure-remote-commerce.js.map +1 -0
- package/lib/secure-remote-commerce/providers/mastercard-src/index.d.ts +1 -0
- package/lib/secure-remote-commerce/providers/mastercard-src/index.js +2 -0
- package/lib/secure-remote-commerce/providers/mastercard-src/index.js.map +1 -0
- package/lib/secure-remote-commerce/providers/{visa-src/visa-src.d.ts → mastercard-src/mastercard-src.d.ts} +4 -7
- package/lib/secure-remote-commerce/providers/mastercard-src/mastercard-src.js +88 -0
- package/lib/secure-remote-commerce/providers/mastercard-src/mastercard-src.js.map +1 -0
- package/lib/secure-remote-commerce/secure-remote-commerce.d.ts +13 -91
- package/lib/secure-remote-commerce/secure-remote-commerce.js +15 -98
- package/lib/secure-remote-commerce/secure-remote-commerce.js.map +1 -1
- package/lib/wallet-buttons/flypay-v2.wallet-service.js +1 -1
- package/lib/wallet-buttons/flypay-v2.wallet-service.js.map +1 -1
- package/package.json +1 -1
- package/slate.md +59 -84
- package/lib/secure-remote-commerce/providers/visa-src/helper.d.ts +0 -7
- package/lib/secure-remote-commerce/providers/visa-src/helper.js +0 -36
- package/lib/secure-remote-commerce/providers/visa-src/helper.js.map +0 -1
- package/lib/secure-remote-commerce/providers/visa-src/index.d.ts +0 -1
- package/lib/secure-remote-commerce/providers/visa-src/index.js +0 -2
- package/lib/secure-remote-commerce/providers/visa-src/index.js.map +0 -1
- package/lib/secure-remote-commerce/providers/visa-src/visa-src.js +0 -113
- package/lib/secure-remote-commerce/providers/visa-src/visa-src.js.map +0 -1
- package/lib/secure-remote-commerce/providers/visa-src/visa-src.styles.d.ts +0 -8
- package/lib/secure-remote-commerce/providers/visa-src/visa-src.styles.js +0 -10
- package/lib/secure-remote-commerce/providers/visa-src/visa-src.styles.js.map +0 -1
package/package.json
CHANGED
package/slate.md
CHANGED
|
@@ -1638,26 +1638,22 @@ Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpeci
|
|
|
1638
1638
|
## Secure Remote Commerce
|
|
1639
1639
|
You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
|
|
1640
1640
|
|
|
1641
|
-
This widget provides you with the ability to easily integrate with
|
|
1641
|
+
This widget provides you with the ability to easily integrate with Mastercard SRC.
|
|
1642
1642
|
|
|
1643
1643
|
## SRC simple example
|
|
1644
1644
|
|
|
1645
1645
|
### Container
|
|
1646
|
+
To integrate the SRC checkout iFrame you first need to create a container within your HTML code. This container will serve as the placeholder for the iFrame.
|
|
1646
1647
|
|
|
1647
1648
|
```html
|
|
1648
|
-
<div id="checkoutButton"></div>
|
|
1649
1649
|
<div id="checkoutIframe"></div>
|
|
1650
1650
|
```
|
|
1651
1651
|
|
|
1652
|
-
You must create a container for the initial checkout button, and a different one for the checkout iFrame. Inside the first tag the button will be initialized, and inside the second one the iFrame will be loaded once the button is clicked.
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
1652
|
### Initialization
|
|
1656
1653
|
```javascript
|
|
1657
|
-
var src = new paydock.
|
|
1658
|
-
"#checkoutButton",
|
|
1654
|
+
var src = new paydock.MastercardSRCClickToPay(
|
|
1659
1655
|
"#checkoutIframe",
|
|
1660
|
-
"
|
|
1656
|
+
"service_id",
|
|
1661
1657
|
"paydock_public_key_or_access_token",
|
|
1662
1658
|
{}, // meta
|
|
1663
1659
|
);
|
|
@@ -1667,19 +1663,18 @@ src.load();
|
|
|
1667
1663
|
```javascript--es2015
|
|
1668
1664
|
// ES2015 | TypeScript
|
|
1669
1665
|
|
|
1670
|
-
import {
|
|
1666
|
+
import { MastercardSRCClickToPay } from '@paydock/client-sdk';
|
|
1671
1667
|
|
|
1672
|
-
var src = new
|
|
1673
|
-
"#checkoutButton",
|
|
1668
|
+
var src = new MastercardSRCClickToPay(
|
|
1674
1669
|
"#checkoutIframe",
|
|
1675
|
-
"
|
|
1670
|
+
"service_id",
|
|
1676
1671
|
"paydock_public_key_or_access_token",
|
|
1677
1672
|
{}, // meta
|
|
1678
1673
|
);
|
|
1679
1674
|
src.load();
|
|
1680
1675
|
```
|
|
1681
1676
|
|
|
1682
|
-
*NOTE:* it's highly recommended to use a Paydock Access Token instead of the public key for security reasons. When creating it, you will need to enable the `Secure Remote Commerce` and add a
|
|
1677
|
+
*NOTE:* it's highly recommended to use a Paydock Access Token instead of the public key for security reasons in production environments. When creating it, you will need to enable the `Secure Remote Commerce` and add a whitelist for the domain of your checkout screen.
|
|
1683
1678
|
|
|
1684
1679
|
### Full example
|
|
1685
1680
|
|
|
@@ -1692,14 +1687,12 @@ src.load();
|
|
|
1692
1687
|
<style>iframe {border: 0;width: 40%;height: 300px;}</style>
|
|
1693
1688
|
</head>
|
|
1694
1689
|
<body>
|
|
1695
|
-
<div id="checkoutButton"></div>
|
|
1696
1690
|
<div id="checkoutIframe"></div>
|
|
1697
1691
|
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
|
|
1698
1692
|
<script>
|
|
1699
|
-
var src = new paydock.
|
|
1700
|
-
"#checkoutButton",
|
|
1693
|
+
var src = new paydock.MastercardSRCClickToPay(
|
|
1701
1694
|
"#checkoutIframe",
|
|
1702
|
-
"
|
|
1695
|
+
"service_id",
|
|
1703
1696
|
"paydock_public_key_or_access_token",
|
|
1704
1697
|
{},
|
|
1705
1698
|
);
|
|
@@ -1715,25 +1708,12 @@ src.load();
|
|
|
1715
1708
|
### Settings
|
|
1716
1709
|
|
|
1717
1710
|
```javascript
|
|
1718
|
-
|
|
1719
|
-
src.setEnv('sandbox'); // set enviroment
|
|
1720
|
-
|
|
1721
|
-
src.hideButton(); // hide button
|
|
1722
|
-
|
|
1723
|
-
src.showButton(); // show button
|
|
1711
|
+
src.setEnv('sandbox'); // set environment
|
|
1724
1712
|
|
|
1725
1713
|
src.hideCheckout(); // hide checkout iframe
|
|
1726
1714
|
|
|
1727
1715
|
src.showCheckout(); // show checkout iframe
|
|
1728
1716
|
|
|
1729
|
-
src.on('checkoutButtonLoaded', () => {
|
|
1730
|
-
console.log("Button loaded");
|
|
1731
|
-
});
|
|
1732
|
-
|
|
1733
|
-
src.on('checkoutButtonClicked', () => {
|
|
1734
|
-
console.log("Button clicked");
|
|
1735
|
-
});
|
|
1736
|
-
|
|
1737
1717
|
src.on('iframeLoaded', () => {
|
|
1738
1718
|
console.log("Initial iframe loaded");
|
|
1739
1719
|
});
|
|
@@ -1764,18 +1744,20 @@ Here you can see how you can use this methods to customize your checkout experie
|
|
|
1764
1744
|
<style>iframe {border: 0;width: 40%;height: 450px;}</style>
|
|
1765
1745
|
</head>
|
|
1766
1746
|
<body>
|
|
1767
|
-
<div id="checkoutButton"></div>
|
|
1768
1747
|
<div id="checkoutIframe"></div>
|
|
1769
1748
|
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
|
|
1770
1749
|
<script>
|
|
1771
|
-
var src = new paydock.
|
|
1772
|
-
"#checkoutButton",
|
|
1750
|
+
var src = new paydock.MastercardSRCClickToPay(
|
|
1773
1751
|
"#checkoutIframe",
|
|
1774
|
-
"
|
|
1752
|
+
"service_id",
|
|
1775
1753
|
"paydock_public_key_or_access_token",
|
|
1776
1754
|
{},
|
|
1777
1755
|
);
|
|
1778
1756
|
|
|
1757
|
+
src.on('iframeLoaded', () => {
|
|
1758
|
+
console.log("Initial iframe loaded");
|
|
1759
|
+
});
|
|
1760
|
+
|
|
1779
1761
|
src.on('checkoutReady', () => {
|
|
1780
1762
|
console.log("Checkout ready to be used");
|
|
1781
1763
|
});
|
|
@@ -1783,34 +1765,37 @@ Here you can see how you can use this methods to customize your checkout experie
|
|
|
1783
1765
|
src.on('checkoutCompleted', (token) => {
|
|
1784
1766
|
console.log(token);
|
|
1785
1767
|
});
|
|
1768
|
+
|
|
1769
|
+
src.on('checkoutError', (error) => {
|
|
1770
|
+
console.log(error);
|
|
1771
|
+
});
|
|
1772
|
+
|
|
1786
1773
|
src.load();
|
|
1787
1774
|
</script>
|
|
1788
1775
|
</body>
|
|
1789
1776
|
</html>
|
|
1790
1777
|
```
|
|
1791
1778
|
|
|
1792
|
-
## Customization options for address fields
|
|
1793
|
-
### Shipping address:
|
|
1779
|
+
## Customization options for billing address fields
|
|
1794
1780
|
|
|
1795
|
-
To customize
|
|
1781
|
+
To customize billing address experience we use a flag that manages how MastercardSRC requires or not billing address to the customer. Options are NONE (default option), POSTAL_COUNTRY or FULL.
|
|
1796
1782
|
|
|
1797
1783
|
```
|
|
1798
|
-
var src = new paydock.
|
|
1799
|
-
"#checkoutButton",
|
|
1784
|
+
var src = new paydock.MastercardSRCClickToPay(
|
|
1800
1785
|
"#checkoutIframe",
|
|
1801
|
-
"
|
|
1786
|
+
"service_id",
|
|
1802
1787
|
"paydock_public_key_or_access_token",
|
|
1803
1788
|
{
|
|
1804
1789
|
"dpa_transaction_options": {
|
|
1805
|
-
"
|
|
1790
|
+
"dpa_billing_preference": "FULL"
|
|
1806
1791
|
}
|
|
1807
1792
|
},
|
|
1808
1793
|
);
|
|
1809
1794
|
```
|
|
1810
1795
|
|
|
1811
|
-
With this the
|
|
1796
|
+
With this the SRC checkout will require the billing address from consumer and be returned as part of the checkout data. These information will be stored and leveraged in the Paydock charge as well.
|
|
1812
1797
|
|
|
1813
|
-
Another option is at time of creating the charge. Say that you have a different way of collecting the
|
|
1798
|
+
Another option is to provide it at the time of creating the charge. Say that you have a different way of collecting the billing address (outside SRC checkout), you can then disable the shipping address on our SRC widget and send it when creating the charge after getting the One Time Token out of the SRC widget, alongside other details that may have been collected outside the SRC checkout as the shipping address.
|
|
1814
1799
|
|
|
1815
1800
|
```
|
|
1816
1801
|
POST v1/charges
|
|
@@ -1818,10 +1803,16 @@ POST v1/charges
|
|
|
1818
1803
|
{
|
|
1819
1804
|
"amount": "10.00",
|
|
1820
1805
|
"currency": "AUD",
|
|
1821
|
-
"token": "
|
|
1806
|
+
"token": "one_time_token",
|
|
1822
1807
|
"customer": {
|
|
1823
1808
|
"payment_source": {
|
|
1824
|
-
"gateway_id": "gateway_id"
|
|
1809
|
+
"gateway_id": "gateway_id",
|
|
1810
|
+
"address_line1": "address_line1",
|
|
1811
|
+
"address_line2": "address_line2",
|
|
1812
|
+
"address_city": "address_city",
|
|
1813
|
+
"address_postcode": "address_postcode",
|
|
1814
|
+
"address_state": "address_state",
|
|
1815
|
+
"address_country": "address_country"
|
|
1825
1816
|
}
|
|
1826
1817
|
},
|
|
1827
1818
|
"shipping": {
|
|
@@ -1836,60 +1827,44 @@ POST v1/charges
|
|
|
1836
1827
|
}
|
|
1837
1828
|
```
|
|
1838
1829
|
|
|
1839
|
-
|
|
1830
|
+
## Customization options for accepted cards
|
|
1840
1831
|
|
|
1841
|
-
|
|
1832
|
+
To improve the experience in the use of the widget, it is allowed to send a flag `unaccepted_card_type` to block the usage of an specific card type. The available options are 'DEBIT' and 'CREDIT'.
|
|
1833
|
+
|
|
1834
|
+
### Example code
|
|
1842
1835
|
|
|
1843
1836
|
```
|
|
1844
|
-
var src = new paydock.
|
|
1845
|
-
"#checkoutButton",
|
|
1837
|
+
var src = new paydock.MastercardSRCClickToPay(
|
|
1846
1838
|
"#checkoutIframe",
|
|
1847
|
-
"
|
|
1848
|
-
"
|
|
1839
|
+
"service_id",
|
|
1840
|
+
"paydock_public_key",
|
|
1849
1841
|
{
|
|
1850
|
-
|
|
1851
|
-
"email": "test@email.com",
|
|
1852
|
-
"first_name": "Name",
|
|
1853
|
-
"last_name": "Surname",
|
|
1854
|
-
"phone": {
|
|
1855
|
-
"country_code": "1",
|
|
1856
|
-
"phone": "2124567890"
|
|
1857
|
-
},
|
|
1858
|
-
"payment_source": {
|
|
1859
|
-
"address_line1": "Line 1",
|
|
1860
|
-
"address_line2": "Line 2",
|
|
1861
|
-
"address_city": "Miami",
|
|
1862
|
-
"address_postcode": "33126",
|
|
1863
|
-
"address_state": "FL",
|
|
1864
|
-
"address_country": "US"
|
|
1865
|
-
}
|
|
1866
|
-
}
|
|
1842
|
+
unaccepted_card_type: 'DEBIT'
|
|
1867
1843
|
},
|
|
1868
1844
|
);
|
|
1845
|
+
|
|
1869
1846
|
```
|
|
1870
1847
|
|
|
1871
|
-
## Personalization
|
|
1848
|
+
## Styling Personalization
|
|
1872
1849
|
|
|
1873
|
-
To improve the experience in the use of the widget, it is allowed to send props that customize the UI.
|
|
1850
|
+
To improve the experience in the use of the widget, it is allowed to send props that customize the UI look and feel.
|
|
1874
1851
|
|
|
1875
1852
|
### Example code
|
|
1876
1853
|
|
|
1877
1854
|
```
|
|
1878
|
-
var src = new paydock.
|
|
1879
|
-
"#checkoutButton",
|
|
1855
|
+
var src = new paydock.MastercardSRCClickToPay(
|
|
1880
1856
|
"#checkoutIframe",
|
|
1881
|
-
"
|
|
1857
|
+
"service_id",
|
|
1882
1858
|
"paydock_public_key",
|
|
1859
|
+
{},
|
|
1883
1860
|
);
|
|
1884
1861
|
|
|
1885
|
-
|
|
1886
|
-
|
|
1862
|
+
src.setStyles({
|
|
1863
|
+
enable_src_popup: true,
|
|
1864
|
+
primary_button_color: 'red',
|
|
1865
|
+
secondary_button_color: 'red',
|
|
1866
|
+
primary_button_text_color: 'red',
|
|
1867
|
+
secondary_button_text_color: 'red',
|
|
1868
|
+
font_family: 'Arial',
|
|
1869
|
+
});
|
|
1887
1870
|
```
|
|
1888
|
-
## Event and Values
|
|
1889
|
-
|
|
1890
|
-
| Event Value | Type | Description |
|
|
1891
|
-
| ------------------- | ------------------- | -------------------------------------------------------------- |
|
|
1892
|
-
| primary_color | <code>string</code> | HEX color for the principal buttons, example : #32a852 |
|
|
1893
|
-
| button_text_color | <code>string</code> | HEX color for the text of the buttons, example : #32a852|
|
|
1894
|
-
| font_family | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)|
|
|
1895
|
-
| card_schemes | <code>[string] - array of string</code> | Possible values "visa", "mastercard", "amex" and "discover" - Default show all logos
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
export const CARD_SCHEME = {
|
|
2
|
-
VISA: 'visa',
|
|
3
|
-
MASTERCARD: 'mastercard',
|
|
4
|
-
AMEX: 'amex',
|
|
5
|
-
DISCOVER: 'discover',
|
|
6
|
-
};
|
|
7
|
-
const CHEVRON_VMAD_IMG_PATH = '/images/visa-src/Chevron_Large_VMAD.png';
|
|
8
|
-
const CHEVRON_VMA_IMG_PATH = '/images/visa-src/Chevron_Large_VMA.png';
|
|
9
|
-
const CHEVRON_VM_IMG_PATH = '/images/visa-src/Chevron_Large_VM.png';
|
|
10
|
-
const CHEVRON_M_IMG_PATH = '/images/visa-src/Chevron_Large_M.png';
|
|
11
|
-
const CHEVRON_D_IMG_PATH = '/images/visa-src/Chevron_Large_D.png';
|
|
12
|
-
const CHEVRON_V_IMG_PATH = '/images/visa-src/Chevron_Large_V.png';
|
|
13
|
-
const VMAD_IMG_PATH = '/images/visa-src/vmad.svg';
|
|
14
|
-
const VMA_IMG_PATH = '/images/visa-src/logos/Networks_Large_VMA.png';
|
|
15
|
-
const VM_IMG_PATH = '/images/visa-src/logos/Networks_Large_VM.png';
|
|
16
|
-
const M_IMG_PATH = '/images/visa-src/logos/master-logo.png';
|
|
17
|
-
const D_IMG_PATH = '/images/visa-src/logos/Networks_Large_D.png';
|
|
18
|
-
const V_IMG_PATH = '/images/visa-src/logos/visa-logo.png';
|
|
19
|
-
export const GenerateCardSchemesLogo = (card_scheme, chevron = false) => {
|
|
20
|
-
if (!card_scheme || !Array.isArray(card_scheme))
|
|
21
|
-
return chevron ? CHEVRON_VMAD_IMG_PATH : VMAD_IMG_PATH;
|
|
22
|
-
const card_scheme_sort = card_scheme.sort();
|
|
23
|
-
if (includeArray([CARD_SCHEME.AMEX, CARD_SCHEME.MASTERCARD, CARD_SCHEME.VISA], card_scheme_sort))
|
|
24
|
-
return chevron ? CHEVRON_VMA_IMG_PATH : VMA_IMG_PATH;
|
|
25
|
-
if (includeArray([CARD_SCHEME.MASTERCARD, CARD_SCHEME.VISA], card_scheme_sort))
|
|
26
|
-
return chevron ? CHEVRON_VM_IMG_PATH : VM_IMG_PATH;
|
|
27
|
-
if (includeArray([CARD_SCHEME.MASTERCARD], card_scheme_sort))
|
|
28
|
-
return chevron ? CHEVRON_M_IMG_PATH : M_IMG_PATH;
|
|
29
|
-
if (includeArray([CARD_SCHEME.DISCOVER], card_scheme_sort))
|
|
30
|
-
return chevron ? CHEVRON_D_IMG_PATH : D_IMG_PATH;
|
|
31
|
-
if (includeArray([CARD_SCHEME.VISA], card_scheme_sort))
|
|
32
|
-
return chevron ? CHEVRON_V_IMG_PATH : V_IMG_PATH;
|
|
33
|
-
return chevron ? CHEVRON_V_IMG_PATH : VMAD_IMG_PATH;
|
|
34
|
-
};
|
|
35
|
-
const includeArray = (condition, card_scheme) => condition.every((card, index) => card === card_scheme[index]);
|
|
36
|
-
//# sourceMappingURL=../../../../src/lib/secure-remote-commerce/providers/visa-src/helper.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../../secure-remote-commerce/providers/visa-src/helper.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;CACvB,CAAC;AAEF,MAAM,qBAAqB,GAAG,yCAAyC,CAAC;AACxE,MAAM,oBAAoB,GAAG,wCAAwC,CAAC;AACtE,MAAM,mBAAmB,GAAG,uCAAuC,CAAC;AACpE,MAAM,kBAAkB,GAAG,sCAAsC,CAAC;AAClE,MAAM,kBAAkB,GAAG,sCAAsC,CAAC;AAClE,MAAM,kBAAkB,GAAG,sCAAsC,CAAC;AAElE,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAClD,MAAM,YAAY,GAAG,+CAA+C,CAAC;AACrE,MAAM,WAAW,GAAG,8CAA8C,CAAC;AACnE,MAAM,UAAU,GAAG,wCAAwC,CAAC;AAC5D,MAAM,UAAU,GAAG,6CAA6C,CAAC;AACjE,MAAM,UAAU,GAAG,sCAAsC,CAAC;AAE1D,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,WAAqB,EAAE,UAAmB,KAAK,EAAU,EAAE;IAC/F,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;QAC3C,OAAO,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,aAAa,CAAC;IAE3D,MAAM,gBAAgB,GAAG,WAAW,CAAC,IAAI,EAAc,CAAC;IAExD,IAAI,YAAY,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QAC5F,OAAO,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC;IAEzD,IAAI,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QAC1E,OAAO,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,WAAW,CAAC;IAEvD,IAAI,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC;QACxD,OAAO,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAErD,IAAI,YAAY,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;QACtD,OAAO,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAErD,IAAI,YAAY,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QAClD,OAAO,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAErD,OAAO,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,SAAmB,EAAE,WAAqB,EAAE,EAAE,CAChE,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { VisaSRC } from './visa-src';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../secure-remote-commerce/providers/visa-src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { Link, VISA_SRC } from '../../../components/link';
|
|
2
|
-
import { Container } from '../../../components/container';
|
|
3
|
-
import { IFrame } from '../../../components/iframe';
|
|
4
|
-
import { IFrameEvent } from '../../../components/iframe-event';
|
|
5
|
-
import { VisaSRCStyles } from "./visa-src.styles";
|
|
6
|
-
import { EVENT } from '../../interfaces';
|
|
7
|
-
import { GenerateCardSchemesLogo } from "./helper";
|
|
8
|
-
import { SDK } from '../../../configs/sdk';
|
|
9
|
-
export class VisaSRC {
|
|
10
|
-
constructor(button_selector, iframe_selector, service_id, public_key, meta, eventEmitter, autoResize, env, alias) {
|
|
11
|
-
this.meta = meta;
|
|
12
|
-
this.eventEmitter = eventEmitter;
|
|
13
|
-
this.autoResize = autoResize;
|
|
14
|
-
this.link = new Link(VISA_SRC);
|
|
15
|
-
this.link.setParams(Object.assign({ service_id, public_key }, meta && { meta: JSON.stringify(meta) }));
|
|
16
|
-
if (SDK.version) {
|
|
17
|
-
this.link.setParams({
|
|
18
|
-
sdk_version: SDK.version,
|
|
19
|
-
sdk_type: SDK.type,
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
if (env)
|
|
23
|
-
this.link.setEnv(env, alias);
|
|
24
|
-
this.iFrameContainer = new Container(iframe_selector);
|
|
25
|
-
this.iFrame = new IFrame(this.iFrameContainer);
|
|
26
|
-
this.buttonContainer = new Container(button_selector);
|
|
27
|
-
this.iFrameEvent = new IFrameEvent(window);
|
|
28
|
-
this.setupIFrameEvents();
|
|
29
|
-
}
|
|
30
|
-
setupIFrameEvents() {
|
|
31
|
-
const widgetId = this.link.getParams().widget_id;
|
|
32
|
-
this.iFrameEvent.on(EVENT.CHECKOUT_READY, widgetId, ({ data }) => {
|
|
33
|
-
this.eventEmitter.emit(EVENT.CHECKOUT_READY, data);
|
|
34
|
-
});
|
|
35
|
-
this.iFrameEvent.on(EVENT.CHECKOUT_COMPLETED, widgetId, ({ data }) => {
|
|
36
|
-
this.eventEmitter.emit(EVENT.CHECKOUT_COMPLETED, data);
|
|
37
|
-
});
|
|
38
|
-
this.iFrameEvent.on(EVENT.CHECKOUT_ERROR, widgetId, ({ data }) => {
|
|
39
|
-
this.eventEmitter.emit(EVENT.CHECKOUT_ERROR, data);
|
|
40
|
-
});
|
|
41
|
-
if (this.autoResize)
|
|
42
|
-
this.useAutoResize(true);
|
|
43
|
-
}
|
|
44
|
-
load() {
|
|
45
|
-
var _a;
|
|
46
|
-
const container = document.createElement('div');
|
|
47
|
-
container.setAttribute('style', VisaSRCStyles.buttonContainerStyles);
|
|
48
|
-
const checkoutButton = document.createElement('button');
|
|
49
|
-
checkoutButton.setAttribute('style', VisaSRCStyles.buttonStyles);
|
|
50
|
-
if (this.meta.customizations.primary_color)
|
|
51
|
-
checkoutButton.style.backgroundColor = this.meta.customizations.primary_color;
|
|
52
|
-
if (this.meta.customizations.button_text_color)
|
|
53
|
-
checkoutButton.style.color = this.meta.customizations.button_text_color;
|
|
54
|
-
checkoutButton.innerHTML = 'Checkout';
|
|
55
|
-
const footerContainer = document.createElement('div');
|
|
56
|
-
footerContainer.setAttribute('style', VisaSRCStyles.footerContainerStyles);
|
|
57
|
-
const verticalLine = document.createElement('div');
|
|
58
|
-
verticalLine.setAttribute('style', VisaSRCStyles.verticalLineStyle);
|
|
59
|
-
const footerText = document.createElement('p');
|
|
60
|
-
footerText.setAttribute('style', VisaSRCStyles.footerTextStyles);
|
|
61
|
-
footerText.innerHTML = 'WE ACCEPT';
|
|
62
|
-
const clickToPayAllCards = document.createElement('img');
|
|
63
|
-
clickToPayAllCards.setAttribute('style', VisaSRCStyles.clickToPayAllCardsStyle);
|
|
64
|
-
clickToPayAllCards.src = this.link.getBaseUrl() + `${GenerateCardSchemesLogo((_a = this.meta.customizations) === null || _a === void 0 ? void 0 : _a.card_schemes, true)}`;
|
|
65
|
-
checkoutButton.onclick = () => {
|
|
66
|
-
this.eventEmitter.emit(EVENT.CHECKOUT_BUTTON_CLICKED, {});
|
|
67
|
-
this.iFrame.load(this.link.getUrl(), { title: 'Visa SRC checkout' });
|
|
68
|
-
this.iFrame.getElement().onload = () => this.eventEmitter.emit(EVENT.IFRAME_LOADED, {});
|
|
69
|
-
};
|
|
70
|
-
container.appendChild(checkoutButton);
|
|
71
|
-
container.appendChild(footerContainer);
|
|
72
|
-
footerContainer.appendChild(footerText);
|
|
73
|
-
footerContainer.appendChild(clickToPayAllCards);
|
|
74
|
-
this.buttonContainer.getElement().appendChild(container);
|
|
75
|
-
this.eventEmitter.emit(EVENT.CHECKOUT_BUTTON_LOADED, {});
|
|
76
|
-
}
|
|
77
|
-
getEnv() {
|
|
78
|
-
return this.link.getEnv();
|
|
79
|
-
}
|
|
80
|
-
hideButton(_saveSize) {
|
|
81
|
-
if (this.buttonContainer.getElement())
|
|
82
|
-
this.buttonContainer.getElement().style['display'] = 'none';
|
|
83
|
-
}
|
|
84
|
-
showButton() {
|
|
85
|
-
if (this.buttonContainer.getElement())
|
|
86
|
-
this.buttonContainer.getElement().style['display'] = 'block';
|
|
87
|
-
}
|
|
88
|
-
hideCheckout(saveSize) {
|
|
89
|
-
if (this.iFrame)
|
|
90
|
-
this.iFrame.hide();
|
|
91
|
-
}
|
|
92
|
-
showCheckout() {
|
|
93
|
-
if (this.iFrame)
|
|
94
|
-
this.iFrame.show();
|
|
95
|
-
}
|
|
96
|
-
reload() {
|
|
97
|
-
this.iFrame.remove();
|
|
98
|
-
this.load();
|
|
99
|
-
}
|
|
100
|
-
useAutoResize(force) {
|
|
101
|
-
if (this.autoResize && !force)
|
|
102
|
-
return;
|
|
103
|
-
this.autoResize = true;
|
|
104
|
-
this.iFrameEvent.on('resize', this.link.getParams().widget_id, ({ data }) => {
|
|
105
|
-
if (this.iFrame.getElement()) {
|
|
106
|
-
this.iFrame.getElement().scrolling = 'no';
|
|
107
|
-
if (data.height)
|
|
108
|
-
this.iFrame.setStyle('height', data.height + 'px');
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
//# sourceMappingURL=../../../../src/lib/secure-remote-commerce/providers/visa-src/visa-src.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"visa-src.js","sourceRoot":"","sources":["../../../../secure-remote-commerce/providers/visa-src/visa-src.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export class VisaSRCStyles {
|
|
2
|
-
}
|
|
3
|
-
VisaSRCStyles.buttonContainerStyles = "display: flex; flex-direction: column; justify-content: center; align-items: center;";
|
|
4
|
-
VisaSRCStyles.buttonStyles = "color: #ffff; background-color: #ffbe24; border: none; width: 100%; min-height: 40px; font-size: 16px; font-weight: bold; line-height: 19px; letter-spacing: 0.7px; text-transform: uppercase; border-radius: 4px; margin-bottom: 15px; cursor: pointer;";
|
|
5
|
-
VisaSRCStyles.footerContainerStyles = "display: flex; flex: 1; flex-wrap: wrap; justify-content: center;";
|
|
6
|
-
VisaSRCStyles.footerTextStyles = "text-align: center; color: #666666; margin: 2px 0;";
|
|
7
|
-
VisaSRCStyles.verticalLineStyle = "display: inline-block; padding: 0.5px; background-color: #E5E5E5; height: 15px;";
|
|
8
|
-
VisaSRCStyles.clickToPayAllCardsStyle = "height: 17px; margin-left: 8px; vertical-align: middle; padding-top: 3px;";
|
|
9
|
-
// TODO: Remind to add in docs that if merchant's div is smaller than 240px the button styles will broke
|
|
10
|
-
//# sourceMappingURL=../../../../src/lib/secure-remote-commerce/providers/visa-src/visa-src.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"visa-src.styles.js","sourceRoot":"","sources":["../../../../secure-remote-commerce/providers/visa-src/visa-src.styles.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,aAAa;;AACR,mCAAqB,GAAG,sFAAsF,CAAC;AAE/G,0BAAY,GAAG,0PAA0P,CAAC;AAE1Q,mCAAqB,GAAG,mEAAmE,CAAC;AAE5F,8BAAgB,GAAG,oDAAoD,CAAC;AAExE,+BAAiB,GAAG,iFAAiF,CAAC;AAEtG,qCAAuB,GAAG,2EAA2E,CAAC;AAGxH,wGAAwG"}
|