PaymentRequestComponent - Documentation

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:

payment-request/external/payment-request.js, line 136

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:

payment-request/external/payment-request.js, line 498

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 payemnt 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 configruation will be used.

Source:

payment-request/external/payment-request.js, line 288

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']

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:

payment-request/external/payment-request.js, line 58

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:

payment-request/external/payment-request.js, line 561

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:

payment-request/external/payment-request.js, line 436

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:

payment-request/external/payment-request.js, line 44

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:

payment-request/external/payment-request.js, line 51

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:

payment-request/external/payment-request.js, line 21

Events

shippingAddressChange :PaymentRequestComponent~shippingEventObject

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

Source:

payment-request/external/payment-request.js, line 74

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:

payment-request/external/payment-request.js, line 89

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);
  });
});