Braintree Web SDK

Adds Braintree Web SDK (braintree-web) for integrating Braintree payment processing in Next.js applications. Provides client-side tokenization for credit cards, PayPal, and other payment methods. Requires a client authorization token from your server.

Copy the files below, or open this folder on GitHub. Each file is stamped with a limited-use licence, generator and date. SHA-256 is of the published catalog bytes, before the stamp.

id: braintree
stack: Next.js
version: 1.0.0
compatibility: nextjs >=16 <17 · react >=19 <20
requires: nextjs-base
env vars: NEXT_PUBLIC_BRAINTREE_AUTHORIZATION

Verified passing · daily buildIntegrity sha256:2aa9a111b4dcf610…

Files (3)

types/braintree-web.d.ts · sha256:2aa9a111b4dcf610…

// Licensed by BotKelp — https://www.botkelp.com

/**
 * TypeScript declarations for braintree-web.
 * 
 * This file provides type declarations for the Braintree Web SDK
 * which doesn't include its own TypeScript types.
 */

declare module 'braintree-web' {
  interface Client {
    create(options: ClientCreateOptions): Promise<ClientInstance>;
  }

  interface ClientCreateOptions {
    authorization: string;
  }

  interface ClientInstance {
    request(options: RequestOptions): Promise<any>;
  }

  interface RequestOptions {
    endpoint: string;
    method?: string;
    data?: any;
  }

  interface HostedFields {
    create(options: HostedFieldsCreateOptions): Promise<HostedFieldsInstance>;
  }

  interface HostedFieldsCreateOptions {
    client: ClientInstance;
    styles?: Record<string, Record<string, string>>;
    fields: Record<string, FieldOptions>;
  }

  interface FieldOptions {
    selector: string;
    placeholder?: string;
  }

  interface HostedFieldsInstance {
    on(event: string, callback: (event: HostedFieldsEvent) => void): void;
    tokenize(): Promise<TokenizeResponse>;
    teardown(): Promise<void>;
  }

  interface HostedFieldsEvent {
    emittedBy: string;
    fields: Record<string, FieldState>;
    cards?: Array<{ type: string; code: string }>;
  }

  interface FieldState {
    isValid: boolean;
    isPotentiallyValid: boolean;
    isEmpty: boolean;
  }

  interface TokenizeResponse {
    token: string;
    nonce: string;
  }

  interface PayPal {
    create(options: PayPalCreateOptions): Promise<PayPalInstance>;
  }

  interface PayPalCreateOptions {
    client: ClientInstance;
    merchantId?: string;
    currencyCode?: string;
    intent?: 'authorize' | 'order' | 'sale';
  }

  interface PayPalInstance {
    tokenize(options: PayPalTokenizeOptions): Promise<PayPalTokenizeResponse>;
    teardown(): Promise<void>;
  }

  interface PayPalTokenizeOptions {
    flow: 'vault' | 'checkout';
    amount: string;
    currencyCode: string;
    intent?: 'authorize' | 'order' | 'sale';
  }

  interface PayPalTokenizeResponse {
    nonce: string;
    details: PayPalDetails;
  }

  interface PayPalDetails {
    payerId: string;
    paymentId: string;
    intent: string;
    paymentMethodToken: string;
  }

  // Main exports
  export const client: Client;
  export const hostedFields: HostedFields;
  export const paypal: PayPal;
}

declare module 'braintree-web/client' {
  import { Client, ClientCreateOptions, ClientInstance } from 'braintree-web';
  export { Client, ClientCreateOptions, ClientInstance };
}

declare module 'braintree-web/hosted-fields' {
  import { HostedFields, HostedFieldsCreateOptions, HostedFieldsInstance, HostedFieldsEvent, FieldState, TokenizeResponse } from 'braintree-web';
  export { HostedFields, HostedFieldsCreateOptions, HostedFieldsInstance, HostedFieldsEvent, FieldState, TokenizeResponse };
}