WebPaymentForm change location id

Questions
, ,
1

I have multiple locations to select for pickup of items in a cart.
How do I go about changing the payment form based on the pickup?
I don’t see a destroy method on the Square.payments method.
If I just re-create the code, it adds another payment form.
Ideally I want to be able to do something like payments.setLocationId(1234), rather than having to kill the old one to create a new one, is that possible?

if not how do I change the location id on the payment?

Note, I am grabbing the token and am planning on charging the card on the server side with the rest of my code (PHP). I have this working with the old payments sdk.

2

:wave: Are you having your customers select the location prior to collecting the card information? If so based on their selected location you can pass in the correct location_id to generate the form fields with the SDK. :slightly_smiling_face:

3

Screen Shot 2022-06-07 at 09.53.30
Screen Shot 2022-06-07 at 09.53.30464×889 45.8 KB

HI Bryan.

Yes, I am, but they can switch between locations at checkout.

I did just try to have it show both cc forms, and show and hide them based off which ‘location’ is active, but I’m getting credit card details not defined based on the one that isn’t selected (see image attached)

The payment form with the border is showing the actively selected location.
The redacted text is the location id

4

So you have two instances of the form on the page? Really, you should only have one and if a customer select a different location you can destroy the form and re-initialize it with the new locationId configured. :slightly_smiling_face:

5

ok, so you only have to destroy the card, not payment?
or will destroying the card also destroy the payment?

I didn’t see a destroy on the payment

6

Only when the source_id that’s generated from the Web Payments SDK is passed to CreatePayment will a payment be generated. Since you’re still at the card input stage no payment has been made. :slightly_smiling_face:

7

ok, so i have this

document.addEventListener('DOMContentLoaded', function () {
      loadPaymentForm(locationId);
  })

async function loadPaymentForm(locationId) {
    if (!window.Square) {
      throw new Error('Square.js failed to load properly');
    }

    try {
      payments = window.Square.payments(appId, locationId);
    } catch {
      const statusContainer = document.getElementById(
        'payment-status-container'
      );
      statusContainer.className = 'missing-credentials';
      statusContainer.style.visibility = 'visible';
      return;
    }

    try {
      card = await initializeCard(payments);
    } catch (e) {
      console.error('Initializing Card failed', e);
      return;
    }
  }

async function initializeCard(payments) {
    const card = await payments.card();
    await card.attach(`#card`);

    return card;
  }

  window.productEvents.$on('pickup-location.changed', (location) => {
    formSquareLocationId = mode === 'production' ? location.squareId : location.squareIdSandbox;
    
    if (locationIdField) {
      locationIdField.value = formSquareLocationId;
    }
  })

in the window.ProductEvents.$on event handler, do I just need to do something like this? (but making card a top level variable)

card.destroy();
loadPaymentForm(newLocationId)
8

Right, that’s what you should do to have the form load with the new locationId configured. :slightly_smiling_face:

9

ok, thanks Bryan, i will give that ago