PaymentRequestComponent

PaymentRequestComponent

This class represents a Payment Request component produced by braintree-web/payment-request.create. Instances of this class have methods for initializing a Payment Request.

Note: This component is currently in beta and the API may include breaking changes when upgrading. Please review the Changelog for upgrade steps whenever you upgrade the version of braintree-web.

Constructor

new PaymentRequestComponent(options)

Do not use this constructor directly. Use braintree-web.payment-request.create instead.

Parameters:
Name Type Description
options object

The Payment Request Component create options.
Source:

Methods

canMakePayment(configuration, callbackopt) → {Promise|void}

Check if the customer can make payments.

Parameters:
Name Type Attributes Description
configuration object

A paymentRequestConfiguration.
callback callback <optional>

Called on completion.
Source:
Example
var paymentDetails = {
	 total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: '10.00',
    }
  }
};

paymentRequestInstance.canMakePayment({
  details: paymentDetails
}).then(function (result) {
  if (result) {
    // set up payment request button
  }
});

createSupportedPaymentMethodsConfiguration(type, overridesopt) → {object}

Create an object to pass into tokenize to specify a custom configuration. If no overrides are provided, the default configuration will be provided.

Parameters:
Name Type Attributes Description
type string

The supported payment method type. Possible values are basicCard and googlePay. If no type is provided, the function will throw an error. If the type provided is not an enabled payment method for the merchant account , the function will throw an error.
overrides object <optional>

The configuration overrides for the data property on the supported payment methods objects. If not passed in, the default configuration for the specified type will be provided. If a property is not provided, the value from the default configuration will be used.
Source:
Examples

Getting the default configuration for a specified type 

var configuration = paymentRequestInstance.createSupportedPaymentMethodsConfiguration('basicCard');

configuration.supportedMethods; // 'basic-card'
configuration.data.supportedNetworks; // ['visa', 'mastercard', 'amex'] <- whatever the supported card networks for the merchant account are

Specifying overrides 

var configuration = paymentRequestInstance.createSupportedPaymentMethodsConfiguration('basicCard', {
  supportedNetworks: ['visa'],
  supportedTypes: ['credit', 'debit']
});

configuration.supportedMethods; // 'basic-card'
configuration.data.supportedNetworks; // ['visa']
configuration.data.supportedTypes; // ['credit', 'debit']

off(event, handler) → {void}

Unsubscribes the handler function to a named event.

Parameters:
Name Type Description
event string

The name of the event to which you are unsubscribing.
handler function

The callback for the event you are unsubscribing from.
Source:
Example

Subscribing and then unsubscribing from a Payment Request event, in this case 'shippingAddressChange' 

braintree.paymentRequest.create({ ... }, function (createErr, paymentRequestInstance) {
  var callback = function (event) {
    console.log(event.target.shippingAddress);
  };
  paymentRequestInstance.on('shippingAddressChange', callback);

  // later on
  paymentRequestInstance.off('shippingAddressChange', callback);
});

on(event, handler) → {void}

Subscribes a handler function to a named event. event should be shippingAddressChange or shippingOptionChange. For convenience, you can also listen on shippingaddresschange or shippingoptionchange to match the event listeners in the Payment Request API documentation. Events will emit a shippingEventObject.

Parameters:
Name Type Description
event string

The name of the event to which you are subscribing.
handler function

A callback to handle the event.
Source:
Example

Listening to a Payment Request event, in this case 'shippingAddressChange' 

braintree.paymentRequest.create({ ... }, function (createErr, paymentRequestInstance) {
  paymentRequestInstance.on('shippingAddressChange', function (event) {
    console.log(event.target.shippingAddress);
  });
});

teardown(callbackopt) → {Promise|void}

Cleanly remove anything set up by create.

Parameters:
Name Type Attributes Description
callback callback <optional>

Called on completion.
Source:
Examples
paymentRequestInstance.teardown();

With callback 

paymentRequestInstance.teardown(function () {
  // teardown is complete
});

tokenize(configuration, callbackopt) → {Promise|void}

Tokenizes a Payment Request

Parameters:
Name Type Attributes Description
configuration object

A paymentRequestConfiguration.
callback callback <optional>

The second argument, data, is a paymentPayload. If no callback is provided, tokenize returns a function that resolves with a tokenizePayload.
Source:
Examples
paymentRequestInstance.tokenize({
  details: {
    total: {
      label: 'Price',
      amount: {
        currency: 'USD',
        value: '100.00'
      }
    }
  }
}).then(function (payload) {
  // send payload.nonce to server

  // examine the raw response (with card details removed for security) from the payment request
  console.log(payload.details.rawPaymentResponse);
}).catch(function (err) {
  if (err.code === 'PAYMENT_REQUEST_CANCELED') {
    // payment request was canceled by user
  } else {
    // an error occurred while processing
  }
});

Tokenize only Visa cards 

var basicCardConfiguration = paymentRequestInstance.createSupportedPaymentMethodsConfiguration('basicCard', {
  supportedNetworks: ['visa']
};

paymentRequestInstance.tokenize({
  supportedPaymentMethods: [basicCardConfiguration],
  details: {
    total: {
      label: 'Price',
      amount: {
        currency: 'USD',
        value: '100.00'
      }
    }
  }
}).then(function (payload) {
  // send payload.nonce to your server
});

Include payment request options 

paymentRequestInstance.tokenize({
  details: {
    total: {
      label: 'Price',
      amount: {
        currency: 'USD',
        value: '100.00'
      }
    }
  },
  options: {
    requestPayerName: true,
    requestPayerPhone: true,
    requestPayerEmail: true
  }
}).then(function (payload) {
  // send payload.nonce to your server
  // collect additional info from the raw response
  console.log(payload.details.rawPaymentResponse);
});

Request Shipping Information 

var shippingOptions = [
  {
    id: 'economy',
    label: 'Economy Shipping (5-7 Days)',
    amount: {
      currency: 'USD',
      value: '0',
    },
  }, {
    id: 'express',
    label: 'Express Shipping (2-3 Days)',
    amount: {
      currency: 'USD',
      value: '5',
    },
  }, {
    id: 'next-day',
    label: 'Next Day Delivery',
    amount: {
      currency: 'USD',
      value: '12',
    },
  },
];
var paymentDetails = {
	 total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: '10.00',
    }
  },
  shippingOptions: shippingOptions
};

paymentRequestInstance.on('shippingAddressChange', function (event) {
  // validate shipping address on event.target.shippingAddress
  // make changes to the paymentDetails or shippingOptions if necessary

  event.updateWith(paymentDetails)
});

paymentRequestInstance.on('shippingOptionChange', function (event) {
  shippingOptions.forEach(function (option) {
    option.selected = option.id === event.target.shippingOption;
  });

  event.updateWith(paymentDetails)
});

paymentRequestInstance.tokenize({
  details: paymentDetails,
  options: {
    requestShipping: true
  }
}).then(function (payload) {
  // send payload.nonce to your server
  // collect shipping information from payload
  console.log(payload.details.rawPaymentResponse.shippingAddress);
});

Type Definitions

paymentRequestConfiguration :object

Properties:
Name Type Attributes Description
configuration.details object

The payment details. For details on this object, see Google's PaymentRequest API documentation.
configuration.supportedPaymentMethods array <optional>

The supported payment methods. If not passed in, the supported payment methods from the merchant account that generated the authorization for the client will be used. For details on this array, see Google's PaymentRequest API documentation.
configuration.options object <optional>

Additional payment request options. For details on this object, see Google's PaymentRequest API documentation.
Source:

shippingEventObject :object

The event payload sent from on.

Properties:
Name Type Description
target object

An object which contains data about the event.
updateWith function

A method to call with the updated Payment Request details.
Source:

tokenizePayload :object

Properties:
Name Type Description
nonce string

The payment method nonce.
details object

Additional account details.

Properties
Name Type Description
bin string

The BIN number of the card..
cardType string

Type of card, ex: Visa, MasterCard.
lastFour string

Last four digits of card number.
lastTwo string

Last two digits of card number.
rawPaymentResponse object

The raw payment response from the payment request, with sensitive card details removed.
description string

A human-readable description.
type string

The payment method type, CreditCard or AndroidPayCard.
binData object

Information about the card based on the bin.

Properties
Name Type Description
commercial string

Possible values: 'Yes', 'No', 'Unknown'.
countryOfIssuance string

The country of issuance.
debit string

Possible values: 'Yes', 'No', 'Unknown'.
durbinRegulated string

Possible values: 'Yes', 'No', 'Unknown'.
healthcare string

Possible values: 'Yes', 'No', 'Unknown'.
issuingBank string

The issuing bank.
payroll string

Possible values: 'Yes', 'No', 'Unknown'.
prepaid string

Possible values: 'Yes', 'No', 'Unknown'.
productId string

The product id.
Source:

Events

shippingAddressChange :PaymentRequestComponent~shippingEventObject

This event is emitted when the customer selects a shipping address.

Source:
Example

Listening to a shipping address change event 

braintree.paymentRequest.create({ ... }, function (createErr, paymentRequestInstance) {
  paymentRequestInstance.on('shippingAddressChange', function (event) {
    // validate event.target.shippingAddress if needed

    event.updateWith(paymentRequestDetails);
  });
});

shippingOptionChange :PaymentRequestComponent~shippingEventObject

This event is emitted when the customer selects a shipping option.

Source:
Example

Listening to a shipping option change event 

braintree.paymentRequest.create({ ... }, function (createErr, paymentRequestInstance) {
  paymentRequestInstance.on('shippingOptionChange', function (event) {
    // validate event.target.shippingOption if needed

    paymentRequestDetails.shippingOptions.forEach(function (option) {
      option.selected = option.id === event.target.shippingOption;
    });

    event.updateWith(paymentRequestDetails);
  });
});