index.html.jst

   1 return async env => {
   2   _out = []
   3   _out.push('<!DOCTYPE html>')
   4   html(lang="en") {
   5     head {
   6       meta(charset="utf-8") {}
   7       meta(http-equiv="x-ua-compatible" content="ie=edge") {}
   8       meta(name="viewport" content="width=device-width,initial-scale=1") {}
   9       link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous") {}
  10       script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous") {}
  11       title {
  12         'Checkout With PayPal NodeJs Demo'
  13       }
  14       style {
  15         .header-bg-color {
  16           color: #fff;
  17           background: -moz-linear-gradient(0deg,#004094 0,#0096d9 50%,#004094 100%);
  18           background: -webkit-gradient(linear,left top,right top,color-stop(0,#004094),color-stop(50%,#0096d9),color-stop(100%,#004094));
  19           background: -webkit-linear-gradient(0deg,#004094 0,#0096d9 50%,#004094 100%);
  20           background: -o-linear-gradient(0deg,#004094 0,#0096d9 50%,#004094 100%);
  21           background: -ms-linear-gradient(0deg,#004094 0,#0096d9 50%,#004094 100%);
  22           background: linear-gradient(90deg,#004094 0,#0096d9 50%,#004094 100%)
  23         }
  24       }
  25     }
  26     body {
  27       div.container {
  28         div.row.header-bg-color.'mb-5'.p-3 {
  29           h2.text-center {
  30             'Checkout with PayPal Demo'
  31           }
  32           h4.text-center {
  33             'Using Orders v2 REST API with PayPal JavaScript SDK'
  34           }
  35           h5.text-center {
  36             'Server-side Integration'
  37           }
  38         }
  39         div.row {
  40           div.col-sm {
  41             div.card {
  42               img.card-img-top.img-responsive(src="https://www.paypalobjects.com/web/res/b0b/e9fea36098a7a8192723a8d3b86b2/img/platform/common/merchantStore/cart/camera-lg.jpg") {}
  43               div.card-body {
  44                 h4.text-center {
  45                   'Sample Sandbox Buyer Credentials'
  46                 }
  47                 table.table.table-striped {
  48                   thead {
  49                     tr {
  50                       th(scope="col") {
  51                         'Buyer Email'
  52                       }
  53                       th(scope="col") {
  54                         'Password'
  55                       }
  56                     }
  57                   }
  58                   tbody {
  59                     tr {
  60                       td {
  61                         'emily_doe@buyer.com'
  62                       }
  63                       td {
  64                         'qwer1234'
  65                       }
  66                     }
  67                     tr {
  68                       td {
  69                         'bill_bong@buyer.com'
  70                       }
  71                       td {
  72                         'qwer1234'
  73                       }
  74                     }
  75                     tr {
  76                       td {
  77                         'jack_potter@buyer.com'
  78                       }
  79                       td {
  80                         '123456789'
  81                       }
  82                     }
  83                     tr {
  84                       td {
  85                         'harry_doe@buyer.com'
  86                       }
  87                       td {
  88                         '123456789'
  89                       }
  90                     }
  91                     tr {
  92                       td {
  93                         'ron_brown@buyer.com'
  94                       }
  95                       td {
  96                         'qwer1234'
  97                       }
  98                     }
  99                     tr {
 100                       td {
 101                         'bella_brown@buyer.com'
 102                       }
 103                       td {
 104                         'qwer1234'
 105                       }
 106                     }
 107                   }
 108                 }
 109               }
 110             }
 111           }
 112           div.col-sm {
 113             h3.text-center {
 114               'Pricing Details'
 115             }
 116             hr {}
 117             form#camera_form {
 118               _out.push('<!-- Cart Details -->')
 119               ' '
 120               input(name="return_url" type="hidden" value="http://localhost/pages/success.html") {}
 121               ' '
 122               input(name="cancel_url" type="hidden" value="http://localhost/pages/success.html") {}
 123               div.form-group {
 124                 label.'col-sm-5'.control-label(for="camera_amount") {
 125                   'Camera'
 126                 }
 127                 div.col-sm {
 128                   input.form-control#camera_amount(type="text" name="item_amt" value="300" readonly="") {}
 129                 }
 130               }
 131               div.form-group {
 132                 label.'col-sm-5'.control-label(for="tax_amt") {
 133                   'Tax'
 134                 }
 135                 div.col-sm {
 136                   input.form-control#tax_amt(type="text" name="tax_amt" value="5" readonly="") {}
 137                 }
 138               }
 139               div.form-group {
 140                 label.'col-sm-5'.control-label(for="insurance_fee") {
 141                   'Insurance'
 142                 }
 143                 div.col-sm {
 144                   input.form-control#insurance_fee(type="text" name="insurance_fee" value="10" readonly="") {}
 145                 }
 146               }
 147               div.form-group {
 148                 label.'col-sm-5'.control-label(for="handling_fee") {
 149                   'Handling Fee'
 150                 }
 151                 div.col-sm {
 152                   input.form-control#handling_fee(type="text" name="handling_fee" value="5" readonly="") {}
 153                 }
 154               }
 155               div.form-group {
 156                 label.'col-sm-5'.control-label(for="shipping_amt") {
 157                   'Estimated Shipping'
 158                 }
 159                 div.col-sm {
 160                   input.form-control#shipping_amt(type="text" name="shipping_amt" value="2" readonly="") {}
 161                 }
 162               }
 163               div.form-group {
 164                 label.'col-sm-5'.control-label(for="shipping_discount") {
 165                   'Shipping Discount'
 166                 }
 167                 div.col-sm {
 168                   input.form-control#shipping_discount(type="text" name="shipping_discount" value="2" readonly="") {}
 169                 }
 170               }
 171               div.form-group {
 172                 label.'col-sm-5'.control-label(for="total_amt") {
 173                   'Total Amount'
 174                 }
 175                 div.col-sm {
 176                   input.form-control#total_amt(type="text" name="total_amt" value="320" readonly="") {}
 177                 }
 178               }
 179               div.form-group {
 180                 label.'col-sm-5'.control-label(for="currency_Code") {
 181                   'Currency'
 182                 }
 183                 div.col-sm {
 184                   input.form-control#currency_Code(type="text" name="currency" value="USD" readonly="") {}
 185                 }
 186               }
 187               hr {}
 188               _out.push('<!-- Checkout Options -->')
 189               div.form-group {
 190                 div.'col-sm-offset-5'.col-sm {
 191                   _out.push('<!-- Container for PayPal Shortcut Checkout -->')
 192                   div#paypalCheckoutContainer {}
 193                   _out.push('<!-- Container for PayPal Mark Redirect -->')
 194                   div#paypalMarkRedirect {
 195                     h4.text-center {
 196                       'OR'
 197                     }
 198                     a.'w-100'.btn.btn-success.btn-block(href="pages/shipping.html" role="button") {
 199                       h4 {
 200                         'Proceed to Checkout'
 201                       }
 202                     }
 203                   }
 204                 }
 205               }
 206             }
 207           }
 208           div.col-sm-4 {
 209             hr.m-5 {}
 210             h3.text-center {
 211               'Readme'
 212             }
 213             ol {
 214               li {
 215                 'Enter REST API credentials in common/config/config.json. You can get your own REST app credentials by creating a REST app with the steps outlined '
 216                 i {
 217                   a(href="https://developer.paypal.com/docs/api-basics/manage-apps/#create-or-edit-sandbox-and-live-apps" target="_blank") {
 218                     'here'
 219                   }
 220                   ' '
 221                 }
 222                 '.'
 223               }
 224               li {
 225                 'Click on \'PayPal Checkout’ button and see the experience.'
 226               }
 227               li {
 228                 'Checkout with PayPal using a buyer sandbox account provided on this page. And you\'re done!'
 229               }
 230               li {
 231                 'In the guest checkout experience, the buyer country can be switched. When switched to one of Germany, Poland, Austria, Netherlands, Italy and Spain, you will be able to choose the alternative payment methods offered in those countries.'
 232               }
 233               li {
 234                 'For example: Selecting \'Germany\' in the country drop down will pre-fill the shipping address on the Shipping Information page. For all other countries not mentioned in step 5, the address has to be manually entered.'
 235               }
 236             }
 237             hr {}
 238             h3.text-center {
 239               'In-Context Checkout integration steps with PayPal JavaScript SDK'
 240             }
 241             ol {
 242               li {
 243                 'Copy the files and folders in the package to the same location where you have your shopping cart page.'
 244               }
 245               li {
 246                 'In order to view Alternative Payment Methods as part of the guest checkout flow, you must add query parameters intent=capture, commit=true, vault=false and buyer-country= and you must provide a supported buyer country'
 247               }
 248               li {
 249                 'Include the following script on your shopping cart page: (For APMs, the layout must be '
 250                 code {
 251                   'vertical'
 252                 }
 253                 ' and setting up the payment in the alternative payment method '
 254                 a(href="https://developer.paypal.com/docs/checkout/integration-features/alternative-payment-methods/#availability" target="_blank") {
 255                   'supported currency'
 256                 }
 257                 ' is required for the alternative payment method to render.)'
 258                 pre {
 259                   code {
 260                     '\r\n        paypal.Buttons({\r\n        env: \'sandbox\', // sandbox | production\r\n    \r\n            // Set style of buttons\r\n            style: {\r\n                layout: \'vertical\',   // horizontal | vertical <-Must be vertical for APMs\r\n                size:   \'responsive\',   // medium | large | responsive\r\n                shape:  \'pill\',         // pill | rect\r\n                color:  \'gold\',         // gold | blue | silver | black,\r\n                fundingicons: false,    // true | false,\r\n                tagline: false          // true | false,\r\n            },\r\n    \r\n        // payment() is called when the button is clicked\r\n        createOrder: function() {\r\n    \r\n            return fetch(\'/my-server/create-paypal-transaction\')\r\n                .then(function(res) {\r\n                    return res.json();\r\n                }).then(function(data) {\r\n                    return data.orderID;\r\n                });\r\n        },\r\n    \r\n        // onAuthorize() is called when the buyer approves the payment\r\n        onApprove: function(data, actions) {\r\n    \r\n            return fetch(\'/my-server/capture-paypal-transaction\', {\r\n                    body: JSON.stringify({\r\n                    orderID: data.orderID\r\n                    })\r\n                }).then(function(res) {\r\n                    return res.json();\r\n                }).then(function(details) {\r\n                    alert(\'Transaction funds captured from \' + details.payer_given_name);\r\n                });\r\n        }\r\n    }).render(\'#paypal-button-container\');'
 261                   }
 262                   '\r\n                '
 263                 }
 264               }
 265               li {
 266                 'Open your browser and navigate to your Shopping cart page. Click on \'Checkout with PayPal\' button and complete the flow.'
 267               }
 268               li {
 269                 'You can use the sample Buyer Sandbox credentials provided on index/home page.'
 270               }
 271               li {
 272                 'Refer to '
 273                 a(href="https://developer.paypal.com/docs/checkout/" target="_blank") {
 274                   'PayPal Developer'
 275                 }
 276                 ' site for detailed guidelines.'
 277               }
 278               li {
 279                 'Click '
 280                 a(href="https://developer.paypal.com/docs/api/orders/v2/" target="_blank") {
 281                   'here'
 282                 }
 283                 ' for the API reference.'
 284               }
 285             }
 286           }
 287         }
 288       }
 289       _out.push('<!-- Javascript Import -->')
 290       script(src="../js/config.js") {}
 291       _out.push('<!-- PayPal In-Context Checkout script -->')
 292       script(type="text/javascript") {
 293         init_smart_buttons = (() => {
 294           paypal.Buttons({
 295             env: "sandbox",
 296             style: {
 297               layout: "vertical",
 298               size: "responsive",
 299               shape: "pill",
 300               color: "gold",
 301               fundingicons: false,
 302               tagline: false
 303             },
 304             createOrder: function() {
 305               return new Promise((resolve, reject) => {
 306                 $.ajax({
 307                   type: "POST",
 308                   url: "api/createOrder.json",
 309                   data: serialize(document.getElementById("camera_form")),
 310                   success: function(response) {
 311                     return response;
 312                   },
 313                   error: function(error) {
 314                     reject(error);
 315                   }
 316                 }).then(function(response) {
 317                   console.log("Order ID: " + response.id);
 318                   resolve(response.id);
 319                 });
 320               });
 321             },
 322             onApprove: function(data, actions) {
 323               return fetch("api/getOrderDetails.json", {
 324                 method: "GET"
 325               }).then(function(res) {
 326                 return res.json();
 327               }).then(function(res) {
 328                 window.location.href = "pages/success.html";
 329               });
 330             }
 331           }).render("#paypalCheckoutContainer");
 332         });
 333       }
 334       _out.push('<!-- jQuery (necessary for Bootstrap\'s JavaScript plugins) -->')
 335       script(src="https://code.jquery.com/jquery.js") {}
 336     }
 337   }
 338   env.site.serve(env, 200, Buffer.from(_out.join('')), 'index.html.jst')
 339 }