Payment Integration

0-tiendanube-payment-sdk.md

Instructions about how integrate all external methods

To generate and get the gist files updated:

var scripts = {}
document.querySelectorAll('.file-header .btn.btn-sm ').forEach(item => {
	const script = item.href.replace('gist.github', 'rawgit')
	const data = script.split('/')
	const name = data[data.length-1].replace('.js', '')
	scripts[name] = script
})

JSON.stringify(scripts)

Just put this code on the chrome console to get all files updated

cash_on_delivery-custom.js

LoadPaymentMethod(function(Checkout, Methods) {
  var Redirect = new Methods.CustomPayment({
    name: 'cash_on_delivery',
    scripts: 'https://rawgit.com/wallynm/e6df9dd0c7ed6009c9210cdb350fbec6/raw/d4a2b3c4fcb5dd3cd182565c8a0f82fc9bfc0e16/payment-pagseguro-external.js',
    onSubmit: function() {
      Checkout.successHandler()
    }
  })

  Checkout.addMethod(Redirect)
})

itaushopline-redirect.js

LoadPaymentMethod(function(Checkout, Methods) {
  var Redirect = new Methods.RedirectPayment({
    name: 'ItauShopline',
    scripts: 'https://rawgit.com/wallynm/e6df9dd0c7ed6009c9210cdb350fbec6/raw/d4a2b3c4fcb5dd3cd182565c8a0f82fc9bfc0e16/payment-pagseguro-external.js',
    onSubmit: function() {
      console.info('Submitted Credit Pagseguro: ', this.data)
    },

    onLoad: function() {
      console.info('onLoad -> External script loaded with success')
    }
  })

  Checkout.addMethod(Redirect)
})

mercadopago-modal.js

LoadPaymentMethod(function(Checkout, Methods) {
  var Modal = new Methods.ModalPayment({
    name: 'Pagseguro',
    scripts: 'https://www.mercadopago.com/org-img/jsapi/mptools/buttons/render.js',
    onSubmit: function() {
      $MPC.openCheckout({
        response: response.action,
        mode: 'modal',
        onreturn: (data) => {
        }
      })
    },

    onLoad: function() {
      console.info('onLoad -> External script loaded with success')
    }
  })

  Checkout.addMethod(Modal)
})

moip-credit.js

LoadPaymentMethod(function(Checkout, Methods) { 
  var MoipCredit = new Methods.Transparent.CreditPayment({
    name: 'Moip',
    onSubmit: function() {
      console.info('Submitted Credit Moip: ', this.data)
    }
  })

  Checkout.addMethod(MoipCredit)
})

moip-debit.js

LoadPaymentMethod(function(Checkout, Methods) { 
  var MoipDebit = new Methods.Transparent.DebitPayment({
    name: 'Moip',
    onSubmit: function() {
      console.info('Submitted Credit Moip: ', this.data)
    }
  })

  Checkout.addMethod(MoipDebit)
})

moip-offline.js

LoadPaymentMethod(function(Checkout, Methods) { 
  var Offline = new Methods.Transparent.OfflinePayment({
    name: 'Moip',
    onSubmit: function() {
      console.info('Submitted Credit Pagseguro: ', this.data)
    }
  })

  Checkout.addMethod(Offline)
})

pagseguro-credit_card.js

LoadPaymentMethod(function(Checkout, Methods) { 
  var PagseguroCredit = new Methods.Transparent.CreditPayment({
    name: 'Pagseguro',
    scripts: 'https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js',
    getBrand: function() {
      var self = this;
      PagSeguroDirectPayment.getBrand({
        cardBin: this.data.form.cardnumber,
        success: function(response) {
          callback('success', response)
        },
        error: function(response) {
          callback('error', response)
        }
      });
    },
    
    onSubmit: function() {
      PagSeguroDirectPayment.onSenderHashReady(function(response){
        if(response.status == 'error') {
            console.log(response.message);
            return false;
        }

        var hash = response.senderHash; //Hash estará disponível nesta variável.
      });
    }
  })

  Checkout.addMethod(PagseguroCredit)
})

pagseguro-debit.js

LoadPaymentMethod(function(Checkout, Methods) { 
  var PagseguroDebit = new Methods.Transparent.DebitPayment({
    name: 'Pagseguro',
    scripts: 'https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js',
    onSubmit: function() {
      console.info('Submitted Debit Pagseguro: ', this.data)
    },

    onLoad: function() {
      console.info('onLoad -> External script loaded with success')
    }
  })
  
  Checkout.addMethod(PagseguroDebit)
})

pagseguro-modal.js

LoadPaymentMethod(function(Checkout, Methods) {
  var method = this
  var Modal = new Methods.ModalPayment({
    name: 'Pagseguro',
    scripts: 'https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js',
    onSubmit: function(data) {
      PagSeguroLightbox({
        code: data.code
      }, {
        success: function(data){
          Checkout.successHandler()
        },
        abort: function(data){
          Checkout.successHandler()
        }
      })
    },

    onLoad: function() {
      console.info('onLoad -> External script loaded with success')
    }
  })

  Checkout.addMethod(Modal)
})

pagseguro-offline.js

LoadPaymentMethod(function(Checkout, Methods) { 
  var Offline = new Methods.Transparent.OfflinePayment({
    name: 'Pagseguro',
    onSubmit: function() {
      console.info('Submitted Credit Pagseguro: ', this.data)
    }
  })

  Checkout.addMethod(Offline)
})

pagseguro-redirect.js

LoadPaymentMethod(function(Checkout, Methods) {
  var Redirect = new Methods.RedirectPayment({
    name: 'Pagseguro'
  })

  Checkout.addMethod(Redirect)
})

payment-mexican.js

LoadPaymentMethod(function(Checkout, Methods) {
  var Redirect = new Methods.RedirectPayment({
    name: 'MexicanPayment',
    scripts: 'https://rawgit.com/wallynm/e6df9dd0c7ed6009c9210cdb350fbec6/raw/d4a2b3c4fcb5dd3cd182565c8a0f82fc9bfc0e16/payment-pagseguro-external.js',
    onSubmit: function() {
      console.info('Submitted Payment Mexican: ', this.data)
    },
    onLoad: function() {
      console.info('onLoad -> External script loaded with success')
    }
  })

  Checkout.addMethod(Redirect)
})

payment-pagseguro-external.js

(function() {
  console.info('payment-pagseguro-external.js -> External script loaded with success')
})(this)

paypal-redirect.js

LoadPaymentMethod(function(Checkout, Methods) {
  var Redirect = new Methods.RedirectPayment({
    name: 'PayPal',
    scripts: 'https://rawgit.com/wallynm/e6df9dd0c7ed6009c9210cdb350fbec6/raw/d4a2b3c4fcb5dd3cd182565c8a0f82fc9bfc0e16/payment-pagseguro-external.js',
    onSubmit: function() {
      console.info('Paypal Redirect: ', this.data)
    },

    onLoad: function() {
      console.info('onLoad -> External script loaded with success')
    }
  })

  Checkout.addMethod(Redirect)
})