apple-pay-2.html

{# {% if currentUser %}
    {% redirect 'checkout/addresses' %}
{% endif %}

#}

{% extends '_layouts/checkout' %}

{% block content %}

<div class="grid-container new-section-break">
    <div class="grid-x grid-padding-x">
        <div class="medium-6 cell">
	        
	      
	      
	      <li class="CartCheckout-applePay" id="apple-pay-option" style="display: none;">
	<h5 class="CartCheckout-title">
	<div id="apple-pay-header"></div>
    </h5>
	<style>
	  #apple-pay-button {
	    display: block;
	    background-color: black;
	    background-image: -webkit-named-image(apple-pay-logo-white);
	    background-size: 100% 100%;
	    background-origin: content-box;
	    background-repeat: no-repeat;
	    width: 100%;
	    height: 44px;
	    padding: 10px 0;
	    border-radius: 10px;
	  }
	</style>

	<style>
	  #apple-pay-header {
	    display: block;
	    background-color: transparent;
	    background-image: -webkit-named-image(apple-pay-logo-black);
	    background-size: 100% 100%;
	    background-origin: content-box;
	    background-repeat: no-repeat;
	    width: 60px;
	    height: 44px;
	    padding: 10px 0;
	    border-radius: 10px;
	  }
	</style>
	

{% set statesByAbbreviation = {} %}

{% set statesByName = [] %}

{% for state in craft.commerce.states.allStates if state.countryId == 233 %}


 {% set statesByAbbreviation = statesByAbbreviation|merge({(state.abbreviation):(state.id) }) %}
 {% set statesByName = statesByName|merge({(state.name):(state.id) }) %}
 
{% endfor %}










	<div class="CartCheckout-details">
		<form method="POST" id="ApplePayCheckout--update">
		<input type="text" name="action" value="commerce/cart/update-cart"/>
	    <input type="text" name="orderNumber" value="{{ cart.number }}"/>
		<input type="text" name="billingAddressSameAsShipping" value="1">
			    <input type="text" name="gatewayId" value="4">

		{{ csrfInput() }}
	</form>
	<form method="POST" id="ApplePayCheckout--checkout">
	    <input type="text" name="action" value="commerce/payments/pay"/>
	    <input type="hidden" name="email" value="{{ cart.email }}"/>
	    	    <input type="text" name="orderNumber" value="{{ cart.number }}"/>
	    <input type="text" name="gatewayId" value="4">
                    {{ redirectInput('/checkout/success?number='~cart.number) }}
	    {{ csrfInput() }}
			<a id="apple-pay-button"></a>
	</form>

    </div>
    
 



    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
	{% set publishableKey = '' %}
	{% for method in craft.commerce.gateways.allCustomerEnabledGateways %}
		{# Replace 'method.id' value with whatever the ID of your Apple Pay/Stripe method is. This can be simplified if you only have one payment method. #}
		{% if method.id == 4 %}
			{% set publishableKey = method.settings.publishableKey %}

		{% endif %}
	{% endfor %}
    <script>
	Stripe.setPublishableKey('{{publishableKey}}');

		Stripe.applePay.checkAvailability(function(available) {
		  if (available) {
		    document.getElementById('apple-pay-option').style.display = 'block';
		  }
		});

		document.getElementById('apple-pay-button').addEventListener('click', beginApplePay);


		function beginApplePay() {
		  var paymentRequest = {
		    countryCode: 'US',
		    currencyCode: 'USD',
		    // Set your required contact fields here to be passed back to Craft.
		    requiredShippingContactFields: ["postalAddress","name","phone","email"],
		    total: {
		      label: '{{ siteName }}',
		      amount: '{{cart.totalPrice|round(2)}}'
		    }
		  };
		  var session = Stripe.applePay.buildSession(paymentRequest,
		    function(result, completion) {


var statesByName = {{ statesByName|json_encode|raw}}
var statesByAbbr = {{ statesByAbbreviation|json_encode|raw}}
			
	



		      completion(ApplePaySession.STATUS_SUCCESS);
		      var $form = $('#ApplePayCheckout--checkout');
		      var $form2 = $('#ApplePayCheckout--update');
		      // Map result fields to Craft fields
		      
		      var theState = result.shippingContact.administrativeArea;
		      
		      if (theState.length == 2) {
		     
		       var stateId = statesByAbbr[theState];
		      
		      } else {
		     	var stateId = statesByName[theState];
		      }
		      		  
		      $('#ApplePayCheckout--update input').each(function() { $(this).attr('type','text'); });
		      
			  $form2.append($('<input type="text" name="email" />').val(result.shippingContact.emailAddress));
			  $form2.append($('<input type="text" name="shippingAddress[firstName]" />').val(result.shippingContact.givenName));
			  $form2.append($('<input type="text" name="shippingAddress[lastName]" />').val(result.shippingContact.familyName));
			  $form2.append($('<input type="text" name="shippingAddress[address1]" />').val(result.shippingContact.addressLines[0]));
			  $form2.append($('<input type="text" name="shippingAddress[address2]" />').val(result.shippingContact.addressLines[1]));
			  $form2.append($('<input type="text" name="shippingAddress[city]" />').val(result.shippingContact.locality));
			  $form2.append($('<input type="text" name="shippingAddress[stateValue]" />').val(stateId));
			  $form2.append($('<input type="text" name="shippingAddress[zipCode]" />').val(result.shippingContact.postalCode));
			  $form2.append($('<input type="text" name="shippingAddress[phone]" />').val(result.shippingContact.phoneNumber));
			  $form2.append($('<input type="text" name="shippingAddress[countryId]" />').val(233));
			  $form.append($('<input type="text" name="stripeToken" />').val(result.token.id));
			  
			  
			 			  
			  // Submit update cart to add shipping info, then pay form to submit payment info
			 // $.post('/commerce/cart/update-cart',  );
			  
		 $.ajax({
            type: "POST",
            dataType: 'json',
            headers: {
                "X-CSRF-Token" : '{{ craft.app.request.csrfToken }}',
            },
            url: '/commerce/cart/update-cart',
            data: $('#ApplePayCheckout--update').serializeArray(),
            success: function(data){
	            
	            
				$.ajax({
				    url: '',
				    data: {
				        '{{ craft.config.csrfTokenName|e('js') }}': '{{ craft.request.csrfToken|e('js') }}',
				        'action': 'commerce/cart/get-cart'
				    },
				    success: function(data) {
				        console.log(data);
				        					           var $form = $('#ApplePayCheckout--checkout');
			
			        	    $form.append('<input type="submit" value="Submit" />');
				    },
				    dataType: 'json'
				});            

			
			       
			       

            },
            fail: function(data) {
	            console.log('fail');
	           console.log(data); 
            }
        });

	        //    $form.get(0).submit();



			  //$form.get(0).submit();

		  }, function(error) {
			// Return error message to cart page.
			console.log(error);
			
			console.log(error.message);
			//window.location = "/cart?error=" + error.message;
		  });

		  session.oncancel = function() {
		    //console.log("User hit the cancel button in the payment window");
		  };

		  session.begin();
		}
    </script>
</li>

	      
	       
	       <hr>
	        
	   </div>
</div>
{% endblock %}