Web Payments SDK - demo Ok, but implementation Not OK

Hi this is the second time I’ve tried to implement your Payment system on a customer’s website and once again I find myself stuck not being able to implement it.

I’ve been programming for over 10 years in ASP.Net / C# but am new to Node.js and server technology, beyond accessing / running my code as a hosted website and database. I’ve also used other payment providers successfully, but one of my clients wants to try you out.

My issue is that your site is great, your example is great and well explained, and works really well, but beyond copying all the files to my project and running index.html (with Node.js running localhost:3000) which returns with a red cross and ‘Payment Failed’. I’m stumped.

And here is where I think your documentation fails, in that the next step seems to be missing.

I’ve tried to follow (the disjointed) link to the PaymentsAPI section and I think I have to implement ‘Create payment’ using the C# code but that’s where your documentation ends.

What I think I need to do is access your namespace but to do that I need to reference it (for example I’d like to have a

Using PaymentAPI ;

reference in the same way you have

Using System;

so can access the namespace in

new CreatePaymentRequest.Builder(…

for example, then I can look at implementing the CreatePayments in my backend code.

Any help, ideas where I’m going wrong, links to reading material I should review are most welcome.

Thanks in advance.

Is this for production payments or sandbox payments? What’s your application ID? Also have you seen our examples in our supported languages which includes C#? :slightly_smiling_face:

1 Like

Hi @Bryan-Square , currently sandbox payments from localhost.

Many thanks for the link, on 1st look, that looks great and is much more like what I need to work through. I’ll review it and if need more help will be back :slight_smile:

Maybe this could be added as a related topic in the web payments API or Take Card payments pages.

Hi, I am a developer using C#. I recently developed web payment project with Square. I hope this message helps you out little bit. I am just writing this message to share my experience, so no offense. I am guessing you are using C# and asp.net

Good starting point is code example link that you can find from developer page.

I am guessing you have followed installing Square’s web payment quick start kit. This is the first step but you don’t need copy and paste any files from this kit. Just take a look how this kit is handling payment flow. A file in the folder web-payments-quickstart\public\examples\card.html is the one that developer must take a look for card payment. This file contains javascript you can copy (not as is), paste, and customize to your site’s aspx file (asp.net page).

This page(card.html from quickstart) will call javascript fetch, for this, your asp.net project must have API Controller to handle this javacript’s fetch call. In this API Controller, you will call CreatePaymentAsync() or CreatePayment(). This controller will be using…
using Square;
using Square.Models; as minimal.

In this asp.net controller,
public async Task Post([FromBody]SquarePayment p) { …//your code } (or any different way you will handle Post with different return type) will call CreatePaymentAsync(). ‘SauarePayment’ is just a custom object I created to handle data using API Controller. → Please research how to handle API Controller in ASP.net. Your javascript fetch call must be able to pass data when calling API controller.

You will refer to Square’s API reference on calling CreatePaymentAsync() for your project’s need. In this method (Post call), you will create Square’s client instance. Square’s API Explorer does not show about client instance, but you need create instance of [Square client] to call any Square’s API.

This api controller must handle ‘cross origin’ for debugging in Visual Studio. → please research. Your web project in Visual Studio works on specific local host port [WHEN DEBUGGING], not the Square provided quick start port (3000). This is for debugging purpose only. You do not need implement ‘cross origin’ for production.

Now, the code behind page of your aspx.
Remember the aspx file has javascript? This javascript called ASP controller as above. Controller created Square client and processed CreatePaymentAsync() method. Now the calling javascript have received response from ASP controller. Using this response, you can call static WebMethod from code behind to handle your POS specific requirement. Of course, only if you need.

Another thing to check is OAuth. Your web application must be able to handle OAuth if you are building application for other merchants. I used Asp handler for this.

Every developer has different way to create or handle the situation. This message is not the only answer. I am sorry that I cannot expose the actual lines of code.

1 Like

Hi @BrianYeon, thank you for the great reply. I will give it lots of thought too.

I’ll reply with my findings if they will help others too.

I am glad to see your response but always check response with [Bryan-Square] for the best answer. If you need ask more questions, please post. I may help with my knowledge.

Let me know if you have any issues on integrating Square for ASP.Net environment. I may assist you because I just completed integrating with Square on ASP.NET. Developer helps each other. That is the only reason I am writing here.

Hi Brian
We have a vb.net aspx web site that uses square for payments. we use square sdk 11.0
We have been using the javascript SqPaymentForm in past years. I didn’t realize that it wasn’t supported anymore for we haven’t taken payments since last summer.
Maybe you can help me out on a couple questions. I think i have to convert to the Square Web API. Is it possible to use the new web api to create the payment form and generate the sourceid that is used by the server with the CreatePaymentRequest.Builder with version 11.0?
is there a simple example of how to use this web api to show the credit card form?
in our past aspx form there was a button to validate the card by call the javascript code that called sqPaymentForm.requestCardNonce().
i am not a javascript person, but this was a simple copy of an example.
with the new example using web api, i changed the first script to have src=“web.squarecdn.com/v1/square.js
and i change the second script to be like the example.
i don’t understand what calls the initializeCard(…) in the script to view the card information?
Have been fighting this for a while since i realized that the payments isn’t working and the pool will be opening soon.
Any help would be greatly appreciated!