Antom, leading provider of tailored payment solutionsAntom, leading provider of tailored payment solutions

React Native

React Native

Step 1: Set Up the Environment

  • Configure the development environment for either Android/iOS based on your current system.

Step 2: Add Rewards SDK to your project

1.Add the react-native-marketing-widget module library

copy
yarn add "git+https://<username>:<token>@globaltech-git.alipay.com/aplus-mobile/react-native-marketing-widget.git#release/1.0.0"

Step 3: Render widget in React Native

copy
import { RewardsPromoView } from 'react-native-marketing-widget';

function App() {
  return (
    <View
      // eslint-disable-next-line react-native/no-inline-styles
      style={{
        flex: 1,
        backgroundColor: 'while',
        paddingTop: 98,
      }}
    >
      // Pass in YOUR_POSITION_ID to initialize the view
      <RewardsPromoView
        positionId="YOUR_POSITION_ID"
        roundedCornersEnabled={true}
        // eslint-disable-next-line react-native/no-inline-styles
        style={{
          width: '100%',
        }}
      />
    </View>
  );
}

Step 4: Multilingual support (optional)

The widget component supports the following languages，English is supported by default

English (United States) en / en-US

Korean (South Korea) ko / ko-KR

Thai (Thailand) th / th-TH

Bahasa Indonesia (Indonesia) id / id-ID

Chinese (Hong Kong, China) zh-HK

copy
import { RewardsPromoManager } from 'react-native-marketing-widget'

// en-US zh-HK th-TH ko-KR in-ID
RewardsPromoManager.setLocale("en-US");

Step 5: Log out

Logout needs to be called when log out.

copy
import { RewardsPromoManager } from 'react-native-marketing-widget'

RewardsPromoManager.logout();

Validate the integration

After you've finished the previous steps, notify Alipay+ team to configure the delivery content. When all the configuration work is done, you'll see the marketing content rendered in your app page.