{"id":2877,"date":"2023-09-18T03:49:56","date_gmt":"2023-09-18T03:49:56","guid":{"rendered":"https:\/\/agratajholidays.in\/?page_id=2877"},"modified":"2023-09-18T03:51:34","modified_gmt":"2023-09-18T03:51:34","slug":"pay-pal-button","status":"publish","type":"page","link":"https:\/\/agratajholidays.in\/index.php\/pay-pal-button\/","title":{"rendered":"Pay Pal Button"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>\r\nwindow.paypal\r\n  .Buttons({\r\n    async createOrder() {\r\n      try {\r\n        const response = await fetch(\"\/api\/orders\", {\r\n          method: \"POST\",\r\n          headers: {\r\n            \"Content-Type\": \"application\/json\",\r\n          },\r\n          \/\/ use the \"body\" param to optionally pass additional order information\r\n          \/\/ like product ids and quantities\r\n          body: JSON.stringify({\r\n            cart: &#91;\r\n              {\r\n                id: \"YOUR_PRODUCT_ID\",\r\n                quantity: \"YOUR_PRODUCT_QUANTITY\",\r\n              },\r\n            ],\r\n          }),\r\n        });\r\n\r\n        const orderData = await response.json();\r\n\r\n        if (orderData.id) {\r\n          return orderData.id;\r\n        } else {\r\n          const errorDetail = orderData?.details?.&#91;0];\r\n          const errorMessage = errorDetail\r\n            ?`${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`\r\n            : JSON.stringify(orderData);\r\n\r\n          throw new Error(errorMessage);\r\n        }\r\n      } catch (error) {\r\n        console.error(error);\r\n        resultMessage(`Could not initiate PayPal Checkout...&lt;br>&lt;br>${error}`);\r\n      }\r\n    },\r\n    async onApprove(data, actions) {\r\n      try {\r\n        const response = await fetch(`\/api\/orders\/${data.orderID}\/capture`, {\r\n          method: \"POST\",\r\n          headers: {\r\n            \"Content-Type\": \"application\/json\",\r\n          },\r\n        });\r\n\r\n        const orderData = await response.json();\r\n\r\n        \/\/ Three cases to handle:\r\n        \/\/   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()\r\n        \/\/   (2) Other non-recoverable errors -> Show a failure message\r\n        \/\/   (3) Successful transaction -> Show confirmation or thank you message\r\n\r\n        const errorDetail = orderData?.details?.&#91;0];\r\n\r\n        if (errorDetail?.issue === \"INSTRUMENT_DECLINED\") {\r\n          \/\/ (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()\r\n          \/\/ recoverable state, per https:\/\/developer.paypal.com\/docs\/checkout\/standard\/customize\/handle-funding-failures\/\r\n          return actions.restart();\r\n        } else if (errorDetail) {\r\n          \/\/ (2) Other non-recoverable errors -> Show a failure message\r\n          throw new Error(`${errorDetail.description} (${orderData.debug_id})`);\r\n        } else if (!orderData.purchase_units) {\r\n          throw new Error(JSON.stringify(orderData));\r\n        } else {\r\n          \/\/ (3) Successful transaction -> Show confirmation or thank you message\r\n          \/\/ Or go to another URL:  actions.redirect('thank_you.html');\r\n          const transaction =\r\n            orderData?.purchase_units?.&#91;0]?.payments?.captures?.&#91;0] ||\r\n            orderData?.purchase_units?.&#91;0]?.payments?.authorizations?.&#91;0];\r\n          resultMessage(\r\n            `Transaction ${transaction.status}: ${transaction.id}&lt;br>&lt;br>See console for all available details`,\r\n          );\r\n          console.log(\r\n            \"Capture result\",\r\n            orderData,\r\n            JSON.stringify(orderData, null, 2),\r\n          );\r\n        }\r\n      } catch (error) {\r\n        console.error(error);\r\n        resultMessage(\r\n          `Sorry, your transaction could not be processed...&lt;br>&lt;br>${error}`,\r\n        );\r\n      }\r\n    },\r\n  })\r\n  .render(\"#paypal-button-container\");\r\n\r\n\/\/ Example function to show a result to the user. Your site's UI library can be used instead.\r\nfunction resultMessage(message) {\r\n  const container = document.querySelector(\"#result-message\");\r\n  container.innerHTML = message;\r\n}\r\n  <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-2877","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/pages\/2877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/comments?post=2877"}],"version-history":[{"count":3,"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/pages\/2877\/revisions"}],"predecessor-version":[{"id":2880,"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/pages\/2877\/revisions\/2880"}],"wp:attachment":[{"href":"https:\/\/agratajholidays.in\/index.php\/wp-json\/wp\/v2\/media?parent=2877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}