# ApplePay JS SDK improvements

# Old button presentation

if (!window.ApplePaySession) {
  console.error('This device does not support Apple Pay');
}

if (!ApplePaySession.canMakePayments()) {
  console.error('This device is not capable of making Apple Pay payments');
}

const applepay = paypal.Applepay();

applepay.config()
.then(applepayConfig => {
  if (applepayConfig.isEligible) {
    document.getElementById("applepay-container").innerHTML = '<apple-pay-button id="btn-appl" buttonstyle="black" type="buy" locale="en">';
  }
})
.catch(applepayConfigError => {
  console.error('Error while fetching Apple Pay configuration.');
});

# New button presentation

if (!window.ApplePaySession) {
  console.error('This device does not support Apple Pay');
}

if (!ApplePaySession.canMakePayments()) {
  console.error('This device is not capable of making Apple Pay payments');
}

const applepay = paypal.Applepay();

applepay.config()
.then(applepayConfig => {
    // applepayConfig has data required to create ApplePaySession.
    document.getElementById("applepay-container").innerHTML = '<apple-pay-button id="btn-appl" buttonstyle="black" type="buy" locale="en">';
})
.catch(applepayConfigError => {
  console.error('Error while fetching Apple Pay configuration.');
});

# Old confirm

session.onpaymentauthorized = (event) => {
  console.log('Your billing address is:', event.payment.billingContact); 
  console.log('Your shipping address is:', event.payment.shippingContact); 
  // The `billingContact` and `shippingContact` object use the `ApplePayPaymentContact` format. 
  // Find more details about this object at this URL: 
  // https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentcontact
  fetch(`/api/orders`, { 
    method: 'post' 
    body: 
    // You can use the "body" parameter to pass optional, additional order information, such as:
    // amount, and amount breakdown elements like tax, shipping, and handling
    // item data, such as sku, name, unit_amount, and quantity
    // shipping information, like name, address, and address type
    // Name and address information is passed by `event.payment.shippingContact`.
  }) 
  .then(res => res.json()) 
  .then((createOrderData) => { 
    var orderId = createOrderData.id;
    applepay.confirmOrder({ 
      orderID: orderId, 
      token: event.payment.token, 
      billingContact: event.payment.billingContact      
    })
    .then(confirmResult => {
      session.completePayment(ApplePaySession.STATUS_SUCCESS);     
      // Submit approval to the server and authorize or capture the order. 
      fetch(`/api/orders/${orderId}/capture`, { 
        method: "post", 
      }) 
      .then(res => res.json()) 
      .then(captureResult => { 
        console.log(captureResult); 
      }) 
      .catch(captureError => console.error(captureError)); 
    }) 
    .catch(confirmError => {
      if (confirmError) { 
        console.error('Error confirming order with applepay token'); 
        console.error(confirmError);
        session.completePayment(ApplePaySession.STATUS_FAILURE); 
      }    
    });
  });  
};

# New confirm

session.onpaymentauthorized = (event) => {
  console.log('Your billing address is:', event.payment.billingContact); 
  console.log('Your shipping address is:', event.payment.shippingContact); 
  // The `billingContact` and `shippingContact` object use the `ApplePayPaymentContact` format. 
  // Find more details about this object at this URL: 
  // https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentcontact
  fetch(`/api/orders`, { 
    method: 'post' 
    body: 
    // You can use the "body" parameter to pass optional, additional order information, such as:
    // amount, and amount breakdown elements like tax, shipping, and handling
    // item data, such as sku, name, unit_amount, and quantity
    // shipping information, like name, address, and address type
    // Name and address information is passed by `event.payment.shippingContact`.
  }) 
  .then(res => res.json()) 
  .then((createOrderData) => { 
    var orderId = createOrderData.id;
    applepay.confirmOrder({ 
      orderID: orderId, 
      onPaymentAuthorizedEvent: event,        
      billingInfo: { 
          name: {
              fullName: "John Doe"
          },
          address: {
              addressLine1: "2211 N1St St",
              adminArea2: "San Jose",
              adminArea1: "CA",
              countryCode: "US",
              postalCode: "95131"
          }
      }
      //  billingInfo is optional, if provided by merchant it will override the billing info in onPaymentAuthorizedEvent.
    })
    .then(confirmResult => {
      session.completePayment(ApplePaySession.STATUS_SUCCESS);     
      // Submit approval to the server and authorize or capture the order. 
      fetch(`/api/orders/${orderId}/capture`, { 
        method: "post", 
      }) 
      .then(res => res.json()) 
      .then(captureResult => { 
        console.log(captureResult); 
      }) 
      .catch(captureError => console.error(captureError)); 
    }) 
    .catch(confirmError => {
      if (confirmError) { 
        console.error('Error confirming order with applepay token'); 
        console.error(confirmError);
        session.completePayment(ApplePaySession.STATUS_FAILURE); 
      }    
    });
  });  
};