Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue when you want to dynamically change the amount passed to ApplePay #93

Open
Quatra opened this issue Oct 10, 2024 · 0 comments
Open

Comments

@Quatra
Copy link

Quatra commented Oct 10, 2024

Context:
We have on the page a control that is used to add promotion code and gift cards. On the page load, we do not know the amount of the order because it can change depending on user input.

Problem
In GooglePay, we are able to create another variable for a card like this:

const card = GlobalPayments.apm.form('#mycontainer.id', {
    amount: amount,
    style: "gp-default",
    apms: [GlobalPayments.enums.Apm.GooglePay]
});

We are also able to bind the "token-success" to our custom function. What it does in the DOM is that it creates one iframe for each call, it is not ideal, but the browser is not complaining.
However, when we do that for ApplePay, we have an error saying that a control already exists in the DOM and cannot be added again.
The problem is due to the ApplePay SDK that uses the "customElements" to add data in it. When we create the card object, it calls the Apple SDK to add data to the customElements again and fails.

Proposed Solution
I do have a workaround that you guys can add it to the next release or not or if you find an alternative, let me know.
In short, we simply do not add the ApplePay sdk to the DOM again and call the function onApplePayLoaded directly instead.

function addApplePayCDN() {
    // Edit Begin

    if (customElements && customElements.get("apple-pay-merchandising-modal")) {
        onApplePayLoaded();
        return;
    }

    // Edit End

    var script = document.createElement("script");
    script.onload = onApplePayLoaded;
    script.src = "https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js";
    document.body.appendChild(script);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant