Web Payments Migration from spPaymentForm

Questions
,
1

I’m trying to do just the basic Card example but am getting the following console error:
error loading script https://js.squareupsandbox.com/payments/data.js: location returned undefined

<script>
        const appId = 'sandbox-sq0idb-zlPbXjtJy5iKQ_bXNwn4BA';
        const locationId = '53046MYZ769MG';
  
        async function initializeCard(payments) {
          const card = await payments.card();
          await card.attach('#card-container');
  
          return card;
        }
2

That isn’t the correct script with the Web Payments SDK. You’ll need to use web.squarecdn.com/v1/square.js. :slight_smile:

3

Thanks Bryan, I’m not sure where that is coming from but I have a new issue, among many others, LOL. This is very confusing to me, sorry for all of the questions. Here is the new console error:

POST https://www.keycityweb.com/payment 404 (Not Found)

I’m guessing this is looking for the /payment function in the server.js file?? I have no idea. LOL!
Thanks in advance!

4

Yes, that’s what it’s looking for. Are you following the migration guide I sent? It looks like you started a new project with our documentation. :slight_smile:

5

LOL :smiley:
I’m trying to, yes. I have the server.js file on the root of the site, isn’t that where it should be? Am I missing something?

Sample Code

Many of these things I’m not understanding as I developed this several years ago.
It’s very different, at least appears so from the old SqPaymentForm.

My old page captured all the form data, Name, email, CC info, etc, and then gets posted to a receipt page (), where it looks like I set a bunch of request parameters for an http post call.

`

<cfif FORM.amount EQ 0>
    <cfset variables.amount = replace(FORM.otherAmt,'$','','all')>
<cfelse>
    <cfset variables.amount = FORM.amount>
</cfif>

<cfset request.params.card_nonce = form.nonce>
<cfset request.params.amount_money.amount = numberFormat(variables.amount * 100,'^')>
<cfset request.params.amount_money.currency = 'USD'>
<cfset request.params.idempotency_key = IDKey>
<cfset request.params.buyer_email_address = FORM.donationEmail>
<cfset request.params.note = rtn_getdonationData.donationName&' Donation'>
<cfset jsonString = serializejson(request.params)>

<cfset requestPath = "https://connect.squareup.com/v2/locations/53046MYZ769MG/transactions">

<cfhttp url="#requestPath#" method="post" result="response">
    <cfhttpparam type="HEADER" name="Accept" value="application/json">
    <cfhttpparam type="HEADER" name="Content-Type" value="application/json">
    <cfhttpparam type="HEADER" name="Authorization" value="Bearer EAAAELljh-eeX6FQI_wb6lAZBNGQTECul2A2trHQe20is0GrThY3-osrlBt0wf7i">
    <cfhttpparam type="body" name="params" value="#jsonString#">
</cfhttp>

<cfset responseStruct = deserializeJSON(response.Filecontent) />`

I'm just trying to wrap my head around this, so sorry for the many questions. I have read the docs and the PDF you sent, I also watched two videos, I guess I'm just getting old. LOL 

Please let me know if you can help or point me in the right direction.
6

You can still post all the data to the CreatePayment request but instead of passing a nonce you’ll pass the source_id that’s returned by the Web Payments SDK. :slight_smile:

7

Okay, right I figured that but I’m having trouble connecting the dots.
The CreatePayment function is where? Do I need a local js file or is it looking for it from here:

Either way, I’m still getting the 404 error for /payments (See previous reply and link). So, I’m not even able to update that function with form data because it says it’s not found :smiley:

I guess what I’m confused about is if I use the CreatePayment (POST /v2/payments) endpoint in my http request, how do I get the payment token from the form to the form action page where I do the http request call??

8

Okay, if your getting a 404 the /payment function isn’t accessible. In our example the CreatePayment function is in the server.js file.

The Web Payments SDK returns a single object called TokenResult, which contains the payment token. It is returned by the tokenize function on a payment method. Once you receive the token you can call CreatePayment. :slight_smile: