v3 Integration

Note

To be PCI-compliant, you must load the SDK directly from https://pay.guesty.com (either by adding a script tag or using the ES module). You cannot include it in a bundle or host it yourself.

Manually Include a Script Tag

Add a script tag to your application head or body. This loads the guestyTokenization object to the global window scope of the browser.

<script src="https://pay.guesty.com/tokenization/v3/init.js"></script>

Use it as an ES Module

See tokenization-js for more information.

npm install @guestyorg/tokenization-js

import { loadScript } from '@guestyorg/tokenization-js';

try {
  const guestyTokenization = await loadScript({ version: 'v3' });
  // Guesty Tokenization JS SDK is loaded and ready to use
} catch (error) {
  console.error('Failed to load the Guesty Tokenization JS SDK script', error);
}

Add a container element to your page within which the iframe will be rendered:

<div id="guesty-tokenization-container"></div>

Call guestyTokenization.render(options) to render the iframe in the container element. See Reference for all customization options.

await guestyTokenization.render({
  containerId: 'guesty-tokenization-container',
  providerId: 'YOUR_PAYMENT_PROVIDER_ID',
  paymentMethod: 'ach', // optional, defaults to "card"
});

Call guestyTokenization.submit(payload) to submit the form:

// Card tokenization ahead of instant charge — 3DS is handled during the charge step
const cardPaymentMethod = await guestyTokenization.submit({
  amount: 100,
  currency: 'USD',
  listingId: 'LISTING_ID',
  quoteId: 'QUOTE_ID',
  guest: {
    firstName: 'John',
    lastName: 'Doe',
  },
  method: 'verify_no_3ds',
});

// Then create/charge the reservation on your backend using cardPaymentMethod._id

// ACH flow example
// ACH submit payload is empty in SDK v3.
const achPaymentMethod = await guestyTokenization.submit({});

If your backend returns threeDSChallenge on the payment response (for example, when payment status is PENDING_AUTH), complete authentication with:

const challengeResult = await guestyTokenization.handle3DSChallenge({
  threeDSChallenge: paymentResponse.threeDSChallenge,
});

// Pass the result to your backend to finish authorization
await verifyPayment({ paymentId: paymentResponse.payment._id, threeDSResult: challengeResult });

When you are done, call guestyTokenization.destroy().

See Reference for the full instant charge and 3DS flow.