### Install and Build Example Source: https://github.com/duffelhq/duffel-components/blob/main/examples/payments-just-typescript/README.md Commands to navigate to the example directory, install dependencies, build the project, and open the example in a browser. ```sh # change directory to example folder cd src/examples/payments-just-typescript # install new version yarn # build and watch example yarn build # open example open src/index.html -a "Safari" ``` -------------------------------- ### Install and Run React Example Source: https://github.com/duffelhq/duffel-components/blob/main/examples/react-app/README.md Navigate to the example directory, install dependencies, build the project, and open the HTML file in your browser. ```sh # change directory to example folder cd src/examples/react-app # install new version yarn # build and watch example yarn build # open example open src/index.html -a "Safari" ``` -------------------------------- ### Install and Build TypeScript Example Source: https://github.com/duffelhq/duffel-components/blob/main/examples/just-typescript/README.md Navigate to the example directory, install dependencies, and build the project. Ensure the correct version of @duffel/components is specified in package.json. ```sh cd src/examples/just-typescript yarn yarn build ``` -------------------------------- ### Run Example with Yarn Source: https://github.com/duffelhq/duffel-components/blob/main/examples/payments-just-typescript/README.md Steps to verify the component version, install packages, and run the development server for the payments-just-typescript example. ```sh yarn yarn dev ``` -------------------------------- ### Running the Client-Side Example Source: https://github.com/duffelhq/duffel-components/blob/main/examples/client-side/README.md Use these yarn commands to serve the duffel-components bundle and host the example HTML page for local development. ```sh yarn run-example:client-side ``` ```sh yarn dev ``` ```sh yarn run-client-side-server ``` -------------------------------- ### Open TypeScript Example in Browser Source: https://github.com/duffelhq/duffel-components/blob/main/examples/just-typescript/README.md After building the example, open the generated index.html file in your browser to view the running application. ```sh open src/index.html -a "Safari" ``` -------------------------------- ### Install with Yarn Source: https://github.com/duffelhq/duffel-components/blob/main/examples/card-form-examples/README.md Use this command to install the necessary dependencies for the Duffel Card Component. ```bash yarn ``` -------------------------------- ### Run Development Server with bun Source: https://github.com/duffelhq/duffel-components/blob/main/examples/next/README.md Use this command to start the development server using bun. Open http://localhost:3000 in your browser to view the application. ```bash bun dev ``` -------------------------------- ### Install @duffel/components with Yarn or npm Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Install the package using either Yarn or npm. This is the first step for integrating the components. ```sh yarn add @duffel/components # -- or -- npm i @duffel/components ``` -------------------------------- ### Run Development Server with npm Source: https://github.com/duffelhq/duffel-components/blob/main/examples/next/README.md Use this command to start the development server using npm. Open http://localhost:3000 in your browser to view the application. ```bash npm run dev ``` -------------------------------- ### Run and Watch TypeScript Example Source: https://github.com/duffelhq/duffel-components/blob/main/examples/just-typescript/README.md Use 'yarn dev' to build the TypeScript example and watch for changes. This command generates a 'dist' folder referenced by the 'index.html' file. ```sh yarn dev ``` -------------------------------- ### Run Development Server with pnpm Source: https://github.com/duffelhq/duffel-components/blob/main/examples/next/README.md Use this command to start the development server using pnpm. Open http://localhost:3000 in your browser to view the application. ```bash pnpm dev ``` -------------------------------- ### Environment Variables Setup (.env.local) Source: https://github.com/duffelhq/duffel-components/blob/main/examples/using-cdn/README.md Configure these environment variables to point to the correct Duffel API environment and component CDN. Ensure API tokens are kept secure. ```sh # .env.local # The Duffel API environment we want to make requests to. # Remember to update the key below if this value changes. # DUFFEL_API_URL=https://api.duffel.com # production DUFFEL_API_URL=https://localhost:4000 # development (for Duffel engineers only) # Used to authenticate our # example server to talk to Duffel # DUFFEL_API_TOKEN=duffel_test_**** # production (find it on https://app.duffel.com/YOUR_ORG/test/developers/tokens) DUFFEL_API_TOKEN=test_duffel_dev_rw # development (for Duffel engineers only) # The url for the component CDN. # This is used to load both the styles an # COMPONENT_CDN=https://assets.duffel.com/components # production COMPONENT_CDN=http://localhost:8000 # development ``` -------------------------------- ### Initialize Duffel Payments Component (TypeScript) Source: https://github.com/duffelhq/duffel-components/blob/main/examples/payments-just-typescript/src/index.html Shows how to initialize the Duffel payments component in a TypeScript environment. Ensure you have the necessary SDK installed. ```typescript import { Duffel } from '@duffel/components'; const duffel = new Duffel('YOUR_DUFFEL_API_KEY'); async function createPayment() { try { const payment = await duffel.payments.create({ amount: '100.00', currency: 'EUR', payment_method_types: ['card'], metadata: { order_id: 'ORD-12345', }, }); console.log('Payment created:', payment); } catch (error) { console.error('Error creating payment:', error); } } createPayment(); ``` -------------------------------- ### Render duffel-ancillaries Component and Handle Payload Source: https://github.com/duffelhq/duffel-components/blob/main/examples/client-side/index.html Use this snippet to render the duffel-ancillaries component with offer details and passenger information. Listen for the 'onPayloadReady' event to get the data needed to create an order. ```javascript const duffelAncillariesElement = document.querySelector("duffel-ancillaries"); // 3. Render the component with the required data, you can safely call this function as many times as you want. E.g. when your passenger data changes. duffelAncillariesElement.render({ offer_id: "fixture_off_1", services: ["bags", "seats", "cancel_for_any_reason"], passengers: [ { given_name: "Mae", family_name: "Jemison", gender: "F", title: "dr", born_on: "1956-10-17", email: "m.jemison@nasa.gov", phone_number: "+16177562626", }, { given_name: "Dorothy", family_name: "Green", gender: "F", title: "dr", born_on: "1942-10-17", }, ], debug: true, }); // 4. Listen to 'onPayloadReady' event on the component. `event.detail.data` contains the payload you need to send to Duffel's API to create an order. duffelAncillariesElement.addEventListener("onPayloadReady", (event) => console.log("onPayloadReady\n", event.detail)); ``` -------------------------------- ### Configure Environment Variables Source: https://github.com/duffelhq/duffel-components/blob/main/examples/card-form-examples/README.md Set up your local environment variables for API key and origin. For HTTPS localhost, include NODE_TLS_REJECT_UNAUTHORIZED=0. To point to the local development server, set NEXT_PUBLIC_TOKEN_PROXY_ENV to development. ```env DUFFEL_API_KEY= DUFFEL_API_ORIGIN=https://localhost NODE_TLS_REJECT_UNAUTHORIZED=0 NEXT_PUBLIC_TOKEN_PROXY_ENV=development ``` -------------------------------- ### Build Component for CDN Upload Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md Execute this command to build the component specifically for CDN upload. The output will be placed in the `./cdn-dist` directory. ```sh yarn cdn-build # Build will output to ./cdn-dist ``` -------------------------------- ### Upload Component to CDN Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md Run this command to build the component and upload the latest version to the Google Cloud Platform CDN. The build version is determined by the `version` attribute in `package.json`. ```sh yarn upload-to-cdn ``` -------------------------------- ### Configure Environment Variables for Local Development Source: https://github.com/duffelhq/duffel-components/blob/main/examples/card-with-3ds/README.md Set these environment variables in your .env.local file to connect to the local platform and token proxy. Ensure your API tokens and URLs are correctly configured. ```sh # These are the default values for working with platform and token proxy locally # Your values may differ depending on the env/db you are working with DUFFEL_API_TOKEN=test_duffel_dev_rw DUFFEL_API_URL=https://localhost:4000 TOKEN_PROXY_URL=https://localhost:8000 ``` -------------------------------- ### Build Component for NPM Publishing Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md Use this command to build the component for publishing to NPM. The build output will be located in the `./react-dist` directory. ```sh yarn react-build # Build will output to ./react-dist ``` -------------------------------- ### Configure Environment Variables for CDN Upload Source: https://github.com/duffelhq/duffel-components/blob/main/CONTRIBUTING.md These environment variables are used to configure the build process for CDN uploads. Ensure `.env.build` is up-to-date with the correct API URL, CDN base URL, and Sentry authentication token. ```sh # .env.build # Include the base url for the Duffel API. # This variable is here to give us the ability to build a dist version that points to a local environment. # If no value is provided, the default `https://api.duffel.com` will be used. DUFFEL_API_URL=https://api.duffel.com # This is needed so the component knows the url base to use for its stylesheet # This variable is here so we can release component versions that may point to local environments or bypass the cache. # If no value is provided, the default `https://assets.duffel.com/ancillaries-component` will be used. COMPONENT_CDN=https://assets.duffel.com/components # The auth token is so we send data # to sentry during the build. # This is helpful when CI is # building releases, locally not as much. # You can get it here: https://duffel.sentry.io/settings/account/api/auth-tokens SENTRY_AUTH_TOKEN= ``` -------------------------------- ### Create 3D Secure Session and Order Source: https://github.com/duffelhq/duffel-components/blob/main/examples/card-with-3ds/index.html Initiates a 3D Secure session and creates an order if the session is ready for payment. Requires component client key, card ID, and offer ID. Ensure the server is set up to handle the POST request to '/create-order'. ```javascript window.pay = async () => { const threeDSSession = createThreeDSecureSession( "__COMPONENT_CLIENT_KEY__", "__CARD_ID__", "__OFFER_ID__", [], true, "", { duffelUrl: "https://localhost:4000" }, ) .then(async (threeDSSession) => { console.info("3DS session returned", threeDSSession); if (threeDSSession.status === "ready_for_payment") { const orderCreateResponse = await fetch("/create-order", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ offerID: "__OFFER_ID__", offerAmount: "__OFFER_AMOUNT__", passengerID: "__PASSENGER_ID__", threeDSSessionID: threeDSSession.id, }), }); alert("Order created, check server logs for full order object"); } else { console.log("3DS session status is not ready_for_payment", { threeDSSession }); } }) .catch((error) => { console.error("Error creating 3DS session", error); }); }; ``` -------------------------------- ### Configure Component CDN URL Source: https://github.com/duffelhq/duffel-components/blob/main/examples/payments-custom-element/README.md Set the COMPONENT_CDN environment variable in your .env.local file to specify the URL for the component CDN. Use the production URL for live environments or the development URL for local testing. ```sh # .env.local # The url for the component CDN. # This is used to load both the styles an # COMPONENT_CDN=https://assets.duffel.com/components/ancillaries/VERSION # production COMPONENT_CDN=http://localhost:8000 # development ``` -------------------------------- ### Environment Variables for Duffel Components Source: https://github.com/duffelhq/duffel-components/blob/main/examples/client-side/README.md Configure these environment variables in your .env.local file to set up the Duffel API URL, API token, and component CDN for development or production. ```sh # .env.local # The Duffel API environment we want to make requests to. # Remember to update the key below if this value changes. # DUFFEL_API_URL=https://api.duffel.com # production DUFFEL_API_URL=https://localhost:4000 # development (for Duffel engineers only) # Used to authenticate our # example server to talk to Duffel # DUFFEL_API_TOKEN=duffel_test_**** # production DUFFEL_API_TOKEN=test_duffel_dev_rw # development (for Duffel engineers only) # The url for the component CDN. # This is used to load both the styles an # COMPONENT_CDN=https://assets.duffel.com/components/ancillaries/VERSION # production COMPONENT_CDN=http://localhost:8000 # development ``` -------------------------------- ### Set up Event Listeners for Custom Elements Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Set up listeners for events triggered by the custom element, such as 'onDuffelAncillariesPayloadReady', to receive data and metadata. ```javascript onDuffelAncillariesPayloadReady((data, metadata) => { console.table(data); console.table(metadata); }); ``` -------------------------------- ### Render Duffel Card Form for Temporary Use Source: https://github.com/duffelhq/duffel-components/blob/main/examples/card-form-no-react/index.html Use this snippet to render the Duffel Card Form for creating a card for temporary use. Ensure you replace '__COMPONENT_CLIENT_KEY__' with your actual client key. Event listeners are set up to log validation and card creation outcomes. ```javascript window.onload = () => { renderDuffelCardFormCustomElement({ clientKey: "__COMPONENT_CLIENT_KEY__", intent: "to-create-card-for-temporary-use", }); onValidateSuccess(console.info); onValidateFailure(console.error); onCreateCardForTemporaryUseSuccess(console.info); onCreateCardForTemporaryUseFailure(console.error); onSaveCardSuccess(console.info); onSaveCardFailure(console.error); }; ``` -------------------------------- ### Include Script Tag for CDN Integration Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Include a script tag to load the component from the Duffel CDN. Replace VERSION and COMPONENT with the desired version and component name. ```html ``` -------------------------------- ### Render HTML Custom Element with Properties Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Call the render function with the required properties to render the custom element. This can be called multiple times if properties change. ```javascript renderDuffelAncillariesCustomElement({ offer: offerFromYourBackend, seat_maps: seatMapsFromYourBackend, services: ["bags", "seats"], passengers: [...], }); ``` -------------------------------- ### Import Custom Element Functions from @duffel/components/custom-elements Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Import the render function and event listeners for custom elements from the @duffel/components/custom-elements module when not using React but still in a Node environment. ```javascript import { renderDuffelAncillariesCustomElement, onDuffelAncillariesPayloadReady, } from "@duffel/components/custom-elements"; ``` -------------------------------- ### Render Custom Element via CDN Source: https://github.com/duffelhq/duffel-components/blob/main/README.md After including the script tag, select the custom element and call its render method with the required data. This can be safely called multiple times. ```javascript const duffelAncillariesElement = document.querySelector("duffel-ancillaries"); duffelAncillariesElement.render({ offer: offerFromYourBackend, seat_maps: seatMapsFromYourBackend, services: ["bags", "seats"], passengers: [...], }); ``` -------------------------------- ### Listen to 'onPayloadReady' Event from CDN Custom Element Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Listen to the 'onPayloadReady' event on the custom element. The event detail contains the payload needed to create an order with Duffel's API. ```javascript const duffelAncillariesElement = document.querySelector("duffel-ancillaries"); duffelAncillariesElement.addEventListener("onPayloadReady", (event) => console.log("onPayloadReady\n", event.detail), ); ``` -------------------------------- ### Render Duffel Payments Component Source: https://github.com/duffelhq/duffel-components/blob/main/examples/payments-custom-element/index.html Select the duffel-payments element and render it with a payment intent client token and debug mode enabled. This function can be called multiple times. ```javascript const duffelpaymentsElement = document.querySelector("duffel-payments"); // 3. Render the component with the required data, you can safely call this function as many times as you want. duffelpaymentsElement.render({ paymentIntentClientToken: "eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0=", debug: true, }); ``` -------------------------------- ### Listen for Successful Payment Event Source: https://github.com/duffelhq/duffel-components/blob/main/examples/payments-custom-element/index.html Add an event listener to the duffel-payments component to log a message when a payment is successfully completed. ```javascript duffelpaymentsElement.addEventListener("onSuccessfulPayment", () => console.log("onPayloadReady\n"), ); ``` -------------------------------- ### Import React Component from @duffel/components Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Import the desired component, such as DuffelAncillaries, from the @duffel/components package for use in your React application. ```javascript import { DuffelAncillaries } from "@duffel/components"; ``` -------------------------------- ### Listen for Failed Payment Event Source: https://github.com/duffelhq/duffel-components/blob/main/examples/payments-custom-element/index.html Add an event listener to the duffel-payments component to log details when a payment fails. The event object contains details about the failure. ```javascript duffelpaymentsElement.addEventListener("onFailedPayment", (event) => console.log("onPayloadReady\n", event.detail), ); ``` -------------------------------- ### Render Duffel Ancillaries Component and Handle Payload Source: https://github.com/duffelhq/duffel-components/blob/main/examples/using-cdn/index.html Renders the duffel-ancillaries component with offer details and listens for the 'onPayloadReady' event. The event detail contains the payload needed to create an order with the Duffel API. It checks if baggage and seats have been selected before attempting to create the order. ```javascript const duffelAncillariesElement = document.querySelector("duffel-ancillaries"); // 3. Render the component with the required data, you can safely call this function as many times as you want. E.g. when your passenger data changes. duffelAncillariesElement.render({ offer_id: "__OFFER_ID__", client_key: "__CLIENT_KEY__", passengers: "__PASSENGERS__", services: ["seats", "bags"], debug: true, }); // 4. Listen to 'onPayloadReady' event on the component. `event.detail.data` contains the payload you need to send to Duffel's API to create an order. duffelAncillariesElement.addEventListener("onPayloadReady", (event) => { console.log("onPayloadReady\n", event.detail); const hasSelectedBaggage = Array.isArray(event.detail.metadata.baggage_services) && event.detail.metadata.baggage_services.length > 0; const hasSelectedSeats = Array.isArray(event.detail.metadata.seat_services) && event.detail.metadata.seat_services.length > 0; console.log({ hasSelectedBaggage, hasSelectedSeats, }); if (hasSelectedBaggage && hasSelectedSeats) { // 5. Send the order creation payload to your server to create an order with the Duffel API. fetch("/create-order", { method: "POST", body: JSON.stringify({ data: event.detail.data }), }) .then((response) => response.json()) .then(({ data }) => console.log("Order created", data)) .catch((error) => console.error("Order creation failed", error)); } }); ``` -------------------------------- ### Include HTML Custom Element Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Include the custom element tag in your HTML file. This tag will be rendered by the imported JavaScript functions. ```html ``` -------------------------------- ### Render React DuffelAncillaries Component Source: https://github.com/duffelhq/duffel-components/blob/main/README.md Render the DuffelAncillaries component with necessary props like offer, seat_maps, services, and passengers. The onPayloadReady prop is a callback function that receives the payload when ready. ```jsx ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.