Obtain the complete shipping address with the 'addressLines' included using Apple Pay

Currently working on integrating Apple Pay WEB using JS and Braintree as the payment provider. In order to calculate US sales tax for the order, I need to gather certain information.

The user initiates the payment process by clicking on the "Pay with Apple Pay" button, which brings up the Apple Pay payment sheet requiring a shipping address including postal address, zip code, name, and email.

However, when calling the session.onshippingcontactselected function, I am only able to retrieve limited information such as locality, administrative area, postal code, country, and countryCode from the shipping contact. This means I cannot access addressLines which contain the street name and number necessary for accurate tax calculation.

Apple's documentation states that they provide the full address only after the user authorizes the payment, which is too late in my case since I need the tax amount prior to placing the order or the user making the payment.

Seeking a workaround for this issue. Any suggestions?

Answer №1

Just a heads up - I am an employee at Braintree. If you need more information, feel free to reach out to customer support.

Since Apple provides this data directly, there is no way to bypass the redacted shippingContact info during the pre-authorized session with Braintree's integration. If you require the complete address for tax calculation purposes, you will have to gather it from your customer earlier in the payment process or find an alternative method to calculate tax based on the details available in the shippingContact object. I suggest sending an email to our customer support team to explore possible solutions further.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes

I am facing a challenge with overriding an object method defined in a JavaScript (ES5) function-based class: var JSClass = function() { this.start = function() { console.log('JSClass.start()'); } } When I call the start() method, it pri ...

Exploring various websites simultaneously using window.open

As a newcomer to javascript, I have encountered an issue with the window.open() method that I would like some help with. In my code, I take a user string, modify it in different ways, and then search for these variations. The intention is to open a new wi ...

When moving the child grid layout, it often results in unintentionally moving the parent grid layout along with

Currently, I am utilizing React Grid Layout from this repository: https://github.com/STRML/react-grid-layout. My task involves creating a draggable parent div along with a draggable child div. While the functionality works smoothly for the divisions indiv ...

Tips on entering a text field that automatically fills in using Python Selenium

One of the challenges I am facing on my website is an address input text field that gets automatically populated using javascript. Unlike a drop-down field where you can select values or a standard text field where you can manually type in information, thi ...

Tips for resolving the issue: Uncaught (in promise) SyntaxError: Unexpected end of input in Fetch API

When I click the button, I am executing this function. Despite adding a header in my API, an error is still being displayed. Here is the code snippet for the function: let getData = () => { console.log("getData function started"); ...

Adding the data from an ajax object response to an array

I'm encountering an issue where my Ajax response is not being properly looped through each object and pushed into the array. I've been stuck on this problem for quite some time now. The Ajax response looks like this... {type:'blog_post&apo ...

Adjust the styling of the anchor tag within the selected div by utilizing jQuery

I am struggling with changing the color of a specific anchor tag when clicked inside a div with class .product_wishlist. Currently, all anchor tags within .pw div are changing colors. Is there a way to apply selected css only to the clicked element? Any he ...

The rotation function of a THREE.js object seems to be malfunctioning

Currently, I am facing an issue with a Blender object that I have successfully displayed on my web page using THREE.js. However, for some reason the object is not rotating when my loop function is called. In my approach to working with JavaScript, I am tr ...

Changing a value to display with exactly 2 decimal places using jQuery

Similar Question: JavaScript: how to format a number with exactly two decimals Having successfully added values into a div with a total using some script, I attempt to convert those values into decimal numbers by dividing them by 100 to mimic currency ...

When navigating to a new route using history.push in React, it's important to ensure that the correct state is

My goal is to implement a smooth exiting animation with framer motion based on the user's current route and next destination. I specifically want the background to slide away only when transitioning from route A to route D. To achieve this, I decided ...

Tips for adapting my custom input component for compatibility with vee-validate?

I recently developed an input component for my Vue project and integrated it within my forms. My aim is to implement vee-validate for validating the inputs. Initially, I attempted to validate my component like any regular input field. However, upon encoun ...

Items in the Vue.Draggable display can be arranged on both the left and right

Recently delving into Vue.js, I am utilizing Vuedraggable for item dragging in my project. Currently, the items in the draggable div are shown as Text 1 Text 2 Text 3 Text 4 Is there a way to rearrange them to display like this? Text 1 Text 2 Text 3 T ...

Utilizing JavaScript to trigger the :hover pseudo-class and implement event transfers

Consider this situation: You have a scenario where two images are stacked on top of each other. The image with the highest z-index is transparent and handles click events, similar to Google's Map API, while the image below is for visual representatio ...

Implementing state management with Vue.js

After creating a login page and setting conditions to display different NAVBARs based on the user's login status, I encountered an issue where the rendering seemed to be delayed. In the login process, I utilized local storage to store a token for auth ...

The new experimental appDir feature in Next.js 13 is failing to display <meta> or <title> tags in the <head> section when rendering on the server

I'm currently experimenting with the new experimental appDir feature in Next.js 13, and I've encountered a small issue. This project is utilizing: Next.js 13 React 18 MUI 5 (styled components using @mui/system @emotion/react @emotion/styled) T ...

How can the label value be updated in a material ui slider component?

code snippet: https://codesandbox.io/s/runtime-worker-kxse3?file=/src/App.js Can anyone help me ensure that the labels in the bubble display the same values as the text (3, 5, 7, 10)? ...

Craft dynamic SVG components using TypeScript

Looking to generate a correctly formatted SVG element using TypeScript: createSVGElement(tag) { return document.createElementNS("http://www.w3.org/2000/svg", tag); } Encountering an issue with tslint: Error message: 'Forbidden http url in str ...

Is a component updating an unregulated text input to be controlled?

Whenever I attempt to input information into the form and save it in the state, I encounter the following issue: Warning: A component is converting an uncontrolled text input to a controlled one. Input elements should not transition between being contro ...

How can we map a promise that resolves to foo to a new promise that resolves to bar?

I am working on a function that uses an XMLHttpRequest to retrieve data and returns a promise with the response. But now I want to modify it so that the promise only contains a specific string from the response. Instead of resolving to response = {status ...

Eliminate any blank spaces in the string before comparing the option value to determine whether the DIV should be

I am trying to create a function that hides or shows a specific DIV based on the option value selected from the product. Due to automatic addition of option values by Shopify, some options have more than one word with spaces in between. Since I cannot chan ...