Callback on dialog closed when using openLightBox

SamerDiab commented 4 years ago

Usage

<body onload="goSell.openLightBox()">

<script th:inline="javascript">
  goSell.config({
        containerID: "root",
        gateway: {
            publicKey: "pk_test_Vlk842B1EA7tDN5QbrfGjYzh",
            language: "en",
            contactInfo: true,
            supportedCurrencies: ["USD"],
            supportedPaymentMethods: "all",
            saveCardOption: false,
            customerCards: true,
            notifications: 'standard',
            callback:function(response)  {
                console.log('callBack', response);
            },
            onClose:function ()  {
                console.log("onClose Event");
            },
            backgroundImg: {
                url: 'imgURL',
                opacity: '0.5'
            },
            style: {
                base: {
                    color: '#0061ff',
                    lineHeight: '18px',
                    fontFamily: 'sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    '::placeholder': {
                        color: 'rgba(55,234,199,0.26)',
                        fontSize: '15px'
                    }
                },
                invalid: {
                    color: 'red',
                    iconColor: '#fa755a '
                }
            }
        },

        order: {
            amount: 100,
            currency: "USD",
            shipping: null,
            taxes: null
        },
        transaction: {
            mode: 'charge',
            charge: {
                saveCard: false,
                threeDSecure: true,
                description: "Checkout",
                statement_descriptor: "Order descriptor",
                reference: {
                    transaction: "",
                    order: ""
                },
                metadata: {},
                receipt: {
                    email: false,
                    sms: false
                },
                redirect: "",
                post: null,
            }
        }
    });

</script>

Problem

onClose function property not getting called when dialog close is triggered

Expected result

onClose function property (or any other callback) get called when the dialog is closed

Trying to find callback through inspect element

UIStore.js closeNotification function not triggering any callback function, I may be wrong, lines 64 - 74:


  closeNotification(){
    var self = this;

    if(self.delete_card === null && self.errorHandler.options == null) {
      this.errorHandler.visable = false;
      setTimeout(function(){
        self.errorHandler = {};
      },
      500);
    }
  }

halaq commented 4 years ago

Hi @SamerDiab

Thanks for trying tap checkout.

First, don't call goSell.openLightBox() on page load, call the goSell.config() instead. goSell.openLightBox() is working correctly when you call it on click event (when click on Pay/ checkout button).

Second: which version and checkout mode are you using in your app?

SamerDiab commented 4 years ago

<script src="https://goSellJSLib.b-cdn.net/v1.4.1/js/gosell.js" type="text/javascript"></script>

And what is the use of goSell.config()? How do i open or close the box?

Also, i am getting 1105 response Customer id is invalid every single time, although i am sending the right data, any idea?

halaq commented 4 years ago

what is the use of goSell.config()?

goSell.config() should be called first, since it's generating the checkout token based on your tap credentials and settings.

How do i open or close the box? You will open it by the button that you will define it and will call goSell.openLightBox() function. You will close it from the user interface, you will find close icon on the top of the model dialog.

Customer id is invalid Based on the shared configurations, you missed the customer object:

customer:{
        first_name: "First Name",
        middle_name: "Middle Name",
        last_name: "Last Name",
        email: "demo@email.com",
        phone: {
            country_code: "965",
            number: "99999999"
        }
      },

for more details, check the documentation page :)

SamerDiab commented 4 years ago

This is the current code we are using, please note that we are using customer object and please disregard the template cdata,

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>goSell Demo</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <link href="https://goSellJSLib.b-cdn.net/v1.4.1/imgs/tap-favicon.ico" rel="shortcut icon"/>
    <link href="https://goSellJSLib.b-cdn.net/v1.4.1/css/gosell.css" rel="stylesheet"/>
</head>
<body onload="onLoad()">
<script src="https://goSellJSLib.b-cdn.net/v1.4.1/js/gosell.js" type="text/javascript"></script>

<div id="root"></div>
<button id="openLightBox" onclick="goSell.openLightBox()">open goSell LightBox</button>
<!--<button id="openPage" onclick="goSell.openLightBox()">open goSell Page</button>-->

<script th:inline="javascript">

    function onLoad(){
        /*<![CDATA[*/
        goSell.config({
            containerID: "root",
            gateway: {
                publicKey: "pk_test_3SplkmRPBQTHY49Kb2JgwAcD"/*[[${tapRequest.publicKey}]]*/,
                language: "en",
                contactInfo: true,
                supportedCurrencies: ["USD"]/*[[${tapRequest.supportedCurrencies}]]*/,
                supportedPaymentMethods: "all",
                saveCardOption: false,
                customerCards: true,
                notifications: 'standard',
                callback:function(response)  {
                    console.log('callBack', response);
                },
                onClose:function ()  {
                    console.log("onClose Event");
                },
                backgroundImg: {
                    url: 'imgURL',
                    opacity: '0.5'
                },
                style: {
                    base: {
                        color: '#0061ff',
                        lineHeight: '18px',
                        fontFamily: 'sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '16px',
                        '::placeholder': {
                            color: 'rgba(55,234,199,0.26)',
                            fontSize: '15px'
                        }
                    },
                    invalid: {
                        color: 'red',
                        iconColor: '#fa755a '
                    }
                }
            },
            customer:{
                id:"cus_m1QB03"/*[[${tapRequest.customerId}]]*/,
                first_name: "First Name"/*[[${tapRequest.customerFirstName}]]*/,
                last_name: "Last Name"/*[[${tapRequest.customerLastName}]]*/,
                email: "demo@email.com"/*[[${tapRequest.customerEmail}]]*/,
                phone: {
                    country_code: "965",
                    number: "99999999"
                }
            },
            order: {
                amount: 100/*[[${tapRequest.totalOrderFee}]]*/,
                currency: "USD"/*[[${tapRequest.currency}]]*/,
                shipping: null,
                taxes: null
            },

            transaction: {
                mode: 'charge',
                charge: {
                    saveCard: false,
                    threeDSecure: true,
                    description: "Checkout",
                    statement_descriptor: "Order from FoodFromBeirut",
                    reference: {
                        transaction: ""/*[[${tapRequest.transactionId}]]*/,
                        order: ""/*[[${tapRequest.orderId}]]*/
                    },
                    metadata: {},
                    receipt: {
                        email: false,
                        sms: false
                    },
                    redirect: ""/*[[${tapRequest.redirectUrl}]]*/,
                    post: null,
                }
            }
        });
        /*]]>*/
        console.log('here');
    }

</script>

</body>
</html>

Nonetheless, this still does not work and how do i capture that the box close event, in which was the question in first place.

halaq commented 4 years ago

I just tested your shared code, don't leave the redirect string empty and it will work.

SamerDiab commented 4 years ago

Might you try this? As it is still not working.

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>goSell Demo</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <link href="https://goSellJSLib.b-cdn.net/v1.4.1/imgs/tap-favicon.ico" rel="shortcut icon"/>
    <link href="https://goSellJSLib.b-cdn.net/v1.4.1/css/gosell.css" rel="stylesheet"/>
</head>
<body onload="onLoad()">
<script src="https://goSellJSLib.b-cdn.net/v1.4.1/js/gosell.js" type="text/javascript"></script>

<div id="root"></div>
<button id="openLightBox" onclick="goSell.openLightBox()">open goSell LightBox</button>
<button id="openPage" onclick="goSell.openPaymentPage()">open goSell Page</button>

<script th:inline="javascript">

    function onLoad(){
        /*<![CDATA[*/
        goSell.config({
            containerID: "root",
            gateway: {
                publicKey: "pk_test_3SplkmRPBQTHY49Kb2JgwAcD"/*[[${tapRequest.publicKey}]]*/,
                language: "en",
                contactInfo: true,
                supportedCurrencies: ["USD"]/*[[${tapRequest.supportedCurrencies}]]*/,
                supportedPaymentMethods: "all",
                saveCardOption: false,
                customerCards: true,
                notifications: 'standard',
                callback:function(response)  {
                    console.log('callBack', response);
                },
                onClose:function ()  {
                    console.log("onClose Event");
                },
                backgroundImg: {
                    url: 'imgURL',
                    opacity: '0.5'
                },
                style: {
                    base: {
                        color: '#0061ff',
                        lineHeight: '18px',
                        fontFamily: 'sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '16px',
                        '::placeholder': {
                            color: 'rgba(55,234,199,0.26)',
                            fontSize: '15px'
                        }
                    },
                    invalid: {
                        color: 'red',
                        iconColor: '#fa755a '
                    }
                }
            },
            customer:{
                id:"cus_m1QB03"/*[[${tapRequest.customerId}]]*/,
                first_name: "First Name"/*[[${tapRequest.customerFirstName}]]*/,
                last_name: "Last Name"/*[[${tapRequest.customerLastName}]]*/,
                email: "demo@email.com"/*[[${tapRequest.customerEmail}]]*/,
                phone: {
                    country_code: "965",
                    number: "99999999"
                }
            },
            order: {
                amount: 100/*[[${tapRequest.totalOrderFee}]]*/,
                currency: "USD"/*[[${tapRequest.currency}]]*/,
                shipping: null,
                taxes: null
            },

            transaction: {
                mode: 'charge',
                charge: {
                    saveCard: false,
                    threeDSecure: true,
                    description: "Checkout",
                    statement_descriptor: "Order from FoodFromBeirut",
                    reference: {
                        transaction: "212"/*[[${tapRequest.transactionId}]]*/,
                        order: "1221"/*[[${tapRequest.orderId}]]*/
                    },
                    metadata: {},
                    receipt: {
                        email: false,
                        sms: false
                    },
                    redirect: "http://localhost:8089/tap/payment"/*[[${tapRequest.redirectUrl}]]*/,
                    post: null,
                }
            }
        });
        /*]]>*/
        console.log('here');
    }

</script>

</body>
</html>

And what about the dialog close event? Is it a bug from the library?

halaq commented 4 years ago

This version is working fine. please check the attached screenshots: Screenshot 2020-08-24_15-11-37-392 Screenshot 2020-08-24_15-11-45-928

SamerDiab commented 4 years ago

The on close event magically started working on my end, but i am still getting the error of customer id

{callback: {…}}
callback:
errors: Array(1)
0: {code: "1105", description: "Customer id is invalid"}

halaq commented 4 years ago

I checked with the team, the passed customer id is invalid. the tap customer id is 20 characters.

SamerDiab commented 4 years ago

But in the doc, it clearly says The id of your customer , isn't this the id of the customer from our system? Can you please explain as it is very unclear.

halaq commented 4 years ago

No, the customer id stored in tap.

halaq commented 4 years ago

@SamerDiab is it working fine now?

SamerDiab commented 4 years ago

I am just modifying a couple things before testing.

SamerDiab commented 4 years ago

It worked perfectly, thank you! It needs to be be better documented. Regards,

jcbbb commented 4 years ago

Is it possible to call goSell.config() on button click?

halaq commented 4 years ago

Hi @jcbbb

No, this function should be called on page load.

jcbbb commented 4 years ago

Hey, thank you for the reply.

Is there any way I can set order.amount on button click? I want users to enter the amount they want to donate and then open the lightbox with entered amount. And I need to get response back for error handling, but I am not getting that right now If do goSell.config() on button click. Transaction is approved but there is no response on redirect.

halaq commented 4 years ago

Hi @jcbbb sorry for the delay, for fast reply contact our support team on intercom. Anyway, what are you using (the vanilla JS library or the NPM package)?

jcbbb commented 4 years ago

Hey @halaq, I am using Vanilla JS library. I have contacted your support team multiple times, but I did not get any response from your tech team. One of your team members even gave me his contact info, but never responded when I contacted him.

So I really don't know what to do with it.

jcbbb commented 4 years ago

Hi @halaq, this solution works, but my callback is still not running at all. Where is that callback supposed to run? Transaction is going through, I am being redirected to my page, but the callback is not running. I need response status to show appropriate message to the user. The only solution I found is to use Charges API, but that does not work for me as I cannot use my secret key on the client.

Is the callback running for you?

Thank you

halaq commented 4 years ago

@jcbbb

did you use the temporary version that I have shared here?
I deleted the message since I need to manage the versions with the team first, give me till tomorrow to confirm the things.

Ok?

jcbbb commented 4 years ago

Yeah, I used the version you shared. Alright, I will wait

halaq commented 4 years ago

Hi @halaq, this solution works, but my callback is still not running at all. Where is that callback supposed to run? Transaction is going through, I am being redirected to my page, but the callback is not running. I need response status to show appropriate message to the user. The only solution I found is to use Charges API, but that does not work for me as I cannot use my secret key on the client.

Is the callback running for you?

Thank you

@jcbbb Yes, I have another file called test.html in redirect url section, this file calling gosell.config on page load to show the result of the successful / failed transaction and execute the callback function.

see the attached screenshot: Screenshot 2020-10-31_21-49-29-798

If you're using the same page as a redirect url, the callback will not work since you're calling the gosell.config inside a function! you have to click on the button to show the result and execute the callback function .. right? did you get what I mean?

jcbbb commented 4 years ago

Yes, I understood. I am using goSell.showResult() at the same page right now. This seems to work.

halaq commented 4 years ago

'goSell.showResult()' is another option too. 👍🏻

FYI, You can use post url instead of callback function, in case you would like to separate the code in a different file / page.

halaq commented 4 years ago

@jcbbb We updated the documentation page with the 1.6.0 version .. This version is an official version for web checkout library.

alzahraabeauty179 commented 2 years ago

Hi @halaq I have a problem to understand what i must wright as value with some configurations parameters : -merchant id (I can't find it in my tap dashboard account!) -customer id (Is this means my customer id in my database for example or what?) -post url (Is this just an url in by website or what?) Could you help me, please?

Tap-Payments / goSell-JSLib-Documentation