Credit card issue

Hi Bryan,

I’ve spent 7 hours trying to figure out how to get the token in PHP from the html form.
I truly don’t understand the tokenize page you sent.

I’m using this exact code to take payment: web-payments-quickstart/card.html at main · square/web-payments-quickstart · GitHub

Am I supposed to add something more to the html/js code so it submits the token?
I’m sorry I’m trying to not do 100 messages back and forward honestly I’m pretty lost here :confused:

Are you getting the token when the form submits? Also have you seen our PHP example? :slightly_smiling_face:

That’s what I’m trying to figure out.
The link you gave me is what I’ve used to get the $token, please view Question 2 above at the bottom (where it ends with: print_r($data); // = gives empty result )

Question 1:
Can you advise if that code above is all I need to get the token?
If it is, the error must be from the html/js side.
Although after running “file_get_contents(‘php://input’);”, I do see there is a variable called “nds-pmd” it has bunch of jibberish in it not sure if that means something

Question 2:
By the way, “const paymentResponse = await fetch(‘/payment’, {
does this refer to a FOLDER “payment” on the webserver by any chance?
Because I do have a “payment.php” in the sdk /src/Models. Should it not be instead:
const paymentResponse = await fetch(‘/src/Models/payment’, { ?

Question 3:
Can you kindly advise if this HTML/JS is enough to make a payment? web-payments-quickstart/card.html at main · square/web-payments-quickstart · GitHub
I’m trying to see if there’s anything missing from this code. If it’s not I’ll just use this and the rest will be up to the PHP I just want to make sure my HTML+JS (That’s same as this link) is without issues.

when migrating, have you encountered many errors? I have followed the php example and the readne file exactly. I keep getting stuck with this error…

Fatal error : Uncaught TypeError: Argument 1 passed to Square\ApiHelper::appendUrlWithTemplateParameters() must be of the type string, null given, called in D:\vhosts\nac-issa.org\httpdocs\SquareEcom\vendor\square\square\src\SquareClient.php on line 304 and defined in D:\vhosts\nac-issa.org\httpdocs\SquareEcom\vendor\square\square\src\ApiHelper.php:47 Stack trace: #0 D:\vhosts\nac-issa.org\httpdocs\SquareEcom\vendor\square\square\src\SquareClient.php(304): Square\ApiHelper::appendUrlWithTemplateParameters() #1 D:\vhosts\nac-issa.org\httpdocs\SquareEcom\vendor\square\square\src\Apis\LocationsApi.php(176): Square\SquareClient->getBaseUri() #2 D:\vhosts\nac-issa.org\httpdocs\SquareEcom\utils\location-info.php(34): Square\Apis\LocationsApi->retrieveLocation() #3 D:\vhosts\nac-issa.org\httpdocs\SquareEcom\utils\location-info.php(60): LocationInfo->__construct() #4 D:\vhosts\nac-issa.org\httpdocs\SquareEcom\index.php(3): include(‘D:\vhosts\nac-i…’) #5 {main} thrown in D:\vhosts\nac-issa.org\httpdocs\SquareEcom\vendor\square\square\src\ApiHelper.php on line 47

We don’t want to be mixing the Quickstart and the PHP example. They are two very different examples. In the Quickstart /payment is the function in the server.js file that process the payment. If your using the PHP example the index.php is the file where the form is rendered. The eventHandler in the PHP example is where tokenize is called and passed to the payment request.

If you spin up the PHP example as per the README.md it will work out of the box. You don’t need any of the code from the Quickstart. That Quickstart is a Node.js example. :slightly_smiling_face:

At least you get error messages. I’m totally in the dark not knowing where the issues are :confused:

I can’t use connect-api-examples/index.php at master · square/connect-api-examples · GitHub, because it requires autoload.php which I don’t have which means I most likely have to use some type of composer which I can’t use.

I already have the SDK files uploaded to my webserver from years ago and it seems to be working so I’m going to continue using that. I just right now need a SIMPLE html + js on client side for the form, which I thought I could use web-payments-quickstart/card.html at main · square/web-payments-quickstart · GitHub.

Is there a place I can just find a simple HTML and JS for ONLY the client side that displays the credit card form?
All the other stuff that is handled in PHP I can figure out on my own. I’m just trying to first fix the client side without having to use a SDK etc.
Thank you so much.

Andrea I can help you at least get as far as I am. It is however very frustrating and about to cost me clients.

Yes, we have our design showcase that has the form in various different styles. :slightly_smiling_face:

Hi Bryan,

All these examples seems to be submitting the payment and being processed via javascript.
When clicking “pay” it just says on screen " Successful Payment" etc or something like that.
I’m trying to find html+js scripts where you click Pay, it loads a PHP where I can process the payment and all the variables.
Thank you! =)

All of those examples are calling tokenize and generating the source_id. They don’t actually submit a payment. If you inspect the page and go to the network tab you’ll see the returned nonce that passed in the response.:

{
    "card_nonce": "cnon:CBASEK9ebYTK81fQFbVlT5TLaEQ",
    "card": {
        "digital_wallet_type": "NONE",
        "card_brand": "VISA",
        "last_4": "1111",
        "exp_month": 11,
        "exp_year": 2025,
        "billing_postal_code": "12345"
    },
    "session_id": "fhtdbTRk73VL2Zj00AA7GLGC5QnMaE8mmfoC41GRdqP1ja5Uu_hTT2dbrdROWRuxZHVA54rMMnS_i-Xn"
}

That nonce is what you’ll then POST to the CreatePayment request. :slightly_smiling_face:

hm ok I see.
I’m guessing I don’t need the session_id or the credit card info, only the card_nonce correct?

So I can get the card_nonce (source_id), dynamically POST a html form and in the PHP create a payment with the source_id, correct?

Right, you can use that info if you want to but only the card_nonce needs to be passed in CreatePayment as the source_id. :slightly_smiling_face:

ok now we’re getting somewhere :slight_smile:

Question 1:
If a customer submits a payment using an EXISTING credit card, does it still produce a card_nonce (source_id) ?

Question 2:
If a customer submits a payment using an EXISTING credit card, I only need the card_nonce info in the PHP to make that payment and save the credit card correct? Square will somehow have access to the credit card info etc so I don’t need to get the ones produced in the javascript?

What I’m trying to figure out is if I ever need the credit card info details that the javascript is producing before submitting the PHP form.

I’m afraid I’m not sure what “EXISTING” means, but any valid credit card, whether saved in Square or not, will always produce a card nonce, also known as a token. Pretty sure they’ve moved the lingo to refer to card “token” as it seems more in-line with current language.

Before you use the card to process a transaction, or save it, you only have access to the nonce, so you can’t see card details at that point.

Once you’ve processed the card, you should get back an object which has all the details, including card brand (Visa etc), first 6, last 4, expiry date, and so on.

Is that what you needed to know?

Hi Bryan,

Kinda.
When a customer makes a payment, and in the HTML decides to SAVE the credit card he’s entering (checks the checkbox to save CC in his profile), I didn’t have to access any variables from client side such as last 4 digits of card number for example. And I didn’t need to because CreateCustomerCardRequest was able to save all info needed about the card.

But, since now with the changes it seems I’m able to get the last 4 digits of card number in javascript (according to: Credit card issue - #31 by Bryan-Square)

so I’m wondering, if I ONLY use the card_nonce and do a “CreateCustomerCardRequest” in PHP, am I able to later use “retrieveCustomer” to get the ending last 4 of card info etc in php later on?
Or do I my self have to save the info given to me in javascript that’s given here Credit card issue - #31 by Bryan-Square ?
Thanks.

If you have the submitted card token (coming from the form) and use it for a transaction, you can then use the payment ID to save the customer credit card. That’s documented here - though haven’t checked the js version of the doco:

To explain further, if you want to do BOTH a transaction AND save the card, you can do it in either order:

  1. create saved card using form token, then use saved card token (cnon:…) for transaction, OR
  2. do payment transaction using form token, then use payment ID to save card (as above).

The documentation is your friend here; try it out in API Explorer if you’re not sure what returns what.

I haven’t checked it, but I think BOTH of these will return the last 4 digits - see Bryan’s example above. But the real answer here is to do some playing with the API Explorer, it makes understanding things much easier when you can see them in black and white!

The doco for saving the card first is: https://developer.squareup.com/docs/cards-api/walkthrough-seller-card

I’m a bit at sea here as it looks like you’re using the Javascript version of the API, and I use the PHP version, so I’m essentially guessing here; though the key is just to do a call in the sandbox and see what it returns and/or use the API Explorer. Bryan - if I have anything wrong, please correct me!

If you’re using Javascript, always check the JS console for errors, which appear there otherwise silently.

Cheers,

Brian

1 Like

Bryan you’re awesome…I’m definitely check it out. Thank you so much.
Whenever you have time, if it’s possible to get help with these questions I’ll appreciate it: Apple/Google pay

It seems that there may be an issue with your website’s payment gateway or checkout system. The fact that customers are not able to enter credit card information and that the “Pay with Apple Pay” text is not visible on any device could indicate that there is a technical problem with your website’s code or configuration.

It’s important to investigate this issue as soon as possible, as it could be causing you to lose potential customers and revenue. You may want to contact your website developer or hosting provider to see if they can identify and resolve the issue. Additionally, it may be helpful to conduct some testing on different devices and browsers to see if the issue is consistent across all platforms.

Once the issue is resolved, it may be a good idea to inform your customers via email or social media that the payment gateway is working properly again and that they can safely enter their credit card information.

1 Like

If customers are unable to enter their credit card information and the “Or pay with your Apple Pay” option is not visible, it’s likely that there is an issue with your website or payment processing system.

Here are some steps you can take to troubleshoot the issue:

  1. Check your website for any errors or issues that may be preventing customers from completing their orders. This can include broken links, missing pages, or server errors.
  2. Check your payment processing system to ensure that it is functioning properly. This can include verifying that your payment gateway is up-to-date and that you have the correct settings configured.
  3. Test your website on different devices and browsers to see if the issue is limited to a specific platform or browser. If the issue is limited to a specific platform, such as Apple devices, you may need to modify your website’s code to ensure compatibility. On the other hand i was also facing that issue in my website thesambadlottery
  4. Contact your payment processor and website hosting provider to see if they are experiencing any issues that may be affecting your website’s ability to process payments.
  5. Reach out to customers who have previously placed orders on your website to see if they have experienced any issues with the payment process. This can help you identify any recurring issues that may be impacting your sales.