braintree-web/local-payment

Example

Using the local payment component to set up an iDEAL button

var idealButton = document.querySelector('.ideal-button');

braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }

  braintree.localPayment.create({
    client: clientInstance,
    merchantAccountId: 'merchantAccountEUR',
  }, function (localPaymentErr, localPaymentInstance) {
    if (localPaymentErr) {
      console.error('Error creating local payment component:', localPaymentErr);
      return;
    }

    idealButton.removeAttribute('disabled');

    // When the button is clicked, attempt to start the payment flow.
    idealButton.addEventListener('click', function (event) {
      // Because this opens a popup, this has to be called as a result of
      // customer action, like clicking a button. You cannot call this at any time.
      localPaymentInstance.startPayment({
        paymentType: 'ideal',
        amount: '10.67',
        city: 'Den Haag',
        countryCode: 'NL',
        firstName: 'Test',
        lastName: 'McTester',
        line1: '123 of 456 Fake Lane',
        line2: 'Apartment 789',
        payerEmail: 'payer@example.com',
        phone: '123456789',
        postalCode: '1234 AA',
        currencyCode: 'EUR',
        onPaymentStart: function (data, continueCallback) {
          // Do any preprocessing to store the ID and setup webhook
          // Call start to initiate the popup
          continueCallback();
        }
*       }, function (startPaymentErr, payload) {
        if (startPaymentErr) {
          if (startPaymentErr.type !== 'CUSTOMER') {
            console.error('Error starting payment:', startPaymentErr);
          }
          return;
        }

        idealButton.setAttribute('disabled', true);

        console.log(payload.paymentId);
      });
    }, false);
  });
});