app/Plugin/StripePaymentGateway42/Resource/assets/js/stripe_request_button.js.twig line 1

Open in your IDE?
  1. <script>
  2. var stripe = Stripe("{{ stripeConfig.PublishableKey }}");
  4. var registerPayButton = function(option){
  6.     var _DEFAULT = {
  7.         button_id : "payment-request-button",
  8.         shipping_fetch_url : '{{ url("plugin_stripe_pr_shipping") }}',
  9.         pay_url   : "{{ url('plugin_stripe_pr_pay') }}",
  10.         getData     : null,
  12.         onSuccess   :   null,
  14.         request_data: {
  15.             country     :   "JP",
  16.             currency    :   "jpy",
  17.             total       :   {
  18.                 label: "{{ 'stripe_payment_gateway.payrequest.pay_now_label'|trans }}",
  19.                 amount: 0
  20.             },
  21.             requestPayerName    : true,
  22.             requestPayerEmail   : true,
  23.             requestPayerPhone   : true,
  24.             requestShipping     : true
  25.         }
  26.     }
  27.     option = Object.assign(_DEFAULT, option )
  29.     var is_apple = false;
  31.     var paymentRequest = stripe.paymentRequest(option.request_data)
  32.     
  33.     var elements = stripe.elements();
  34.     var prButton = elements.create('paymentRequestButton', {
  35.         paymentRequest: paymentRequest,
  36.     });
  37.     
  38.     paymentRequest.canMakePayment().then(function(result) {
  39.         if (result) {
  40.             prButton.mount('#' + option.button_id);
  41.             if(result.applePay){
  42.                 is_apple = true;
  43.             }
  44.         } else {
  45.             document.getElementById(option.button_id).style.display = 'none';
  46.         }
  47.     });
  49.     var shippingOptions = null;
  50.     var selectedShipping = null;
  51.     var currentAmount = 0;
  53.     paymentRequest.on('shippingaddresschange', function(ev){
  54.         if(ev.shippingAddress.country !== 'JP'){
  55.             ev.updateWith({status: 'invalid_shipping_address'});
  56.         }else{
  57.             console.log(ev.shippingAddress);
  58.             $.ajax({
  59.                 type: 'POST',
  60.                 data: {
  61.                     shippingAddress : ev.shippingAddress,
  62.                     data            :   option.getData()
  63.                 },
  64.                 url: option.shipping_fetch_url,
  65.                 success: function(result) {
  66.                     if(result.status && result.status == "success"){
  67.                         shippingOptions = result.shippingOptions;
  68.                         if (!shippingOptions.length) {
  69.                             ev.updateWith({ status: 'invalid_shipping_address' })
  70.                         }
  71.                         shippingOptions = result.shippingOptions;
  72.                         selectedShipping = shippingOptions[0];
  73.                         currentAmount = result.amount;
  75.                         ev.updateWith({
  76.                             status  :   'success',
  77.                             shippingOptions :   shippingOptions,
  78.                             total   : {
  79.                                 label: option.request_data.total.label,
  80.                                 amount: result.amount + selectedShipping.amount
  81.                             },
  82.                             displayItems : [
  83.                                 {
  84.                                     label: "小計",
  85.                                     amount: result.amount
  86.                                 },
  87.                                 {
  88.                                     label: "送料 (" + selectedShipping.label + ")",
  89.                                     amount: selectedShipping.amount
  90.                                 }
  91.                             ]
  92.                         })
  94.                     }else{
  95.                         ev.updateWith({ status: 'invalid_shipping_address' })
  96.                     }
  97.                 },
  98.                 error: function(error) {
  99.                     ev.updateWith({ status: 'invalid_shipping_address' })
  100.                 }
  101.             });
  102.         }
  103.     })
  104.     paymentRequest.on("shippingoptionchange", function(ev) {
  105.         ev.updateWith({
  106.             status: 'success',
  107.             shippingOptions: shippingOptions,
  108.             total: {
  109.                 label: option.request_data.total.label,
  110.                 amount: currentAmount + ev.shippingOption.amount
  111.             },
  112.             displayItems : [
  113.                 {
  114.                     label: "小計",
  115.                     amount: currentAmount
  116.                 },
  117.                 {
  118.                     label: "送料 (" + ev.shippingOption.label + ")",
  119.                     amount: ev.shippingOption.amount
  120.                 }
  121.             ]
  122.         })
  123.     })
  124.     paymentRequest.on('paymentmethod', function(ev){
  125.         var data = option.getData()
  126.         console.log(ev);
  127.         ev['data'] = data;
  128.         ev['applePay'] = is_apple;
  129.         ev.complete('success');
  130.         loadingOverlay('show');
  131.         $.ajax({
  132.             type    :   "POST",
  133.             data    :   ev,
  134.             url     :   option.pay_url,
  135.             success: function(result) {
  136.                 handleServerResponse(result)
  137.             },
  138.             error: function(error) {
  139.                 alert("{{ 'stripe_payment_gateway.payrequest.connection_error'|trans }}");
  140.                 loadingOverlay('hide');
  141.             }
  142.         })
  143.     })
  144.     function handleServerResponse(response) {
  145.         if (response.status === "success") {
  146.             // Show success message
  147.             if(option.onSuccess){
  148.                 option.onSuccess();
  149.             }else{
  150.                 loadingOverlay('hide');
  151.                 alert("{{ 'stripe_payment_gateway.payrequest.success'|trans }}")
  152.             }
  153.         } else if (response.status === "requires_action") {
  154.             // Use Stripe.js to handle required card action
  155.             loadingOverlay('hide');
  157.             stripe.handleCardAction(
  158.                 response.secret
  159.             ).then(handleStripeJsResult);
  160.         } else {
  161.             // Show error from server on payment form
  162.             alert("{{ 'stripe_payment_gateway.payrequest.payment_failed'|trans }}")
  163.             loadingOverlay('hide');
  164.         }
  165.         
  166.     }
  167.     function handleStripeJsResult(result) {
  168.         if (result.error) {
  169.             // Show error in payment form
  170.         } else {
  171.             // The card action has been handled
  172.             // The PaymentIntent can be confirmed again on the server
  173.             loadingOverlay('show');
  175.             $.ajax({
  176.                 type    :   "POST",
  177.                 data    : { payment_intent_id: result.paymentIntent.id },
  178.                 url     :   option.pay_url,
  179.                 
  180.             }).then(handleServerResponse);
  181.         }
  182.     }
  184.     return paymentRequest;
  185. }
  186. </script>