Merge pull request #59 from PaystackOSS/patch/webview-guide

update webview guide code snippet

Author: damilola-paystack

dist/doc/guides/checkout-webview/handling-redirect.js

@@ -5,17 +5,23 @@ Widget build(BuildContext context) {
       initialUrl: 'https://checkout.paystack.com/7zu1ot06d0qn9h6',
       javascriptMode: JavascriptMode.unrestricted,
       userAgent: 'Flutter;Webview',
-      navigationDelegate: (navigation){
-      //Listen for callback URL
-        if(navigation.url == "https://hello.pstk.xyz/callback"){
+      navigationDelegate: (navigation) {
+        //Listen for callback URL
+        if (navigation.url == "https://hello.pstk.xyz/callback") {
           verifyTransaction(reference);
           Navigator.of(context).pop(); //close webview
         }
+        if (navigation.url == "https://your-cancel-url.com") {
+          //handle webview removal
+          Navigator.of(context).pop(); //close webview
+          //Run the cancel payment function if you have one
+        }
         return NavigationDecision.navigate;
       },
     ),
   );
-}`
+}
+`
 
 const js = `import React from 'react';
 import { WebView } from 'react-native-webview';
@@ -25,6 +31,7 @@ export default function App() {
 
   const authorization_url = 'https://checkout.paystack.com/luKuasMan';
   const callback_url = 'https://yourcallback.com';
+  const cancel_url = "https://your-cancel-url.com";
 
   onNavigationStateChange = state => {
  
@@ -37,6 +44,12 @@ export default function App() {
       const redirectTo = 'window.location = "' + callback_url + '"';
       this.webview.injectJavaScript(redirectTo);
     }
+    if (url === cancel_url) {
+      // handle webview removal
+      // You can either unmount the component, or
+      // Use a navigator to pop off the view
+      // Run the cancel payment function if you have one
+    }
   };
 
   return (
@@ -46,15 +59,16 @@ export default function App() {
       onNavigationStateChange={ this.onNavigationStateChange }
     />
   );
-}
-`
+}`
 
 const kt = `class MainActivity : AppCompatActivity() {
 
   private val authorizationUrl: String
     get() = "https://checkout.paystack.com/ok62i2sdld514e4"
   private val callbackUrl: String
     get() = "https://yourcallback.com"
+  private val cancelUrl: String
+    get() = "https://your-cancel-url.com"
 
   override fun onCreate(savedInstanceState: Bundle?) {
     // ...
@@ -76,6 +90,11 @@ const kt = `class MainActivity : AppCompatActivity() {
         if (url?.host == callbackUrl) {
           return true
         }
+        if (url?.host == cancelUrl) {
+          // handle webview removal
+          // Run the cancel payment function if you have one
+          return true
+        }
         
         return super.shouldOverrideUrlLoading(view, request)
       }

dist/doc/payments/accept-payment/redirect-backend.js

@@ -1,14 +1,19 @@
 const sh = `curl https://api.paystack.co/transaction/initialize
 -H "Authorization: Bearer YOUR_SECRET_KEY"
 -H "Content-Type: application/json"
--d '{ "email": "customer@email.com", "amount": "20000" }'
+-d '{ "email": "customer@email.com", "amount": "20000",
+    "callback_url":"https://hello.pstk.xyz/callback",
+    "metadata":{"cancel_action": "https://your-cancel-url.com"} 
+    }'
 -X POST`
 
 const js = `const https = require('https')
 
 const params = JSON.stringify({
   "email": "customer@email.com",
-  "amount": "20000"
+  "amount": "20000",
+  "callback_url":"https://hello.pstk.xyz/callback",
+  "metadata":{"cancel_action": "https://your-cancel-url.com"}
 })
 
 const options = {
@@ -44,7 +49,9 @@ const php = `<?php
 
   $fields = [
     'email' => "customer@email.com",
-    'amount' => "20000"
+    'amount' => "20000",
+    'callback_url' => "https://hello.pstk.xyz/callback",
+    'metadata' => ["cancel_action" => "https://your-cancel-url.com"]
   ];
 
   $fields_string = http_build_query($fields);

src/doc/guides/checkout-webview/handling-redirect/index.dart

@@ -5,14 +5,19 @@ Widget build(BuildContext context) {
       initialUrl: 'https://checkout.paystack.com/7zu1ot06d0qn9h6',
       javascriptMode: JavascriptMode.unrestricted,
       userAgent: 'Flutter;Webview',
-      navigationDelegate: (navigation){
-      //Listen for callback URL
-        if(navigation.url == "https://hello.pstk.xyz/callback"){
+      navigationDelegate: (navigation) {
+        //Listen for callback URL
+        if (navigation.url == "https://hello.pstk.xyz/callback") {
           verifyTransaction(reference);
           Navigator.of(context).pop(); //close webview
         }
+        if (navigation.url == "https://your-cancel-url.com") {
+          //handle webview removal
+          Navigator.of(context).pop(); //close webview
+          //Run the cancel payment function if you have one
+        }
         return NavigationDecision.navigate;
       },
     ),
   );
-}
+}

src/doc/guides/checkout-webview/handling-redirect/index.js

@@ -6,6 +6,7 @@ export default function App() {
 
   const authorization_url = 'https://checkout.paystack.com/luKuasMan';
   const callback_url = 'https://yourcallback.com';
+  const cancel_url = "https://your-cancel-url.com";
 
   onNavigationStateChange = state => {
 
@@ -18,6 +19,12 @@ export default function App() {
       const redirectTo = 'window.location = "' + callback_url + '"';
       this.webview.injectJavaScript(redirectTo);
     }
+    if (url === cancel_url) {
+      // handle webview removal
+      // You can either unmount the component, or
+      // Use a navigator to pop off the view
+      // Run the cancel payment function if you have one
+    }
   };
 
   return (
@@ -27,4 +34,4 @@ export default function App() {
       onNavigationStateChange={ this.onNavigationStateChange }
     />
   );
-}
+}

src/doc/guides/checkout-webview/handling-redirect/index.kt

@@ -4,6 +4,8 @@ class MainActivity : AppCompatActivity() {
     get() = "https://checkout.paystack.com/ok62i2sdld514e4"
   private val callbackUrl: String
     get() = "https://yourcallback.com"
+  private val cancelUrl: String
+    get() = "https://your-cancel-url.com"
 
   override fun onCreate(savedInstanceState: Bundle?) {
     // ...
@@ -25,6 +27,11 @@ class MainActivity : AppCompatActivity() {
         if (url?.host == callbackUrl) {
           return true
         }
+        if (url?.host == cancelUrl) {
+          // handle webview removal
+          // Run the cancel payment function if you have one
+          return true
+        }
 
         return super.shouldOverrideUrlLoading(view, request)
       }

src/doc/payments/accept-payment/redirect-backend/index.js

@@ -2,7 +2,9 @@ const https = require('https')
 
 const params = JSON.stringify({
   "email": "customer@email.com",
-  "amount": "20000"
+  "amount": "20000",
+  "callback_url":"https://hello.pstk.xyz/callback",
+  "metadata":{"cancel_action": "https://your-cancel-url.com"}
 })
 
 const options = {

src/doc/payments/accept-payment/redirect-backend/index.php

@@ -3,7 +3,9 @@
 
   $fields = [
     'email' => "customer@email.com",
-    'amount' => "20000"
+    'amount' => "20000",
+    'callback_url' => "https://hello.pstk.xyz/callback",
+    'metadata' => ["cancel_action" => "https://your-cancel-url.com"]
   ];
 
   $fields_string = http_build_query($fields);

src/doc/payments/accept-payment/redirect-backend/index.sh

@@ -1,5 +1,8 @@
 curl https://api.paystack.co/transaction/initialize
 -H "Authorization: Bearer YOUR_SECRET_KEY"
 -H "Content-Type: application/json"
--d '{ "email": "customer@email.com", "amount": "20000" }'
+-d '{ "email": "customer@email.com", "amount": "20000",
+    "callback_url":"https://hello.pstk.xyz/callback",
+    "metadata":{"cancel_action": "https://your-cancel-url.com"} 
+    }'
 -X POST