From e39fd30198b9768011c7c0074aaa6ffff15c5094 Mon Sep 17 00:00:00 2001
From: lissavxo <lissavitoria12@gmail.com>
Date: Fri, 31 Jan 2025 16:00:41 -0300
Subject: [PATCH] docs:update advanced usage

---
 docs/README.md       | 112 +++++++++++++++++++++++++++++--------------
 docs/zh-cn/README.md | 108 +++++++++++++++++++++++++++--------------
 docs/zh-tw/README.md | 108 +++++++++++++++++++++++++++--------------
 3 files changed, 219 insertions(+), 109 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index d54c44a2..549146e4 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -29,47 +29,83 @@ Example using JavaScript to generate a PayButton:
 <div id="my_button"></div>
 
 <script>
-function mySuccessFunction(txid, amount) {
-  console.log( { txid, amount } );
-}
+  function mySuccessFunction(transaction) {
+    const transactionAttrs = { 
+      hash, 
+      amount, 
+      paymentId, 
+      confirmed, 
+      message, 
+      timestamp, 
+      address, 
+      rawMessage, 
+      inputAddresses 
+    } = transaction;
+
+    console.log(transactionAttrs);
+  }
 
-function myTransactionFunction(txid, amount) {
-  console.log( 'Received: ' + amount );
-}
+  function myTransactionFunction(transaction) {
+    const transactionAttrs = { 
+      hash, 
+      amount, 
+      paymentId, 
+      confirmed, 
+      message, 
+      timestamp, 
+      address, 
+      rawMessage, 
+      inputAddresses 
+    } = transaction;
+
+    console.log(transactionAttrs);
+    console.log( 'Received: ' + transactionAttrs.amount );
+  }
 
-function myOpenFunction() {
-  console.log('Dialog opened.');
-}
+  function myCloseFunction(success, paymentId) {
+    console.log('Closed!')
+    console.log('Payment successful?: ' + success)
+    console.log('Payment ID: ' + paymentId)
+  }
 
-function myCloseFunction(success) {
-  console.log(`Dialog closed - user ${success ? 'did' : 'did not'} pay.`);
-}
+  function myOpenFunction(amount, to, paymentId) {
+    console.log('Opened to: ' + to + ' for ' + amount + ' XEC')
+    console.log('Payment ID: ' + paymentId)
+  }
 
-var config = {
-  to: 'ecash:qrmm7ed0px8tydrlhgvu3putwpwzlfyr0uzfc0slxp',
-  amount: 4.5,
-  goalAmount: 300000,
-  editable: false,
-  currency: 'USD',
-  text: 'Tip Us a Coffee!',
-  hoverText: 'One coffee',
-  theme: {
-    palette: {
-      primary: '#ee8b2b',
-      secondary: '#fefbf8',
-      tertiary: '#504030'
-    }
-  },
-  animation: 'invert',
-  successText: 'Purchase Complete!',
-  onSuccess: mySuccessFunction,
-  onTransaction: myTransactionFunction,
-  onOpen: myOpenFunction,
-  onClose: myCloseFunction,
-  randomSatoshis: true
-};
 
-PayButton.render(document.getElementById('my_button'), config);
+  var config = {
+    to: 'ecash:qrmm7ed0px8tydrlhgvu3putwpwzlfyr0uzfc0slxp',
+    amount: 4.5,
+    goalAmount: 300000,
+    editable: false,
+    currency: 'USD',
+    text: 'Tip Us a Coffee!',
+    hoverText: 'One coffee',
+    theme: {
+      palette: {
+        primary: '#ee8b2b',
+        secondary: '#fefbf8',
+        tertiary: '#504030'
+      }
+    },
+    animation: 'invert',
+    successText: 'Purchase Complete!',
+    onSuccess: mySuccessFunction,
+    onTransaction: myTransactionFunction,
+    onOpen: myOpenFunction,
+    onClose: myCloseFunction,
+    randomSatoshis: true,
+    opReturn:"ABC",
+    disablePaymentId: true,
+    disabled: false,
+    wsBaseUrl: 'http://localhost:5000',
+    apiBaseUrl: 'http://localhost:3000'
+    disableAltpayment: true,
+    contributionOffset: 10
+  };
+
+  PayButton.render(document.getElementById('my_button'), config);
 </script>
 ```
 
@@ -115,7 +151,9 @@ render( '#advanced-usage-example', {
   onTransaction: myTransactionFunction,
   onOpen: myOpenFunction,
   onClose: myCloseFunction,
-  randomSatoshis: true
+  randomSatoshis: true,
+  hideToasts: true,
+  opReturn: ''
 })
 
 // render 'react' button
diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md
index 6d0c24fe..da62938a 100644
--- a/docs/zh-cn/README.md
+++ b/docs/zh-cn/README.md
@@ -29,47 +29,83 @@
 <div id="my_button"></div>
 
 <script>
-function mySuccessFunction(txid, amount) {
-  console.log( { txid, amount } );
-}
+  function mySuccessFunction(transaction) {
+    const transactionAttrs = { 
+      hash, 
+      amount, 
+      paymentId, 
+      confirmed, 
+      message, 
+      timestamp, 
+      address, 
+      rawMessage, 
+      inputAddresses 
+    } = transaction;
+
+    console.log(transactionAttrs);
+  }
 
-function myTransactionFunction(txid, amount) {
-  console.log( 'Received: ' + amount );
-}
+  function myTransactionFunction(transaction) {
+    const transactionAttrs = { 
+      hash, 
+      amount, 
+      paymentId, 
+      confirmed, 
+      message, 
+      timestamp, 
+      address, 
+      rawMessage, 
+      inputAddresses 
+    } = transaction;
+
+    console.log(transactionAttrs);
+    console.log( 'Received: ' + transactionAttrs.amount );
+  }
 
-function myOpenFunction() {
-  console.log('Dialog opened.');
-}
+  function myCloseFunction(success, paymentId) {
+    console.log('Closed!')
+    console.log('Payment successful?: ' + success)
+    console.log('Payment ID: ' + paymentId)
+  }
 
-function myCloseFunction(success) {
-  console.log(`Dialog closed - user ${success ? 'did' : 'did not'} pay.`);
-}
+  function myOpenFunction(amount, to, paymentId) {
+    console.log('Opened to: ' + to + ' for ' + amount + ' XEC')
+    console.log('Payment ID: ' + paymentId)
+  }
 
-var config = {
-  to: 'ecash:qrmm7ed0px8tydrlhgvu3putwpwzlfyr0uzfc0slxp',
-  amount: 4.5,
-  goalAmount: 300000,
-  editable: false,
-  currency: 'USD',
-  text: 'Tip Us a Coffee!',
-  hoverText: 'One coffee',
-  theme: {
-    palette: {
-      primary: '#ee8b2b',
-      secondary: '#fefbf8',
-      tertiary: '#504030'
-    }
-  },
-  animation: 'invert',
-  successText: 'Purchase Complete!',
-  onSuccess: mySuccessFunction,
-  onTransaction: myTransactionFunction,
-  onOpen: myOpenFunction,
-  onClose: myCloseFunction,
-  randomSatoshis: true
-};
 
-PayButton.render(document.getElementById('my_button'), config);
+  var config = {
+    to: 'ecash:qrmm7ed0px8tydrlhgvu3putwpwzlfyr0uzfc0slxp',
+    amount: 4.5,
+    goalAmount: 300000,
+    editable: false,
+    currency: 'USD',
+    text: 'Tip Us a Coffee!',
+    hoverText: 'One coffee',
+    theme: {
+      palette: {
+        primary: '#ee8b2b',
+        secondary: '#fefbf8',
+        tertiary: '#504030'
+      }
+    },
+    animation: 'invert',
+    successText: 'Purchase Complete!',
+    onSuccess: mySuccessFunction,
+    onTransaction: myTransactionFunction,
+    onOpen: myOpenFunction,
+    onClose: myCloseFunction,
+    randomSatoshis: true,
+    opReturn:"ABC",
+    disablePaymentId: true,
+    disabled: false,
+    wsBaseUrl: 'http://localhost:5000',
+    apiBaseUrl: 'http://localhost:3000'
+    disableAltpayment: true,
+    contributionOffset: 10
+  };
+
+  PayButton.render(document.getElementById('my_button'), config);
 </script>
 ```
 
diff --git a/docs/zh-tw/README.md b/docs/zh-tw/README.md
index 1c08188a..c45348e8 100644
--- a/docs/zh-tw/README.md
+++ b/docs/zh-tw/README.md
@@ -29,47 +29,83 @@
 <div id="my_button"></div>
 
 <script>
-function mySuccessFunction(txid, amount) {
-  console.log( { txid, amount } );
-}
+  function mySuccessFunction(transaction) {
+    const transactionAttrs = { 
+      hash, 
+      amount, 
+      paymentId, 
+      confirmed, 
+      message, 
+      timestamp, 
+      address, 
+      rawMessage, 
+      inputAddresses 
+    } = transaction;
+
+    console.log(transactionAttrs);
+  }
 
-function myTransactionFunction(txid, amount) {
-  console.log( 'Received: ' + amount );
-}
+  function myTransactionFunction(transaction) {
+    const transactionAttrs = { 
+      hash, 
+      amount, 
+      paymentId, 
+      confirmed, 
+      message, 
+      timestamp, 
+      address, 
+      rawMessage, 
+      inputAddresses 
+    } = transaction;
+
+    console.log(transactionAttrs);
+    console.log( 'Received: ' + transactionAttrs.amount );
+  }
 
-function myOpenFunction() {
-  console.log('Dialog opened.');
-}
+  function myCloseFunction(success, paymentId) {
+    console.log('Closed!')
+    console.log('Payment successful?: ' + success)
+    console.log('Payment ID: ' + paymentId)
+  }
 
-function myCloseFunction(success) {
-  console.log(`Dialog closed - user ${success ? 'did' : 'did not'} pay.`);
-}
+  function myOpenFunction(amount, to, paymentId) {
+    console.log('Opened to: ' + to + ' for ' + amount + ' XEC')
+    console.log('Payment ID: ' + paymentId)
+  }
 
-var config = {
-  to: 'ecash:qrmm7ed0px8tydrlhgvu3putwpwzlfyr0uzfc0slxp',
-  amount: 4.5,
-  goalAmount: 300000,
-  editable: false,
-  currency: 'USD',
-  text: 'Tip Us a Coffee!',
-  hoverText: 'One cofee',
-  theme: {
-    palette: {
-      primary: '#ee8b2b',
-      secondary: '#fefbf8',
-      tertiary: '#504030'
-    }
-  },
-  animation: 'invert',
-  successText: 'Purchase Complete!',
-  onSuccess: mySuccessFunction,
-  onTransaction: myTransactionFunction,
-  onOpen: myOpenFunction,
-  onClose: myCloseFunction,
-  randomSatoshis: true
-};
 
-PayButton.render(document.getElementById('my_button'), config);
+  var config = {
+    to: 'ecash:qrmm7ed0px8tydrlhgvu3putwpwzlfyr0uzfc0slxp',
+    amount: 4.5,
+    goalAmount: 300000,
+    editable: false,
+    currency: 'USD',
+    text: 'Tip Us a Coffee!',
+    hoverText: 'One coffee',
+    theme: {
+      palette: {
+        primary: '#ee8b2b',
+        secondary: '#fefbf8',
+        tertiary: '#504030'
+      }
+    },
+    animation: 'invert',
+    successText: 'Purchase Complete!',
+    onSuccess: mySuccessFunction,
+    onTransaction: myTransactionFunction,
+    onOpen: myOpenFunction,
+    onClose: myCloseFunction,
+    randomSatoshis: true,
+    opReturn:"ABC",
+    disablePaymentId: true,
+    disabled: false,
+    wsBaseUrl: 'http://localhost:5000',
+    apiBaseUrl: 'http://localhost:3000'
+    disableAltpayment: true,
+    contributionOffset: 10
+  };
+
+  PayButton.render(document.getElementById('my_button'), config);
 </script>
 ```