Example code implementation

<script>
    const publishableKey = "pk_rO0ABXenAF2s7QAF…";

    const renderForm = () => {
        const zuora = Zuora(publishableKey);
        zuora.createGooglePayButton({
            countryCode: "US",
            locale: "en_US",
            currency: "USD",
            amount: "10.00",
            allowedCardNetworks: ["AMEX", "DISCOVER", "MASTERCARD", "VISA"],
            buttonHeight: "40px",
            buttonRadius: "5px",
            buttonColor: "black",
            buttonType: "pay",
            createPaymentSession: () => {
                return new Promise((resolve, reject) => {
                    fetch("/sdk-test/payment-session.json?seed=" + Math.random(), {
                        method: "GET",
                    }).then((response) => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            return reject("Payment session request is rejected.");
                        }
                    }).then((data) => {
                        console.log("==========");
                        console.log("Got Payment Session Token");
                        console.log("==========");
                        console.log(data.token);
                        return resolve(data.token);
                    }).catch((error) => {
                        return reject(error);
                    });
                });
            },
            onComplete: (result) => {
                console.log("==========");
                console.log("Payment Result");
                console.log("==========");
                console.log(result);
                resultMessage("Transaction Result: <br />"
                    + "    Success: " + result.success + "<br />"
                    + "    Payment Method Id: " + result.paymentMethodId + "<br />"
                    + "    Payment Id: : " + result.paymentId + "<br />"
                );
            }
        }).then(function(googlePayButton) {
            googlePayButton.mount("#payment-form-container")
        }).catch(function(error) {
            console.error(error);
        });
    }

    function resultMessage(message) {
        const container = document.querySelector("#result-message");
        container.innerHTML = message;
    }
</script>
    

Results

The onComplete function returns result in the following structure:

On Success

{
    success: true,
    paymentMethodId?: string;
    paymentId?: string;
}
    

On Error

{
    success: false,
    error: {
        type: string;
        code: string;
        message: string;
    }
}