The JS Payments SDK provides an easy and flexible way to integrate various payment methods into your JavaScript applications. It supports ACH, Credit Card, Debit Card, PayPal, and Apple Pay payment flows.

URLs

Sandbox environment JS SDK: https://sdk.embedded-payments.a.intuit.com/staging/embedded-payment-ui-sdk.en.js

Production environment JS SDK: https://sdk.embedded-payments.a.intuit.com/embedded-payment-ui-sdk.en.js

Include the script to your page

Before calling the render method, you need to include the SDK script in your HTML file: <script src="https://sdk.embedded-payments.a.intuit.com/staging/embedded-payment-ui-sdk.en.js"></script>.

Payment Flows Supported:

ACH/CC/DC Payment Flow

• The SDK listens for clicks on the submitButtonRef
• When clicked, a CREATE_TOKEN event is sent to the iframe
• The iframe contacts the Intuit token server to tokenize the payment method
• The provided handleSubmitPayment function is then invoked

PayPal Payment Flow

• When PayPal is selected, the SDK replaces the submit button with the PayPal button
• Uses handlePayPalCreateOrder and handlePayPalApproveOrder as callbacks

Apple Pay Flow

• When Apple Pay is selected, the SDK replaces the submit button with the Apple Pay button
• All Apple Pay handling is managed by the SDK internally
• Calls handleSubmitPayment with the applePayRequest parameter

const container = document.getElementById("iframe-container");
const submitButton = document.getElementById("submit-button");

let payPalIntuitTransactionId;

window.EmbeddedPayment.render({
  sdkToken: "token", // Token provided to you by the integration administrator
  env: "sandbox",
  amount: 100,
  companyName: "Foo Company Name",
  companyWebsite: "foo.com",
  payorName: "John Smith", // Optional, prepopulate CC/DC/ACH form
  payorZip: "11111", // Optional, prepopulate CC/DC/ACH form
  payorEmail: "foo@bar.com", // Payor email
  companyId: "9341452559410447",
  containerRef: container, // Element to render iframe
  submitButtonRef: submitButton, // Element to listen for click events and replace for PayPal/Apple Pay
  enabledPaymentMethods: ["card", "bank", "payPal", "venmo", "applePay"], // Order-specific, with the first one as the default.
  mode: "payment", // Optional, default is "payment". Other options: "wallet-create", "wallet-edit"
  style: "default", // Optional, default is "default". Other option: "nb44"
  // savedWallet: { // Required when mode is "wallet-edit"
  //   id: "djQuMTo5MzQxNDUyNTU5NDEwNDQ3OmJlMzY5M2Q5NjU",
  //   maskedNumber: "xxxxxxxxxxxx1111",
  //   expYear: "2029",
  //   expMonth: "11",
  //   cardType: "VISA"
  // }
  onApprove: ({ transactionId }) => {
    // Fires when any payment is completed, use it to show success screen
  },
  onError: (error) => {
    // Handle error
    // Fires when any error occurs, use it to show error message
  },
  onSubmitStart: ({ paymentMethod }) => {
    // Handle submit start
    // Fires when any payment submission starts, use it to disable the payment button
  },
  onSubmitEnd: ({ paymentMethod }) => {
    // Handle submit end
    // Fires when any payment submission finishes, use it to enable a payment button
  },
  handleSubmitPayment: async ({
    tokenizedPaymentMethod, // defined only if `paymentMethod` is `card` or `bank`
    paymentMethodType,
    riskProfileToken,
    applePayRequest // defined only if `paymentMethod` is `applePay`
  }) => {
    // Used for CC/DC/ACH/AP payments
    // Should return { id } (or { transactionId } for backwards compatibility)
    const response = await fetch("/order", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        tokenizedPaymentMethod,
        paymentMethodType,
        riskProfileToken,
        applePayRequest
      }),
    });
    const data = await response.json();
    return { id: data.id };
  },
  handleCreateWallet: async ({
    tokenizedPaymentMethod, // defined only if `paymentMethod` is `card` or `bank`
    paymentMethodType,
    riskProfileToken
  }) => {
    // Used for wallet creation
    // Make API call to create new wallet
    return { id: "wallet-id-123" };
  },
  handleEditWallet: async ({
    tokenizedPaymentMethod, // defined only if `paymentMethod` is `card` or `bank`
    paymentMethodType,
    riskProfileToken,
    savedWallet // contains the existing wallet information
  }) => {
    // Used for wallet editing
    // Make API call to update existing wallet
    return { id: savedWallet.id };
  },
  handlePayPalCreateOrder: async () => {
    // Implementation of the /paypal-create-order API request to the Merchant Server
    // Should save payPalIntuitTransactionId as a variable to be used later on the handlePayPalApproveOrder call
    // Should return paypalOrderId as string
    const response = await fetch("/initiate-paypal-payment", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
    });
    const data = await response.json();
    payPalIntuitTransactionId = data.payment_response.payment_instrument_details.order_id;
    return payPalIntuitTransactionId;
  },
  handlePayPalApproveOrder: async () => {
    // Implementation of the /order API request to the Merchant Server
    // Should use previously saved payPalIntuitTransactionId
    // Should return { id } (or { transactionId } for backwards compatibility)
    const response = await fetch("/order", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        transactionId: payPalIntuitTransactionId,
      }),
    });
    const data = await response.json();
    return { id: data.id };
  },
});

// Update the payment amount
EmbeddedPayment.updateAmount(150.00);

// Update the payor zip code
EmbeddedPayment.updatePayorZip("94043");