ヒント：サーバーサイドで実装する方法も
他には決済処理はすべてサーバーサイドで行い、ExpoアプリからはリモートのURLにWebViewでアクセスする方法もあります。
この方法では、Expoアプリ内での決済処理を最小限に抑え、サーバーサイドでの決済処理を行うことで、Expoアプリの開発を簡素化できます。
開発のしやすさやメンバーのスキルセットの観点から、サーバーサイドでの決済処理を行うことが望ましい場合もあります。

注意点：実験的な段階
"use dom"は実験的な機能であり、今後のExpo SDKのバージョンアップに伴い、仕様が変更される可能性があります。
また、DOMコンポーネントはネイティブビューと比較してパフォーマンスが劣る場合があるため、パフォーマンスクリティカルな部分にはネイティブビューを使用することが推奨されています。

$npx create-expo-app@latest expo-payjp-sample$cdexpo-payjp-sample

"use dom";importReact,{useEffect,useState}from"react";constPAYJP_PUBLIC_KEY=process.env.EXPO_PUBLIC_PAYJP_PUBLIC_KEY;exportdefaultfunctionCreditCardForm({onTokenized,onError,dom}:{onTokenized:(token:string)=>void;onError:(error:any)=>void;dom:import("expo/dom").DOMProps;}){const[payjp,setPayjp]=useState<Payjp|null>(null);const[cardElement,setCardElement]=useState<any>(null);useEffect(()=>{constscript=document.createElement("script");script.src="https://js.pay.jp/v2/pay.js";script.onload=()=>{if(!PAYJP_PUBLIC_KEY){thrownewError("EXPO_PUBLIC_PAYJP_PUBLIC_KEY is not defined. Please set it in .env");}constpayjpInstance=window.Payjp(PAYJP_PUBLIC_KEY);setPayjp(payjpInstance);constelements=payjpInstance.elements();constcardElementInstance=elements.create("card");cardElementInstance.mount("#card-element");setCardElement(cardElementInstance);};document.body.appendChild(script);return()=>{document.body.removeChild(script);};},[]);asyncfunctiononSubmit(event:React.FormEvent){event.preventDefault();if(payjp&&cardElement){try{consttoken=awaitpayjp.createToken(cardElement);console.log(token);onTokenized(token.id);}catch(error){onError(error);}}}return(<divstyle={styles.container}><formonSubmit={onSubmit}><divid="card-element"style={styles.cardElement}></div><divstyle={styles.buttonContainer}><buttontype="submit"style={styles.button}>            支払う</button></div></form></div>);}

EXPO_PUBLIC_PAYJP_PUBLIC_KEY=pk_test_XXXXXXXX

exportdefaultfunctionHomeScreen(){asyncfunctionsendToken(token:string){// TODO}return(<ParallaxScrollViewheaderBackgroundColor={{light:"#A1CEDC",dark:"#1D3D47"}}headerImage={<Imagesource={require("@/assets/images/partial-react-logo.png")}style={styles.reactLogo}/>}><ThemedViewstyle={styles.titleContainer}><ThemedTexttype="title">Welcome!</ThemedText><HelloWave/></ThemedView><ThemedViewstyle={styles.stepContainer}><ThemedTexttype="subtitle">CreditCardForm</ThemedText>        // ↓↓↓ここだけWebViewになる↓↓↓<CreditCardFormonTokenized={sendToken}onError={console.error}dom={{scrollEnabled:false,matchContents:true}}/>        // ↑↑↑ここだけWebViewになる↑↑↑</ThemedView></ParallaxScrollView>);}

asyncfunctionsendToken(token:string){try{constresponse=awaitfetch(`/api/charge`,{method:"POST",headers:{"Content-Type":"application/json",},body:JSON.stringify({token}),});constjson=awaitresponse.json();console.log(json);}catch(error){console.error(error);}}

$npminstallpayjp

importPayjpfrom"payjp";constPAYJP_SECRET="sk_test_XXX";exportasyncfunctionPOST(request:Request){constbody=awaitrequest.json();constpayjp=Payjp(PAYJP_SECRET);try{constcharge=awaitpayjp.charges.create({amount:100,// TODO: 決済金額を指定currency:"jpy",card:body.token,});returnResponse.json({charge});}catch(error){console.error(error);returnResponse.json({error});}}

{  "expo": {    "web": {      "bundler": "metro",-      "output": "static",+      "output": "server",      "favicon": "./assets/images/favicon.png"    },  }}

$curl-X POST http://localhost:8081/api/charge-H"Content-Type: application/json"-d'{"token":"tok_XXXXXXXX"}'

"plugins":[["expo-router",{"origin":"http://192.168.1.38:8081"}]],

+ import { router } from "expo-router";  async function sendToken(token: string) {    try {      const response = await fetch(`/api/charge`, {        method: "POST",        headers: {          "Content-Type": "application/json",        },        body: JSON.stringify({ token }),      });      const json = await response.json();      console.log(json);+      router.push("/success");    } catch (error) {      console.error(error);    }  }

constelements=payjpInstance.elements();constnumberElement=elements.create("cardNumber");constexpiryElement=elements.create("cardExpiry");constcvcElement=elements.create("cardCvc");numberElement.mount("#number-element");expiryElement.mount("#expiry-element");cvcElement.mount("#cvc-element");

return(<divstyle={styles.container}><formonSubmit={onSubmit}><divstyle={styles.row}><divid="number-form"style={styles.cardElement}></div></div><divstyle={styles.row}><divid="expiry-form"style={styles.cardElement}></div><divid="cvc-form"style={styles.cardElement}></div></div><divstyle={styles.buttonContainer}><buttontype="submit"style={styles.button}>            支払う</button></div></form></div>);

import{StyleSheet}from"react-native";conststyles=StyleSheet.create({container:{flex:1,},row:{display:"flex",flexDirection:"row",},cardElement:{width:"100%",height:40,paddingTop:8,paddingBottom:8,},buttonContainer:{paddingTop:8,paddingBottom:8,},button:{width:"100%",height:50,fontSize:16,},});

const[isNumberComplete,setIsNumberComplete]=useState(false);const[isExpiryComplete,setIsExpiryComplete]=useState(false);const[isCvcComplete,setIsCvcComplete]=useState(false);const[errorMessage,setErrorMessage]=useState<string|null>(null);

consthandleNumberChange=(event:FormEvent)=>{setErrorMessage(event.error?event.error.message:null);setIsNumberComplete(event.complete);};consthandleExpiryChange=(event:FormEvent)=>{setErrorMessage(event.error?event.error.message:null);setIsExpiryComplete(event.complete);};consthandleCvcChange=(event:FormEvent)=>{setErrorMessage(event.error?event.error.message:null);setIsCvcComplete(event.complete);};numberElement.on("change",handleNumberChange);expiryElement.on("change",handleExpiryChange);cvcElement.on("change",handleCvcChange);

return(<divstyle={styles.container}><formonSubmit={onSubmit}><divstyle={styles.row}><divid="number-form"style={styles.cardElement}></div></div><divstyle={styles.row}><divid="expiry-form"style={styles.cardElement}></div><divid="cvc-form"style={styles.cardElement}></div></div>{errorMessage&&(<divstyle={styles.errorContainer}><spanstyle={styles.errorText}>{errorMessage}</span></div>)}<divstyle={styles.buttonContainer}><buttontype="submit"style={{...styles.button,opacity:isNumberComplete&&isExpiryComplete&&isCvcComplete?1:0.5}}disabled={!isNumberComplete||!isExpiryComplete||!isCvcComplete}>            支払う</button></div></form></div>);

errorContainer:{paddingTop:8,paddingBottom:8,},errorText:{color:"red",},

exportasyncfunctionPOST(request:Request){constbody=awaitrequest.json();console.log(!PAYJP_PUBLIC_KEY||!PAYJP_SECRET);if(!PAYJP_PUBLIC_KEY||!PAYJP_SECRET){returnResponse.json({error:"PAYJP_PUBLIC_KEY and PAYJP_SECRET is not defined.",});}constpayjp=Payjp(PAYJP_SECRET);try{constcharge=awaitpayjp.charges.create({amount:100,// TODOcurrency:"jpy",card:body.token,three_d_secure:true,});constbaseUrl=request.url.split("/api/")[0];// NOTE: 現在起動しているサーバーのURLを取得constqueryParams={cid:charge.id};constjwtUrl=generateJwtUrl(baseUrl+"/confirm/",queryParams,PAYJP_SECRET);constredirectUrl=`https://api.pay.jp/v1/tds/${charge.id}/start?publickey=${PAYJP_PUBLIC_KEY}&back_url=${jwtUrl}`;returnResponse.json({redirectUrl});}catch(error){console.error(error);returnResponse.json({error:"Internal Server Error"},{status:500});}}

$npminstalljsonwebtoken

importjwtfrom"jsonwebtoken";functiongenerateJwtUrl(baseUrl:string,params:Record<string,string>,secretKey:string){constencodedParams=Object.keys(params).map((key)=>`${key}=${encodeURIComponent(params[key])}`).join("&");constencodedUrl=`${baseUrl}?${encodedParams}`;constpayload={url:encodedUrl,};returnjwt.sign(payload,secretKey,{algorithm:"HS256"});}

$npx expoinstallexpo-web-browser

import*asWebBrowserfrom"expo-web-browser";// ...asyncfunctionsendToken(token:string){try{constresponse=awaitfetch(`/api/token`,{method:"POST",headers:{"Content-Type":"application/json",},body:JSON.stringify({token}),});constjson=awaitresponse.json();console.log(json);WebBrowser.openBrowserAsync(json.redirectUrl);}catch(error){console.error(error);}}

exportdefaultfunctionConfirmScreen(){constlocalParams=useLocalSearchParams()as{cid?:string};const[isPurchased,setIsPurchased]=useState(false);asyncfunctionretrieveCharge(cid:string){try{constresponse=awaitfetch(`/api/charge`,{method:"POST",headers:{"Content-Type":"application/json",},body:JSON.stringify({cid:localParams.cid}),});console.log({response});if(response.ok){setIsPurchased(true);}}catch(error){console.error(error);}}return(<ThemedViewstyle={styles.container}><ThemedViewstyle={styles.titleContainer}><ThemedTexttype="title">{isPurchased?"支払いが完了しました":"購入を確認してください"}</ThemedText></ThemedView><ThemedViewstyle={styles.stepContainer}><ThemedText>{isPurchased?"この画面を閉じてください":localParams.cid}</ThemedText>{!isPurchased&&(<Viewstyle={styles.buttonContainer}><Buttontitle="購入する"onPress={async()=>{if(localParams.cid){awaitretrieveCharge(localParams.cid);}}}/></View>)}</ThemedView></ThemedView>);}

exportasyncfunctionPOST(request:Request){constbody=awaitrequest.json();if(!PAYJP_SECRET){returnResponse.json({error:'PAYJP_SECRET is not defined. Please set it in .env'});}constpayjp=Payjp(PAYJP_SECRET);try{constcharge=awaitpayjp.charges.retrieve(body.cid);console.log({charge});returnResponse.json({charge});}catch(error){console.error(error);if((errorasPayjpError).response){constpayjpError=errorasPayjpError;returnnewResponse(JSON.stringify({error:payjpError.response.error.message}),{status:payjpError.response.status});}returnnewResponse(JSON.stringify({error:'Internal Server Error'}),{status:500});}}

{"expo":{"scheme":"expo-payjp.example.com"}}

  const payjp = Payjp(PAYJP_SECRET);  try {    const charge = await payjp.charges.create({      amount: 100, // TODO      currency: "jpy",      card: body.token,      three_d_secure: true,    });-    const baseUrl = request.url.split("/api/")[0];+    const baseUrl = "expo-payjp.example.com:/";    const queryParams = {      cid: charge.id    };    const jwtUrl = generateJwtUrl(baseUrl + "/confirm/", queryParams, PAYJP_SECRET);    const redirectUrl = `https://api.pay.jp/v1/tds/${charge.id}/start?publickey=${PAYJP_PUBLIC_KEY}&back_url=${jwtUrl}`;    return Response.json({ redirectUrl });  }

      if (response.ok) {        const tds = await response.json();-        await WebBrowser.openBrowserAsync(tds.redirectUrl, {-          dismissButtonStyle: "close",-        });+        router.push(tds.redirectUrl);      }