Can I use it in hybrid mobile app?

[ckristhoff]

My mobile app is developed with hybrid technologies (javascript). Can I use this one in my mobile app? I tried it but I'm getting errors after the payment.

[Cyberfolks]

hi @ckristhoff can you please share your way. im using in reactjs and all scripts are loaded successfully but issue is response handling. how can we handle callback/return data.

[ckristhoff]

Hi @Cyberfolks don't use this package in your react native app. It uses browser features. Use the android and IOS native libs and integrate by native modules https://reactnative.dev/docs/native-modules-ios https://reactnative.dev/docs/native-modules-android Of course you need to know java and objective-c/swift basis.

[bhuvanmalik007]

Hi @Cyberfolks , were you able to handle the responses in React? Please let me know how you did it if you were able to. I'm stuck in the same situation. Thanks!

[fgarciapds]

Perhaps my solution in Angular can provide some insight.

1) Load an external script as shown below:

/ eslint-disable @typescript-eslint/no-unused-vars / let ATHM_Checkout; let pmtMethodResponse; let pmtMethodStatus; function setATHMCheckout(checkout) { ATHM_Checkout = checkout; }

2) Declare the setATHMCheckout function in your solution in order to have access to it. In Angular this is down as follows:

declare const setATHMCheckout: any;

3) In your solution, use a method to build the ATHM_Checkout object. At the very end you call your setATHMCheckout function passing the object that you just built. This function from your external script will assign your referenced object to the ATHM_Checkout variable name the ATH Móvil's javascript is expecting.

setATHMovilObject() { this.athmCheckout = new ATHObject(); this.setATHMovilHeaders(this.athmCheckout); this.setATHMovilHandlers(this.athmCheckout); this.setGlobalAmounts(this.athmCheckout); const items = new Array(); this.athmCheckout.items = items; this.setATHMovilItems(); setATHMCheckout(this.athmCheckout); }

On Fri, Jul 9, 2021 at 3:18 PM Bhuvan Malik @.***> wrote:

Hi @Cyberfolks https://github.com/Cyberfolks , were you able to handle the responses in React? Please let me know how you did it if you were able to. I'm stuck in the same situation. Thanks!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/evertec/athmovil-javascript-api/issues/3#issuecomment-877404437, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJJYXR4CDFDX57BGW3JLJRTTW5DPRANCNFSM4HZFKOUQ .

[Cyberfolks]

hi @bhuvanmalik007 sorry for too much late we were busy in working. i did just initial setup and later on client change is mind and stop woking with Movil. here is my initial code how i handled this. REACT JS. load movil script in index.html of project. then load this script in your component. declare Variable before starting component.

let PayPalButton = null;

Start your component

const MakePayment = ({ bill, items, itemsTotal }) => {

use Hook useEffect to load script.

` useEffect(() => {

//Check button status after each 10 sec. you can change it to any. PayPalButton = setInterval(intervalBtn, 10 *1000);

const paymentData = document.createElement('script');
let data = document.createTextNode(`ATHM_Checkout = {
      env: 'sandbox',
      publicToken: 'publicToken',
      timeout: 500,
      theme: 'btn',
      lang: 'en',
      total: 1.00,
      tax: 1.00,
      subtotal: 1.00,
      metadata1: '++ test',
      metadata2: 'metadata2 test',
      items: [
        {
          "name": "First Item",
          "description": "This is a description.",
          "quantity": "1",
          "price": "1.00",
          "tax": "1.00",
          "metadata": "metadata test"
        }
      ],
      onCompletedPayment: function (response) {
        console.log('onCompletedPayment', response)
        window.completePay = response
      },
      onCancelledPayment: function (response) {
        // console.log('onCancelledPayment', response)
        // window.canPay = response
      },
      onExpiredPayment: function (response) {
      // console.log('onExpiredPayment', response)
      // window.expirePay = response
      }
    }`
)
paymentData.async = true;
paymentData.appendChild(data);
const script = document.createElement('script');
const jQueryData = document.createElement('script');
script.src = `https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js`;
jQueryData.src = `https://www.athmovil.com/api/js/v2/athmovilV2.js`;
script.async = true;
jQueryData.async = true;
document.body.appendChild(script);
document.body.appendChild(jQueryData);
document.body.appendChild(paymentData);

})

const paymentVerify= (data) => { console.log('paymentVerify', data) fetch(https://www.athmovil.com/rs/v2/transactionStatus, { method: "POST", headers: { 'Content-Type': 'application/json' }, body: { "publicToken": "", "privateToken": "", "referenceNumber": "" } }) .then((response) => response.json()) .then((responseData) => { console.log('responseData', responseData); }) .catch((error) => { console.log('error', error); }); }

const intervalBtn= () => { if (window.completePay != undefined) { paymentVerify(window.completePay); clearInterval(PayPalButton) } }`

Remember its was just initial setup but it was working fine on test.