React

1. Create a file named AzimuthBuyWithCrypto.js inside your website code repository with the following content:

// AzimuthBuyWithCrypto.js

import React, { Component } from 'react';

class AzimuthBuyWithCryptoComponent extends Component {
      componentDidMount() {
            const { onPaymentSuccessCallback, onWalletConnectCallback, txnUsdAmount } = this.props;

            const script = document.createElement('script');
            script.src = "https://server.azimuth-services.io/azimuthBuyWithCrypto/<your_app_id>.js";
            script.type = 'text/javascript';
            script.async = true;
            document.getElementById("azimuthBuyWithCrypto").appendChild(script);

            script.onload = () => {
                  AzimuthBuyWithCrypto.init({
                        onPaymentSuccessCallback: onPaymentSuccessCallback, // Your post-payment functionality goes here 
                        onWalletConnectCallback: onWalletConnectCallback, // Optional. Your post-wallet connection functionality goes here
                        txnUsdAmount: txnUsdAmount // Optional. For a fixed price txn flow, use this parameter. For user input txn flow, remove it
                        
                  });
            };
      }

      render() {
            // The div container element which the button will be bound to
            // Can use styling, e.g. style={{paddingRight: "90px"}}
            return (
                  <div id="azimuthBuyWithCrypto" ></div>
            );
      }
}

export default AzimuthBuyWithCryptoComponent;

2. Then, in your App.js file, import the AzimuthBuyWithCryptoComponent component created and use it in your app:

// App.js

import AzimuthBuyWithCryptoComponent from "./AzimtuhBuyWithCrypto";
const App = () => {
      return (
            <AzimuthBuyWithCryptoComponent
                  onPaymentSuccessCallback={(e) => {
                        // Your post-payment functionality goes here 
                  }},
                  onWalletConnectCallback={(e) => { // Optional
                        // Your post-wallet connection functionality goes here 
                  }},
                  txnUsdAmount={txnUsdAmount} // Optional. For a fixed price txn flow, use this parameter. For user input txn flow, remove it
            />
      )
};