Feat: Add InlineJS snippets

dist/doc/developer-tools/inlinejs/callback-oncancel.js

@@ -0,0 +1,5 @@
+const js = `onCancel: () => {
+  console.log("User cancelled")
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onelementsmount.js

@@ -0,0 +1,9 @@
+const js = `onElementsMount: (elements) =>{ // { applePay: true } or null
+  if (elements) {
+    console.log(`Successfully mounted elements: ${JSON.stringify(elements)}`);
+  } else {
+    console.log('Could not load elements');
+  }
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onerror.js

@@ -0,0 +1,5 @@
+const js = `onError: (error) => {
+  console.log(`Error: ${error.message}`);
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onload.js

@@ -0,0 +1,6 @@
+const js = `onLoad: (response) => {
+  // Transaction has loaded
+  // You can parse the transaction object if you need to.
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onsuccess.js

@@ -0,0 +1,5 @@
+const js = `onSuccess: (response) => {
+  // Post payment flow can go here
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/cancel-payment.js

@@ -0,0 +1,23 @@
+const js = `const popup = new Paystack()
+
+const transaction = popup.newTransaction({
+  key: 'pk_domain_xxxxx', // Replace with your public key
+  email: "[email protected]",
+  amount: 10000,
+  onLoad: (transaction) => {
+    window.clearInterval(redirectTimer);
+  }
+});
+
+let timeElapsed = 0;
+const timeLimit = 2;
+const redirectURL = 'https://your.redirecturl.com';
+const redirectTimer = setInterval(() => {
+  timeElapsed += 1;
+  if (timeElapsed === timeLimit) {
+    popup.cancelTransaction(transaction.id);
+    window.location.href = redirectURL;
+  }
+}, 1000);`
+
+export {js}

dist/doc/developer-tools/inlinejs/checkout.js

@@ -0,0 +1,21 @@
+const js = `const popup = new Paystack()
+
+popup.checkout({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 23400,
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: (error) => {
+    console.log(`Error ${error.message}`);
+  }
+})`
+
+export {js}

dist/doc/developer-tools/inlinejs/initialize.js

@@ -0,0 +1,6 @@
+const js = `// Add for NPM, Yarn
+import Paystack from '@paystack/inline-js';
+
+const popup = new Paystack()`
+
+export {js}

dist/doc/developer-tools/inlinejs/installation.js

@@ -0,0 +1,7 @@
+const cdn = `<script src="https://js.paystack.co/v2/inline.js"></script>`
+
+const npm = `npm i @paystack/inline-js`
+
+const yarn = `yarn add @paystack/inline-js`
+
+export {cdn, npm, yarn}

dist/doc/developer-tools/inlinejs/multi-split-dynamic.js

@@ -0,0 +1,22 @@
+const js = `const popup = new Paystack()
+
+popup.newTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 98540,
+  split_code: 'SPL_RYUUL4u1hP',
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: (error) => {
+    console.log(`Error: ${error.message}`);
+  }
+})`
+
+export {js}

dist/doc/developer-tools/inlinejs/multi-split.js

@@ -0,0 +1,36 @@
+const js = `const popup = new Paystack()
+
+popup.newTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 35650,
+  currency: 'NGN',
+  split: {
+    type: 'percentage',
+    bearer_type: 'account',
+    subaccounts: [
+      {
+        subaccount: 'ACCT_dskvlw3y3dsvkmt',
+        share: 30
+      },
+      {
+        subaccount: 'ACCT_eg4sob4590pq9vb',
+        share: 20
+      }
+    ]
+  },
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: (error) => {
+    console.log(`Error: ${error.message}`);
+  }
+})`
+
+export {js}

dist/doc/developer-tools/inlinejs/new-transaction.js

@@ -0,0 +1,21 @@
+const js = `const popup = new Paystack()
+
+popup.newTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 23400,
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: (error) => {
+    console.log(`Error: ${error.message}`);
+  }
+})`
+
+export {js}

dist/doc/developer-tools/inlinejs/payment-request.js

@@ -0,0 +1,33 @@
+const js = `const popup = new Paystack()
+
+const onElementsMount = (elements) => {
+  if (elements && elements.applePay) {
+    document.querySelector("#pay-button").innerText = "More Payment Options";
+  }
+}
+
+try {
+  await popup.paymentRequest({
+    key: 'pk_domain_xxxxxx',
+    email: '[email protected]',
+    amount: 10000,
+    currency: "NGN",
+    container: 'payment-request-buttons',
+    loadPaystackCheckoutButton: 'pay-button',
+    styles: {
+      theme: 'dark',
+      applePay: {
+        width: '100%',
+        height: '50px',
+        borderRadius: '3px',
+        type: 'plain',
+        locale: 'en'
+      }
+    },
+    onElementsMount,
+  });
+} catch (error) {
+
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/preload-transaction.js

@@ -0,0 +1,12 @@
+const js = `const popup = new Paystack()
+
+const loadPopup = popup.preloadTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 10000,
+  currency: "NGN"
+});
+
+document.querySelector("#make-payment").onclick = loadPopup;`
+
+export {js}

dist/doc/developer-tools/inlinejs/resume-transaction.js

@@ -0,0 +1,5 @@
+const js = `const popup = new Paystack()
+
+popup.resumeTransaction(access_code)`
+
+export {js}

dist/doc/developer-tools/inlinejs/split.js

@@ -0,0 +1,22 @@
+const js = `const popup = new Paystack()
+
+popup.newTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 45000,
+  subaccountCode: 'ACCT_dskvlw3y3dsvkmt',
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: (error) => {
+    console.log(`Error: ${error.message}`);
+  }
+})`
+
+export {js}

dist/doc/developer-tools/inlinejs/subscription-plan.js

@@ -0,0 +1,22 @@
+const js = `const popup = new Paystack()
+
+popup.newTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 40000,
+  planCode: 'PLN_l6aglbqzebn32c6',
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: () => {
+    console.log("onError");
+  }
+})`
+
+export {js}

dist/doc/developer-tools/inlinejs/subscription.js

@@ -0,0 +1,22 @@
+const js = `const popup = new Paystack()
+
+popup.newTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 20000,
+  planInterval: 'weekly',
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: () => {
+    console.log("onError");
+  }
+})`
+
+export {js}

src/doc/developer-tools/inlinejs/callback-oncancel/config.yml

@@ -0,0 +1,2 @@
+languages:   
+  - js

src/doc/developer-tools/inlinejs/callback-oncancel/index.js

@@ -0,0 +1,3 @@
+onCancel: () => {
+  console.log("User cancelled")
+}

src/doc/developer-tools/inlinejs/callback-onelementsmount/config.yml

@@ -0,0 +1,2 @@
+languages:   
+  - js

src/doc/developer-tools/inlinejs/callback-onelementsmount/index.js

@@ -0,0 +1,7 @@
+onElementsMount: (elements) =>{ // { applePay: true } or null
+  if (elements) {
+    console.log(`Successfully mounted elements: ${JSON.stringify(elements)}`);
+  } else {
+    console.log('Could not load elements');
+  }
+}

src/doc/developer-tools/inlinejs/callback-onerror/config.yml

@@ -0,0 +1,2 @@
+languages:   
+  - js

src/doc/developer-tools/inlinejs/callback-onerror/index.js

@@ -0,0 +1,3 @@
+onError: (error) => {
+  console.log(`Error: ${error.message}`);
+}

src/doc/developer-tools/inlinejs/callback-onload/config.yml

@@ -0,0 +1,2 @@
+languages:   
+  - js

src/doc/developer-tools/inlinejs/callback-onload/index.js

@@ -0,0 +1,4 @@
+onLoad: (response) => {
+  // Transaction has loaded
+  // You can parse the transaction object if you need to.
+}

src/doc/developer-tools/inlinejs/callback-onsuccess/config.yml

@@ -0,0 +1,2 @@
+languages:   
+  - js

src/doc/developer-tools/inlinejs/callback-onsuccess/index.js

@@ -0,0 +1,3 @@
+onSuccess: (response) => {
+  // Post payment flow can go here
+}

src/doc/developer-tools/inlinejs/cancel-payment/config.yml

@@ -0,0 +1,2 @@
+languages:   
+  - js

src/doc/developer-tools/inlinejs/cancel-payment/index.js

@@ -0,0 +1,21 @@
+const popup = new Paystack()
+
+const transaction = popup.newTransaction({
+  key: 'pk_domain_xxxxx', // Replace with your public key
+  email: "[email protected]",
+  amount: 10000,
+  onLoad: (transaction) => {
+    window.clearInterval(redirectTimer);
+  }
+});
+
+let timeElapsed = 0;
+const timeLimit = 2;
+const redirectURL = 'https://your.redirecturl.com';
+const redirectTimer = setInterval(() => {
+  timeElapsed += 1;
+  if (timeElapsed === timeLimit) {
+    popup.cancelTransaction(transaction.id);
+    window.location.href = redirectURL;
+  }
+}, 1000);

src/doc/developer-tools/inlinejs/checkout/config.yml

@@ -0,0 +1,2 @@
+languages:   
+  - js