Integration steps

<script src="https://cdn6.agoda.net/s-cdn-partner-sdk/v1/`partner.js`"></script>

<meta http-equiv="Content-Security-Policy" content="
  script-src 
    'self' 
    https://www.agoda.com 
    https://*.agoda.com 
    https://*.riskified.com 
    https://cdn6.agoda.net
    https://*.forter.com 
    https://*.cloudfront.net; 

  connect-src 
    'self' 
    https://*.agoda.com 
    https://*.travelwebservice.com 
    https://bento.agoda.com 
    https://*.riskified.com 
    https://*.forter.com 
    https://*.cloudfront.net
    https://1.1.1.1
    https://wtp.siteperformancetest.net
    https://siteperformancetest.net
    wss://cdn0.forter.com;
  
worker-src 
    'self' 
    https://www.agoda.com 
    https://*.agoda.com 


   img-src 
    'self' 
    https://img.riskified.com;

">

window.partnerSDK.init(config: {
  siteId: string;
  partnerName?: string;
  environment: 'sandbox' | 'production';
  cspNonce?: string;
  onReady?: () => void;
  onError?: (error: Error) => void;
}): Promise<void>;

try {
 await window.partnerSDK.init({
   siteId: "12345",           // Agoda-issued site ID
   partnerName: "partner-test",  // Optional Agoda-issued partner name; provide to enable PAN tokenization
   environment: "sandbox",       // Use production only when ready
   cspNonce: "rAnd0m12345",   // Optional nonce for CSP compliance
  });
 console.log("SDK is ready")  // Optional log for Init success
} catch(e) {
//  SDK initialization fail/error handling
   console.error("SDK init failed", error) //  Optional log for Init fail
}

<script>
 window.partnerSDK.init({
   siteId: "12345",           // Agoda-issued site ID
   partnerName: "partner-test",  // Optional Agoda-issued partner name; provide to enable PAN  tokenization
   environment: "sandbox",       // Use production only when ready
   cspNonce: "rAnd0m12345",   // Optional nonce for CSP compliance
   onReady: () => console.log("SDK is ready"), // optional if used as promise
   onError: (error) => console.error("SDK init failed", error)
 });
</script>

type PaymentCardDetails = {
  creditCardNumber: string;
  cardHolderName: string;
  expiryDate: string;
  cvc: string;
};

type CheckoutErrorCode =
  | 'INVALID_CONFIG'
  | 'TOKENIZE_FAILED';

type CheckoutError = {
  code: CheckoutErrorCode;
  message: string;
};

type CheckoutSuccessResult = {
  success: true;
  sdk_context_token: string;
};

type CheckoutFailureResult = {
  success: false;
  error: CheckoutError;
};

type CheckoutCallback = (
  result: CheckoutSuccessResult | undefined,
  error?: CheckoutError,
) => void;

window.partnerSDK.checkout(
  details?: Partial<PaymentCardDetails>,
  cb?: CheckoutCallback,
): Promise<CheckoutSuccessResult>;

// First, prepare your cardDetails object:
// partnerName in init() enables PAN tokenization;
// when enabled, all four fields below are required.
const cardDetails = {
  creditCardNumber: "4111...",   // Full card number
  cardHolderName: "John Doe",
  expiryDate: "122028",            // MMYYYY format
  cvc: "123"
};

try {
  const response = await window.partnerSDK.checkout(cardDetails);
  await submitBookingToBackend(response.sdk_context_token);
} catch (failure) {
  handleCheckoutError(
    failure.error.code,
    failure.error.message,
  );
}

const callback = (result, error) => {
  if (result) {
    console.log("Token received:", result.sdk_context_token);
    // Proceed with your backend submission logic
  } else if (error) {
    console.error(`Error [${error.code}]: ${error.message}`);
  }
};

window.partnerSDK.checkout(cardDetails, callback).catch(() => {
  // The callback already handled the checkout failure.
});

 {
  "waitTime": 120,
  "bookingDetails": {
    "userCountry": "US",
    "searchId": 1629183207719830000,
    "tag": "00000000-0000-0000-0000-000000000000",
    "allowDuplication": false,
    "checkIn": "2022-12-23",
    "checkOut": "2022-12-24",
    "property": {
      "propertyId": 12157,
      "rooms": [
        {
          "blockId": "blockid_v3",
          "rate": {
            "inclusive": 798.58
          },
          "surcharges": [
            {
              "id": 278,
              "rate": {
                "inclusive": 12
              }
            },
            {
              "id": 279,
              "rate": {
                "inclusive": 12
              }
            }
          ],
          "guestDetails": [
            {
              "title": "Mr.",
              "firstName": "John",
              "lastName": "Doe",
              "countryOfResidence": "US",
              "gender": "Male",
              "age": 30,
              "primary": true
            }
          ],
          "currency": "USD",
          "paymentModel": "Merchant",
          "count": 1,
          "adults": 2,
          "children": 2,
          "childrenAges": [
            5,
            6
          ],
          "specialRequest": "high floor"
        }
      ]
    }
  },
  "customerDetail": {
    "language": "en-us",
    "title": "Mr.",
    "firstName": "Test",
    "lastName": "Test",
    "email": "[email protected]",
    "phone": {
      "countryCode": "66",
      "areaCode": "2",
      "number": "22222222222"
    },
    "newsletter": false,
    "ipAddress": "<customer IP Address>"
  },
  "paymentDetails": {
    "contextToken": "<sdk_context_token>",
    "creditCardInfo": {
      "number": "<PAN>",  // Not required if PAN Tokenization is enabled
      "expiryDate": "<EXPIRY (MMYYYY)>",  // Not required if PAN Tokenization is enabled
      "cvc": "<CVC>",  // Not required if PAN Tokenization is enabled
      "holderName": "<CARD HOLDER NAME>",  // Not required if PAN Tokenization is enabled
      "billingAddress": {
         "addressLine1":"123 Main St",
         "addressLine2": "Apt 4B",
         "city": "New York",
         "state": "New York",
         "postalCode": "10001",
         "countryCode": "US"
      }
    }
  }
}

{
    "status": "200",
    "bookingDetails": [
        {
            "id": 20440123434,
            "itineraryID": 20437611123,
            "processing": false
        }
    ]
}

{
  "status": 202,
  "bookingDetails": [],
  "requiredAction": "payment_challenge",
  "statusToken": "u9JX7vK8mW1NqA5zPz9wL3kM1bC6rX8zY4tV2bN9oE"
}

type HandleChallengeFailureReason =
  | 'failed'
  | 'timeout'
  | 'cancelled'
  | 'mount_error'
  | 'network_error'
  | 'context_error'
  | 'page_changed'
  | 'decode_failed';

type HandleChallengeSuccessResult = {
  success: true;
};

type HandleChallengeFailureResult = {
  success: false;
  reason: HandleChallengeFailureReason;
  error?: Error;
};

type HandleChallengeOptions = {
  container?: string | HTMLElement;
  onSuccess?: () => void;
  onFailure?: (failure: {
    reason: HandleChallengeFailureReason;
    error?: Error;
  }) => void;
};

window.partnerSDK.handleChallenge(
  statusToken: string,
  options?: HandleChallengeOptions,
): Promise<HandleChallengeSuccessResult>;

// The partner backend polls booking status independently.
void window.partnerSDK.handleChallenge(statusToken).catch((failure) => {
  logChallengeFailure(failure.reason, failure.error);
  // Optional: when failure.reason is 'cancelled', your integration may stop
  // backend booking-status polling for this attempt. See the Step 8 note.
});
// Process backend booking-status results independently of this Promise.

// The partner backend polls booking status independently.
void window.partnerSDK.handleChallenge(statusToken, {
  container: '#payment-challenge',
  onFailure: ({ reason, error }) => {
    logChallengeFailure(reason, error);
    // Optional: when reason is 'cancelled', your integration may stop
    // backend booking-status polling for this attempt. See the Step 8 note.
  },
}).catch(() => {
  // onFailure already handled the rejected challenge result.
});

{
  "waitTime": 120,
  "tag": "partner unique identifier",
  "statusToken": "<status token passed in book 3ds response>"
}

{
    "status": "200",
    "bookingDetails": [
        {
            "id": 80001230,
            "itineraryID": 70001230,
            "processing": false
        }
    ]
}

const partnerSdkUrl =
  'https://cdn6.agoda.net/s-cdn-partner-sdk/v1/partner.js';

const AppLayout = () => (
  <AppContextProvider>
    <Header />
    <main>
      <AppRouter />
    </main>
  </AppContextProvider>
);

const Header = () => {
  const {
    markPartnerSdkReady,
    recordPartnerSdkWarning,
    recordPartnerSdkUnavailable,
  } = useAppContext();

  const initializePartnerSdk = () => {
    // Step 2 — initialize the Partner SDK after the script has loaded.
    void window.partnerSDK
      .init({
        siteId: 'YOUR_AGODA_SITE_ID',
        partnerName: 'your-partner-name',
        environment: 'sandbox',
        onError: (error) => {
          // Fraud-beacon errors are non-blocking. Record the warning in
          // application context so the partner can monitor or diagnose it.
          recordPartnerSdkWarning(error);
        },
      })
      .then(() => {
        markPartnerSdkReady();
      })
      .catch((error) => {
        // Invalid SDK configuration prevents initialization.
        recordPartnerSdkUnavailable(error);
      });
  };

  return (
    <header>
      <OtherHeaderComponents />

      {/* Step 1 — load partner.js from Agoda's CDN. */}
      <script
        src={partnerSdkUrl}
        onLoad={initializePartnerSdk}
      />
    </header>
  );
};

import { useState } from 'react';

export function BookingPage() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  // Partner-owned context, hook, and components used for illustration.
  const { isPartnerSdkReady } = useAppContext();
  const {
    bookingFields,
    cardDetails,
    isBookingReady,
  } = useBookingState();

  const handleFinalBookingStatus = (finalStatus) => {
    if (finalStatus.bookingStatus === 'CONFIRMED') {
      navigateToThankYouPage(finalStatus);
      return;
    }

    setErrorMessage('Your booking could not be confirmed.');
  };

  const handleBook = async () => {
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      // Step 3 — without partnerName, card details may be omitted.
      // With partnerName, all four card fields are required.
      let checkoutResult;

      try {
        checkoutResult = await window.partnerSDK.checkout(cardDetails);
      } catch (failure) {
        logCheckoutFailure(failure.error);
        setErrorMessage('We could not prepare your booking request.');
        return;
      }

      // Step 4 — send sdk_context_token to the partner backend.
      //
      // Step 5 — the backend calls Affiliate Book API. bookingFields represents
      // the partner's existing booking data; it must not contain PAN, CVC,
      // expiry, or raw paymentDetails.
      const bookingResponse = await submitBookingToPartnerBackend({
        ...bookingFields,
        sdk_context_token: checkoutResult.sdk_context_token,
      });

      if (
        bookingResponse.status === 202 &&
        bookingResponse.requiredAction === 'payment_challenge' &&
        bookingResponse.statusToken
      ) {
        // Step 6 returned requiredAction as payment_challenge, status as 202 and statusToken from Affiliate Book.
        //
        // Step 7 — start the browser 3DS/payment challenge with only the
        // opaque statusToken returned by Affiliate Book.
        //
        // Step 8 — concurrently wait for the partner backend's authoritative
        // status result. The backend owns polling and its polling identifier.
        const finalStatusPromise =
          waitForFinalBookingStatusFromPartnerBackend();

        void window.partnerSDK.handleChallenge(
          bookingResponse.statusToken,
        ).catch((failure) => {
          logChallengeFailure(failure.reason, failure.error);
          // Optional: when failure.reason is 'cancelled', your integration
          // may stop backend status polling for this attempt. See Step 8.
        });

        const finalStatus = await finalStatusPromise;
        handleFinalBookingStatus(finalStatus);
        return;
      }

      if (!bookingResponse.bookingId) {
        setErrorMessage(
          'The booking response did not include a booking ID or challenge token.',
        );
        return;
      }

      // A non-challenge booking also gets its final result from Step 8.
      const finalStatus = await waitForFinalBookingStatusFromPartnerBackend();
      handleFinalBookingStatus(finalStatus);
    } catch (error) {
      // Application or partner-backend failure.
      reportUnexpectedBookingFailure(error);
      setErrorMessage('We could not complete your booking request.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <Loader isLoading={isSubmitting} />

      <ErrorModal
        isOpen={errorMessage !== null}
        message={errorMessage}
        onClose={() => setErrorMessage(null)}
      />

      <BookingForm />

      <BookButton
        disabled={!isPartnerSdkReady || !isBookingReady || isSubmitting}
        isLoading={isSubmitting}
        onClick={handleBook}
      />
    </>
  );
}