Alipay の支払いを受け付ける

中国の顧客に広く普及しているデジタルウォレットである Alipay の支払いを受け付ける方法をご紹介します。

ウェブ

モバイル

Alipay は 1 回限りの決済手段であり、顧客が支払いを認証する必要があります。顧客はウェブサイトまたはアプリからリダイレクトされ、Alipay で支払いを承認すると、ウェブサイトまたはアプリに戻されます。ここで、支払いが成功したか失敗したかに関する即時通知を受け取ります。

Stripe を設定する
サーバ側
クライアント側

サーバ側

この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。

クライアント側

React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。

Command Line
yarn add @stripe/stripe-react-native

次に、その他の必要な依存関係をインストールします。

iOS の場合は、ios ディレクトリーに移動して pod install を実行し、必要なネイティブ依存関係もインストールします。
Android の場合は、依存関係をインストールする必要はありません。

Stripe の初期化

React Native アプリで Stripe を初期化するには、決済画面を StripeProvider コンポーネントでラップするか、initStripe 初期化メソッドを使用します。publishableKey の API 公開可能キーのみが必要です。次の例は、StripeProvider コンポーネントを使用して Stripe を初期化する方法を示しています。

import React, { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      // Your app code here
    </StripeProvider>
  );
}

注

Use your API test keys while you test and develop, and your live mode keys when you publish your app.

PaymentIntent を作成する
サーバ側

PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルを追跡します。サーバーで PaymentIntent を作成し、回収する金額と対応している通貨を指定します。すでに Payment Intents のシステムがある場合は、alipay を決済手段タイプのリストに追加します。

Alipay ウォレットにリダイレクトする
クライアント側

Stripe React Native SDK は、銀行リダイレクトおよびデジタルウォレットの支払い方法の戻り URL ホストとして safepay/ を指定します。顧客は、Alipay で支払いを完了すると、 myapp://safepay/ にリダイレクトされます。ここで、myapp はカスタム URL スキームを表します。

顧客が Safari や銀行アプリで認証するなどしてアプリを終了した際に、後で自動的にアプリに戻るための方法を提供します。多くの支払い方法タイプでは戻り先 URL が必須であるため、貴社で支払い方法を有効にしていても、URL を指定していない場合、Stripe ではユーザーにその支払い方法を提示することはできません。

To provide a return URL:

Register a custom URL. Universal links aren’t supported.
Configure your custom URL.
Set up your root component to forward the URL to the Stripe SDK as shown below.

注

Expo を使用している場合は、app.json ファイルでスキームを設定します。

App.tsx
import React, { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}

ネイティブ URL スキームの詳細については、Android および iOS のドキュメントをご覧ください。

支払いを確定する
クライアント側

顧客が Alipay で支払うをタップしたら、confirmPayment を呼び出して、WebView を表示します。顧客はここで支払いを完了できます。

export default function AlipayPaymentScreen() {
  const [email, setEmail] = useState('');
  const { confirmPayment, loading } = useConfirmPayment();

  const handlePayPress = async () => {
    const { clientSecret } = await fetchPaymentIntentClientSecret();

    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Alipay',
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      Alert.alert(
        'Success',
        `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
      );
    }
  };

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        keyboardType="email-address"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
      <Button
        variant="primary"
        onPress={handlePayPress}
        title="Pay"
        loading={loading}
      />
    </Screen>
  );
}

オプション支払い後のイベントを処理する

サポートされる通貨

お客様の国に対応する通貨で Alipay での支払いを作成できます。Alipay のデフォルトの現地通貨は cny で、顧客は購入金額を cny でも確認できます。

通貨	国
`cny`	任意の国
`aud`	オーストラリア
`cad`	カナダ
`eur`	オーストリア、ベルギー、ブルガリア、キプロス、チェコ共和国、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルグ、マルタ、オランダ、ノルウェー、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン、スイス
`gbp`	イギリス
`hkd`	香港
`jpy`	日本
`myr`	マレーシア
`nzd`	ニュージーランド
`sgd`	シンガポール
`usd`	アメリカ

別の通貨の銀行口座を所有していて、その通貨での Alipay での支払いの作成をご希望の場合は、サポートにお問い合わせください。通貨の追加に関するサポートはケースバイケースで提供されます。

注