@candypay/elements-mobile-sdk

elements-mobile-sdk

Mobile SDK for Candypay elements package

Buidler

• Ritvij Kumar Sharma

Installation

npm install @candypay/elements-mobile-sdk \
@candypay/checkout-sdk \
@solana-mobile/mobile-wallet-adapter-protocol \
@solana/web3.js \
react-native-get-random-values \
react-native-url-polyfill

Usage

This is an example of how you can use @candypay/elements-mobile-sdk in an Expo Go project through the use of a custom Expo development build.

Source: MWA-POC

Configuration used in our example app:- app.json eas.json

EAS Build Documentation for creating custom apk for testing and other configuration as needed by the developer

The main component is the <PayButton /> component. Here is a list of it's parameters:

Parameter	Type	Usage
network	// non-nullable "devnet" | "testnet" | "mainnet";	Solana network to connect to
appIdentity	// nullable Readonly<{ uri?: string | undefined; icon?: string | undefined; name?: string | undefined; }>;	Information regarding the application. Required by Mobile Wallet Adapter.
intentHandler	// non-nullable () => Promise<CreateIntentResponse>; // refer to code example below	Function to fetch intent from for CandyPay SDK
onSuccess	// nullable () => void;	Function to run after successful transaction
onError	// nullable (error: any) => void;	Function to run in case of error at any step starting from wallet connection to transaction execution
connectedWallet	// nullable { address: string; auth_token: string; }	Nullable parameter if wallet connection functionality is handled from the developer's side, just send the connected wallet's public address and the auth_token. If used, both properties must be valid and non-null

In your App.tsx or whichever file you have to use the component in:

import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
import { PayButton } from "@candypay/elements-mobile-sdk";
import { CandyPay } from "@candypay/checkout-sdk";
import { StyleSheet, Text, ToastAndroid, View } from "react-native";

export default function App() {

  // ...

  /**
   * Initialise the CandyPay object with your API keys and other required configuration
   */
  const candypay = new CandyPay({
    api_keys: {
      public_api_key: "<YOUR_PUBLIC_KEY>",
      private_api_key: "<YOUR_PRIVATE_KEY>",
    },
    network: "mainnet",
    config: {
      collect_shipping_address: false,
    },
  });

  /**
   * Intent Handler function to fetch payment intent for the merchant's account
   */
  const intentHandler = async () => {
    const response = await candypay.paymentIntent.create({
      tokens: ["shdw", "bonk", "dust", "samo"],
      items: [
        {
          name: "Test Product 1",
          image: "https://candypay.fun/assets/logo.png",
          price: 1,
          quantity: 1,
        },
      ],
    });

    return response;
  };

  const showToast = (msg: string) => {
    ToastAndroid.show(`${msg}`, ToastAndroid.SHORT);
  };

  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <PayButton
        network="mainnet"
        appIdentity={{ name: "My expo app" }}
        intentHandler={intentHandler}
        onSuccess={() => {
          showToast("Success");
        }}
        onError={(error) => {
          showToast(`Error: ${error as unknown as string}`);
        }}
      />
    </View>
  );
}

// ...

License

MIT