Web Payments API with Pagar.me

webpayment.js

const paymentMethods = [{
  supportedMethods: 'basic-card',
  data: {
    supportedNetworks: ['visa', 'mastercard', 'amex'],
  },
}]

// Checkout details
const details = {
  displayItems: [
    {
      label: 'Red pill',
      amount: { currency: 'BRL', value: '100.00' }
    },
    {
      label: 'Blue pill',
      amount: { currency: 'BRL', value: '100.00' }
    }
  ],
  total: {
    label: 'Total',
    amount: { currency: 'BRL', value : '200.00' }
  }
}

const options = {}
const request = new PaymentRequest(paymentMethods, details, options)

request.show()
  .then((result) => {
    console.log(result)

    const body = {
      encryption_key: '',
      amount: 20000,
      card_holder_name: result.details.cardholderName,
      card_number: result.details.cardNumber,
      card_cvv: result.details.cardSecurityCode,
      card_expiration_date: result.details.expiryMonth + result.details.expiryYear.substr(-2),
    }

    const options = {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json'
      }),
      body: JSON.stringify(body),
    }

    return fetch('https://api.pagar.me/1/transactions', options)
      .then(response => response.json())
      .then((data) => {
        console.log(data)

        if (data.status === 'authorized') {
          return result.complete('success')
        }

        return result.complete('fail')
      })
  })
  .catch(console.error)