@netceterapx/click-to-pay-sdk 2.0.0-rc1.1 → 2.0.0

package/README.md

@@ -35,9 +35,9 @@ this can be useful for local development.
 - `true` Masked pan is shown on the payment button.
 - `false` Masked pan is not shown on the payment button.
 
-`isbuttonprimary` This prop controls whether the main button in the component is in primary or secondary state. Possible values:
-- `true` Button is in primary state.
-- `false` Button is in secondary state.
+`buttonstyle` This prop controls whether the main button in the component is in filled or outlined state. Possible values:
+- `FILLED` Button is in filled state.
+- `OUTLINED` Button is in outlined state.
 
 Note: The application starts by default in production mode.
 
@@ -57,7 +57,7 @@ clickToPay.config = {
     srcInitiatorId: 'required-src-initiator-id',
     srciDpaId: 'required-src-dpa-id',
     encryptionKey: 'required-encryption-key',
-    publicKey: 'required-public-key',
+    nModulus: 'required-n-modulus',
   },
   amex: {
     srcInitiatorId: 'required-src-initiator-id',
@@ -127,8 +127,8 @@ It is a required prop.
 
 ```js
   clickToPay.transactionamount = {
-    amount: 10,
-    currencyCode: USD
+    amount: '10',
+    currencyCode: 'USD',
   }
 ```
 
@@ -140,9 +140,9 @@ The SRCi component able to react to any changes of its props. That means the mer
 its props, and the component will update itself accordingly.
 
 ```js
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
   
-  let clickToPay = document.querySelector('click-to-pay');
+  const clickToPay = document.querySelector('click-to-pay');
 
   clickToPay.setAttribute('isExpanded', 'false');
 
@@ -175,9 +175,9 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 ```
 
-`document.addEventListener('DOMContentLoaded', function() {...});` It's recommended to initialize/update any properties after the component is fully initialized.
+`document.addEventListener('DOMContentLoaded', () => {...});` It's recommended to initialize/update any properties after the component is fully initialized.
 
-`let clickToPay = document.querySelector('click-to-pay');` The merchant can get a reference to the SRCi component.
+`const clickToPay = document.querySelector('click-to-pay');` The merchant can get a reference to the SRCi component.
 
 `clickToPay.setAttribute('isExpanded', 'false');` Then, the merchant is able to modify any prop for the component, when
 that happens the component reacts.
@@ -229,9 +229,9 @@ You can hide the UI with the `isExpanded` props.
 ```
 
 ```js
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
   
-  let clickToPay = document.querySelector('click-to-pay');
+  const clickToPay = document.querySelector('click-to-pay');
   
   clickToPay.config = {
     // ...
@@ -241,7 +241,7 @@ document.addEventListener('DOMContentLoaded', function() {
   let checkoutButton = document.querySelector('#checkout-button');
   
   // .then().catch() are also compatible.
-  checkoutButton.onclick = async function() {
+  checkoutButton.onclick = async () => {
     try {
       let response = await clickToPay.checkout({
         card: {
@@ -336,23 +336,10 @@ The modal can be closed by:
 
 ```js
 document.addEventListener('DOMContentLoaded', () => {
-  let clickToPay = document.querySelector('click-to-pay');
+  const clickToPay = document.querySelector('click-to-pay');
   
   clickToPay.displayClickToPayExplanationModal();
 });
 ```
 
 The Click to Pay explanation modal is following the UX guidelines of the schemes.
-
-### Styling
-
-There are multiple class names, and an id spread throughout the components of the SRCi.
-These can be used as hooks to override / add styling as necessary.
-
-`click-to-pay` This id is the top most HTML element which the SRCi mounts on.
-
-`click-to-pay--main` This class wraps the main attribute. It's a container that wraps all sub-components and also contains the DCF window if chosen to do so.
-
-`click-to-pay--spinner-container` This class wraps the spinner. This can be used to manipulate the spinner as to fit your specific styling requirements.
-
-`click-to-pay--component-container` This class wraps every component that is currently active.