const authorization = yield UPS('braintree/client_token', token);
const client = yield bt.client.create({ authorization });

async function initHostedFields(client, options) {
  const { errorHandler, fieldEventsCallback } = options;
  try {
    const hostedFields = await(bt.hostedFields.create({
      client,
      styles: {
        'input': {
          'font-size': '14pt',
          'color': '#3A3A3A',
          'padding': '0 0 0 4px',
        },

        '.number': {
          'font-family': 'monospace',
        },

        '.valid': {
          'color': 'limegreen',
        },

        '.invalid': {
          'color': 'tomato',
        }
      },
      fields: {
        number: {
          selector: '#card-number',
          placeholder: '1111 1111 1111 1111',
        },
        cvv: {
          selector: '#cvv',
          placeholder: '•••',
        },
        expirationDate: {
          selector: '#expiration-date',
          placeholder: '12/34',
        }
      }
    }));

    hostedFields.on('notEmpty', e => {
      fieldEventsCallback(e, 'notEmpty');
      updateBraintree('hasNewCardInfo', true);
    });

    hostedFields.on('empty', e => {
      fieldEventsCallback(e, 'empty');
    });

    hostedFields.on('validityChange', e => {
      fieldEventsCallback(e, 'validityChange');
    });

    return hostedFields;
    // setState({ hostedFields });
  } catch (error) {
    errorHandler(error);
    handleBraintreeError(error);
  }
};

const payload = await hostedFields.tokenize();

const paymentMethodNonce = payload.nonce;
const { receipt } = (await axios({
  method: 'post',
  url: `${UPS_BASE_PATH}/api/purchase`,
  data: {
    paymentMethodNonce,
    items: [item],
    promotionCodes: [promo],
  },
  headers: {
    Authorization: `Bearer ${token}`,
  }
})).data;