BraintreePlugin

npm install braintree-web-drop-in

// The Braintree Dropin instancelet dropin: import('braintree-web-drop-in').Dropin;// Used to show/hide a "submit" button, which would be bound to the// `submitPayment()` method below.let showSubmitButton = false;// Used to display a "processing..." spinnerlet processing = false;//// This method would be invoked when the payment screen is mounted/created.//async function renderDropin(order: Order, clientToken: string) {  // Lazy load braintree dropin because it has a reference  // to `window` which breaks SSR  dropin = await import('braintree-web-drop-in').then((module) =>    module.default.create({      authorization: clientToken,      // This assumes a div in your view with the corresponding ID      container: '#dropin-container',      card: {        cardholderName: {            required: true,        },        overrides: {},      },      // Additional config is passed here depending on      // which payment methods you have enabled in your      // Braintree account.      paypal: {        flow: 'checkout',        amount: order.totalWithTax / 100,        currency: 'GBP',      },    }),  );  // If you are using the `storeCustomersInBraintree` option, then the  // customer might already have a stored payment method selected as  // soon as the dropin script loads. In this case, show the submit  // button immediately.  if (dropin.isPaymentMethodRequestable()) {    showSubmitButton = true;  }  dropin.on('paymentMethodRequestable', (payload) => {    if (payload.type === 'CreditCard') {      showSubmitButton = true;    }    if (payload.type === 'PayPalAccount') {      this.submitPayment();    }  });  dropin.on('noPaymentMethodRequestable', () => {    // Display an error  });}async function generateClientToken() {  const { generateBraintreeClientToken } = await graphQlClient.query(gql`    query GenerateBraintreeClientToken {      generateBraintreeClientToken    }  `);  return generateBraintreeClientToken;}async submitPayment() {  if (!dropin.isPaymentMethodRequestable()) {    return;  }  showSubmitButton = false;  processing = true;  const paymentResult = await dropin.requestPaymentMethod();  const { addPaymentToOrder } = await graphQlClient.query(gql`    mutation AddPayment($input: PaymentInput!) {      addPaymentToOrder(input: $input) {        ... on Order {          id          payments {            id            amount            errorMessage            method            state            transactionId            createdAt          }        }        ... on ErrorResult {          errorCode          message        }      }    }`, {      input: {        method: 'braintree', // The code of you Braintree PaymentMethod        metadata: paymentResult,      },    },  );  switch (addPaymentToOrder?.__typename) {      case 'Order':          // Adding payment succeeded!          break;      case 'OrderStateTransitionError':      case 'OrderPaymentStateError':      case 'PaymentDeclinedError':      case 'PaymentFailedError':        // Display an error to the customer        dropin.clearSelectedPaymentMethod();  }}

BraintreePlugin.init({  environment: Environment.Sandbox,  storeCustomersInBraintree: true,}),

const { generateBraintreeClientToken } = await graphQlClient.query(gql`  query GenerateBraintreeClientToken($includeCustomerId: Boolean) {    generateBraintreeClientToken(includeCustomerId: $includeCustomerId)  }`, { includeCustomerId: false });

const { addPaymentToOrder } = await graphQlClient.query(gql`  mutation AddPayment($input: PaymentInput!) {    addPaymentToOrder(input: $input) {      ...Order      ...ErrorResult    }  }`, {    input: {      method: 'braintree',      metadata: {        ...paymentResult,        includeCustomerId: false,      },    }  );

class BraintreePlugin {    static options: BraintreePluginOptions = {};    init(options: BraintreePluginOptions) => Type<BraintreePlugin>;}

npm install @vendure-community/braintree-plugin braintreenpm install -D @types/braintree