Apple pay- Ecommerce

In just a month and a half applying Square, we had orders total above $45,000 on our eCommerce site.

We’re now trying to allow apple users (ios) to pay on our ecommerce website (safari) using their apple pay.
Please note, we are not using an app. This is simply for apple users that are purchasing from our website.

Is it apple pay WEB we need to use or IOS ?

It would be apple pay web :slight_smile:. If you ever venture into the app world, and use In-App Payments SDK, then you would need the iOS Apple Pay as well. Please let me know if you have additional questions or concerns!

1 Like

Great. Because the IOS seems extremely complicated!
I know Square refunds the fee when we refund customers in full.
Question 1: Does apple pay have some protection etc etc?

Question 2:
Currently, when a user is submitting payment, we:

  1. Create createCustomerCard in square
  2. Create Payment or Use existing Credit card customer saved

With Web apple Pay, I’m assuming we have to do an entirely new “create payment”, correct?

Question 3:
Are there any PHP samples on how to process a Web Apple Pay ? :confused:

  1. What sort of protection are you referring to? You can definitely refund an Apple Pay payment (since you mentioned refunds), but I don’t think that’s what you’re asking, sorry for misunderstanding.
  2. With digital wallets (which includes Apple Pay), you only need to do CreatePayment using the nonce generated from Apple Pay as the source_id. You actually cannot save the card on file due to how Apple/Google generates tokens for them unfortunately.
  3. https://developer.squareup.com/docs/payment-form/add-digital-wallets/apple-pay goes through what needs to be changed, but mostly it’s your Javascript code that will be changing, nothing about your PHP per se. You would need a front-end HTML element for holding the apple pay button, much like the credit card fields, which the above document includes (step 4). Let me know if that helps.
1 Like

Same protection as if will square refund in full when we refund customer in full?
Will square be as protective of us with disputes? or will apple interfere and more easier side with customer?

Ok sounds simple… I can’t even get the Apple pay BUTTON to show for gods sake!
I followed the link you provided to every single command.

Is there a JS file that is complete and is configured both for web apple pay and normal credit card? Maybe there’s a comma or something I missed. Because I can see the border of the button, the apple icon and color inside the button is not visible :confused:

As far as I know it should be the same as regular card payments in regards to disputes/protection.

As for the button not showing: have you already went through the documentation to set it up correctly? You need to set up the verification on your developer dashboard after setting up the merchant identifier within the Apple portal. The code in step 6 of the above documentation hides the button if Apple Pay fails to initialize or is not supported (methods.applePay === true). Note it will also work in the Safari browser as well, and if you have apple pay wallet set up on your device, so there’s several things to look out for.

With all that said, the PHP Example on Github is a fully working example that has all the wallets enabled, as far as I see.

1 Like

Ok I kinda got it to work but on my iphone. I Was using firefox to test.
Too bad I can’t test on my PC by using safari.

So I noticed the apple pay input thing is not inside the:

So how will it send the payment info to “process-card.php” in that case?

Question 2:
So I do have this in JS for charging card:
“cardNonceResponseReceived: function(errors, nonce, cardData) {”

Should I still keep it, and simply also add the following below for ONLY The apple pay:
“createPaymentRequest: function () {” ?

Thanks.

You should be able to get it to work using Safari (I meant to say it only works in Safari, in my last message), but you need to set up Apple Pay on your mac computer first.

Not inside the…what, sorry? Seems like something wasn’t entered in your message. In any case, once the customer submits in the Apple Pay modal pop up, it should still trigger cardNonceResponseReceived with the nonce, so it should be the exact same flow. The createPaymentRequest is what is triggered when the customer clicks on the Apple Pay button (basically, what you pass to Apple). You will need both functions to charge correctly.

1 Like

It’s so frustrating. The “apple pay” button submits the form no matter what, it fires the form just clicking on it.
When you click on the button user gets the option to actually pay or cancel so it should not actually submit the form until the customer clicks on pay with apple pay, AND confirms payment.

Also I want a javascript function to be run first when clicking on pay with apple, to check if everything is in order BEFORE even firing the apple pay.

Any ideas on how to fix this? I been trying for an entire week literally every approach I tried failed :frowning: :frowning_face:

Do you mind sharing your Javascript file here (or message me) and I can take a closer look at your code to see what might be happening?

1 Like

Ok I just mailed you the files.
So in “index.php” there is a JS function called (this function must run first to check if everything is in order before even thinking about processing payment):

function form_submit(eventen, payment_method){

Paying with credit card works fine if there’s an issue in that function, a simple “return false” will not submit payment.

The problem is, as SOON as I click on the apple pay button, it INSTANTLY submits the form!
When it should use the form_submit function first, check if everything is alright and then submit.

And then there’s another issue, what if we succeed in not letting form to submit, what if customer CANCELS the apple pay after click on it? It seems it submits the form regardless of what I do!! :frowning:
So sorry for the inconvenience.

I took a look at your files. It’s because you have the apple pay button inside the “form” and since it’s a button, it’s attempting to submit the form, since you’re not stopping the submit functionality. The “Place Order” button doesn’t have this problem because it calls onGetCardNonce which uses event.preventDefault() which means “do not submit this form” (the default functionality).

The best solution would just be to move the Apple Pay button outside of the “form” section so it doesn’t submit the form. You can also remove the “form_submit” function as it doesn’t really add anything (the apple pay button will automatically work as it knows to call createPaymentRequest etc). This would reduce your code and make it simpler.

Ugh can seriously not believe I missed that !! Thank you so much!!!

1 Like