React Native

<WebView
  ref={webViewRef}
  source={{ uri: COMMERCE_URL }}
  onMessage={onMessage}
  injectedJavaScriptBeforeContentLoaded={initialJavascript} />);

window.bidaliProvider = {
  key: 'YOUR API KEY', // This is provided by Bidali
  name: 'YOUR WALLET NAME', // This will be provided by Bidali with your apiKey
  paymentCurrencies: ['stellar', 'stellarusdc'],
  brandColor: '#35D07F',
	email: 'test@test.com',
	phoneNumber: '15554321234',
	balances: {
		'stellar': '5',
		'usdcstellar': '20'
	},
	onPaymentRequest: (paymentRequest) => {
  		var payload = { method: 'onPaymentRequest', data: paymentRequest };
			window.ReactNativeWebView.postMessage(JSON.stringify(payload));
	},
  openUrl: function (url) {
			var payload = { method: 'openUrl', data: { url } };
			window.ReactNativeWebView.postMessage(JSON.stringify(payload));
	}
};

{
  amount: '0.0187',
  symbol: 'ETH', // This is the payment currency your user chose
  protocol: 'ethereum', // This is Bidali's unique identifier for a currency
  address: '0x220b48eda85a0a067c769f0442dd2f4e03ba625a',
  chargeId: 'vIQ807gvR',
  extraId: 'vIQ807gvR',
  extraIdName: 'Memo text',
  description: '$50 Amazon US',
  lineItems: [
    {
      name: 'Amazon US',
      quantity: 1,
      amount: '$50 USD',
      image: 'https://assets.bidali.com/commerce/brands/amazon-com-us.png'
    }
  ]
}

useEffect(() => {
  webViewRef.current?.injectJavaScript(`
    window.bidaliProvider.balances = ${JSON.stringify(balances)}
  `)
}, [balances]);

import React, { useRef, useState, useEffect } from 'react';
import styled from 'styled-components/native';
import { WebView } from 'react-native-webview';

const Container = styled.SafeAreaView`
    flex: 1;
  `;

const BidaliScreen = ({ user }) => {
  const [ balances, setBalances ] = useState({ stellar: '5.2', usdcstellar: '2000' });
  const webViewRef = useRef(null);
  const user = {
    email: 'test@test.com',
    phoneNumber: '15554321234'
  };
  const onMessage = event => {
    const { method, data } = JSON.parse(event.nativeEvent.data);
    switch (method) {
      case 'onPaymentRequest': {
        const {
          amount,
          address,
          symbol,
          protocol,
          description,
          chargeId,
          extraId: memo
        } = data;
        // These 2 callbacks need to be called to notify Bidali of the status of the payment request
        // so it can update the WebView accordingly.
        const onPaymentSent = () => {
          webViewRef.current?.injectJavaScript(`window.bidaliProvider.paymentSent();`);
        };
        const onPaymentCancelled = () => {
          webViewRef.current?.injectJavaScript(`window.bidaliProvider.paymentCancelled();`)
        };

        if(protocol === 'stellar') {
          // Show a native transaction confirmation modal to the user
          const result = await sendXLM({ amount, address, symbol, protocol, memo });

          if(result.status === 'sent') {
            onPaymentSent();
          } else if(result.status === 'cancelled') {
            onPaymentCancelled();
          }
        }
        break;
      }
      case 'openUrl': {
        const { url } = data;
        // Open the URL in an in-app browser or external browser
      }
    }
  };

  const initialJavascript = `
        window.bidaliProvider = {
          name: 'WALLET NAME', // This will be provided by Bidali with your apiKey
          paymentCurrencies: ['stellar', 'usdcstellar'],
          brandColor: '#35D07F',
          email: ${user.email ? `'${user.email}'` : null},
          phoneNumber: ${user.phoneNumber ? `'${user.phoneNumber}'` : null},
          balances: ${JSON.stringify(balances)},
          onPaymentRequest: (paymentRequest) => {
            var payload = { method: 'onPaymentRequest', data: paymentRequest };
            window.ReactNativeWebView.postMessage(JSON.stringify(payload));
          },
          openUrl: function (url) {
            var payload = { method: 'openUrl', data: { url } };
            window.ReactNativeWebView.postMessage(JSON.stringify(payload));
          }
        };
        true; // note: this is required, or you'll sometimes get silent failures
  `;

  useEffect(() => {
    webViewRef.current?.injectJavaScript(`
      window.bidaliProvider.balances = ${JSON.stringify(balances)}
    `)
  }, [balances]);

  return (<Container>
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://commerce.staging.bidali.com/dapp?key=YOUR_API_KEY' }}
      onMessage={onMessage}
      injectedJavaScriptBeforeContentLoaded={initialJavascript} />
  </Container>);
};

export default BidaliScreen;