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:

// non-nullable
"devnet" | "testnet" | "mainnet";

// nullable
Readonly<{
  uri?: string | undefined;
  icon?: string | undefined;
  name?: string | undefined;
}>;

// non-nullable
() => Promise<CreateIntentResponse>;
// refer to code example below

// nullable
() => void;

// nullable
(error: any) => void;

// nullable
{
  address: string;
  auth_token: string;
}

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