Sample VUE application to use Web Payments SDK

Omd250 · November 27, 2022, 12:43am

Hi,
Our payment system has stopped suddenly last week and we NEED to make it work ASAP.
As you all know SqPaymentForm is deprecated and the only sample VUE app that Square provided is irrelevant now as its using the old SqPaymentForm here by Tristan Sokol.
Could anybody please make a sample VUE app with the new Web Payments SDK please.
Thanks

drewski · November 28, 2022, 1:16am

I found this, should be fairly simple to wrap this example in a vue component. hopefully this helps

github.com

square/web-payments-quickstart/blob/main/public/examples/card.html

<!DOCTYPE html>
<html>
  <head>
    <link href="/app.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="https://sandbox.web.squarecdn.com/v1/square.js"
    ></script>
    <script>
      const appId = '{APPLICATION_ID}';
      const locationId = '{LOCATION_ID}';

      async function initializeCard(payments) {
        const card = await payments.card();
        await card.attach('#card-container');

        return card;
      }

      async function createPayment(token) {

This file has been truncated. show original

Bryan-Square · November 28, 2022, 6:18pm

Also you may want to reference the Migration Guide from the SqPaymentForm to the Web Payments SDK.

Omd250 · November 28, 2022, 6:49pm

Already checked the migration guide but didn’t help. too confusing.
I have a PaymentNewCard.vue that used to show a form to get credit card number, expiry and cvv but after SqPaymentForm got deprecated all of a sudden it does not show anything.

here is the template part of the PaymentNewCard.vue:

Omd250 · November 28, 2022, 6:50pm

these two are the script parts of the PaymentNewCard.vue:

Omd250 · November 28, 2022, 6:51pm

call back in the PaymentNewCard.vue:

Any help is highly appreciated.

Omd250 · November 28, 2022, 6:51pm

Any idea if this is the only file I need to change?

Bryan-Square · November 28, 2022, 7:48pm

This all contains the retired SqPaymentForm. In order to get your application taking payments again you’ll need to follow the migration guide to migrate to the Web Payments SDK. The migration guide contains the specifics about replacing the SqPaymentForm integration in your application with the Web Payments SDK.

Topic		Replies	Views
Need Help! Trying to implement Square web sdk on a Vue.js app! Questions sandbox , web-payments-sdk	1	2674	July 23, 2021
Square web api from SqPaymentForm Questions payment-form , web-payments-sdk	2	1125	March 13, 2023
Square Web Payments SDK Angular Questions web-payments-sdk	7	3530	August 1, 2022
Questions for Migrating to Web Payments SDK from SqPaymentForm in ASP.NET Questions web-payments-sdk	4	2222	March 30, 2022
Card Payment with Vue.js Tokenize Fail Questions web-payments-sdk	3	2098	November 30, 2023

Sample VUE application to use Web Payments SDK

Related Topics