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.