Need short example of serializing response

[marcoscaceres]

Be nice to have a short example of response.toJSON() and POSTing it with fetch() to a server. That would "tell the complete story" of how to use the API.

We can slot this into the existing example for payment response.

[rsolomakhin]

FYI, I have sample code for this on https://emerald-eon.appspot.com/. Here's a simplified snippet:

let payment = new PaymentRequest(...);
payment.show()
  .then(function(instrument) {
    fetch('/buy', {
      method: 'POST',
      headers: new Headers({'Content-Type': 'application/json'}),
      body: JSON.stringify(instrument, undefined, 2),
    })
    .then(function(buyResult) {
      if (buyResult.ok) {
        return buyResult.json();
      }
      complete(instrument, 'fail', 'Error sending instrument to server.');
    }).then(function(buyResultJson) {
      complete(instrument, buyResultJson.status, buyResultJson.message);
    });
  })
  .catch(function(error) {
    console.log('Could not charge user. ' + error);
  });

function complete(instrument, result, msg) {
  instrument.complete(result).then(function() {
    console.log(msg);
  }).catch(function(error) {
    console.log(error);
  });
}

[dlongley]

@rsolomakhin,

Note that the catch for show() won't catch any errors with fetch. Add return before fetch to make that happen if that's what's intended. Potentially the same problem with complete but maybe that is behaving how you want ... not really sure what the exact intent here is.

[rsolomakhin]

Yep, I should really have a separate catch() for my fetch() call.

[dlongley]

We could also just write the example with async/await :)

[marcoscaceres]

Thanks, @rsolomakhin! Can definitely use this. Will adapt it.

[marcoscaceres]

The above beautifully distills down to:

async function doPaymentRequest() {
  const payResponse = await new PaymentRequest(methods, details).show();
  let result = "unknown";
  try {
    const httpResponse = await fetch("/buy", {
      method: "POST",
      headers: new Headers({ "Content-Type": "application/json" }),
      body: payResponse.toJSON(),
    });
    result = httpResponse.ok ? "success" : "fail";
  } catch (err) {
    console.error(err);
  } 
  await payResponse.complete(result);
}
doPaymentRequest();