이 모든 것이 어떻게 한데 결합되었는가

나는 지금 몇 편의 블로그를 썼다.만약 네가 나의 모든 블로그를 본다면, 관건적인 블로그가 하나 부족하다. 이것은 많은 사용자 체험에서 매우 중요하다. 그것은 바로 너의 응용 프로그램에 돈을 추가하는 것이다.
이 블로그는 응용 프로그램에 돈을 추가하는 것에 관한 것이다.이러한 기능을 실현하는 모든 기술 지침이 있으면 거의 모든 응용 프로그램을 구축하는 좋은 출발점이 생길 것이다.마지막 단계는 당신의 마음가짐과 올바른 생각을 찾는 것입니다.그곳에서 나는 다음과 같은 내용에 관한 블로그를 썼다.

React Native 애플리케이션에 결제 추가

지불 영역은 분산되어 있다.많은 지불 서비스 공급자가 당신의 지불을 처리합니다.나는 네덜란드의 큰 은행에서 일했는데, 이 은행은 Tikkie를 발명했다.Tikkie는 현재 상용어입니다.누군가가 너에게서 돈을 받을 때, 너는 그에게 작은 술잔을 부치라고 해라.Whatsapp를 통해 1초 안에 Ideal로 지불할 수 있는 링크를 받았습니다.이상은 네덜란드에서 가장 자주 사용하는 지불 방식이다.
전 세계가 사용하고 있는 결제 방식으로 완전한 블로그를 사용하고 싶습니다. 그래서 저는 이상적인 티키를 보여줄 수 없습니다. 왜냐하면 그것은 네덜란드에서만 사용할 수 있기 때문입니다.따라서, 나는 Stripe를 사용할 것입니다. 당신은 어떤 지불 방식을 선택할 수 있지만, 당신은 당연히 어떤 공급자를 사용할 수 있습니다.

줄무늬

Stripe는 애플리케이션에 다양한 결제 옵션을 제공하는 결제 플랫폼입니다.Stripe는 웹 응용 프로그램과 원활하게 사용할 수 있는 다양한 옵션이 있지만 React Native에 대한 진정한 해결 방안은 없습니다.커뮤니티에서 패키지를 사용하지만 Stripe에서 공식적으로 지원되지 않음: https://www.npmjs.com/package/tipsi-stripe

계산하다

스트라이프 검사(https://stripe.com/en-nl/payments/checkout는 모든 법규의 요구에 부합되는 완전한 기존 해결 방안이지만 웹 기반이다.일부 설정 설정을 통해 새로운 지불 방식을 추가할 수 있습니다.
Checkout과 React Native Webview를 결합하여 사용합니다.이것은 본 컴퓨터 응용 프로그램에 사용되는 웹 구성 요소 불러오는 프로그램입니다.Stripe에서 보안 연결을 사용하고 있습니다.
이 설정에 대해 Stripe 계정이 필요합니다.stripe dashboard에서 개발자 API 키를 등록할 수 있습니다.이것은 우리가 앞으로 필요로 하는 것이다.

본기반응

자바스크립트로 코드를 작성하고 IOS와 안드로이드로 컴파일할 수 있기 때문에 React Native는 훌륭합니다.따라서 원가가 낮고 개발 주기가 빠르다.

박람회

엑스포는 IOS와 안드로이드를 위해 개발할 수 있고 다른 도구를 설치할 필요가 없고 심지어 맥 컴퓨터를 필요로 하지 않기 때문에 사용할 수 있는 많은 기능을 포함하고 있기 때문에 매우 잘 실행된다.엑스포도 현재 웹으로 컴파일되고 있기 때문에 모든 전단을 구축할 수 있는 도구를 가지고 있습니다.

AWS 확대

AWS Amplify는 이러한 도구와 백엔드 사이의 접착제입니다.여기에서 자바스크립트를 사용하여 API, 저장, 인증과 권한 수여, 데이터베이스, 데이터 저장 등을 설정할 수 있습니다.Amplify를 사용하여 Graphql을 통해 Lambda 함수에 연결합니다.

입문

AWS 확대 설정

우선 AWS Amplify CLI를 설치해야 합니다.Amplify CLI는 다양한 AWS 서비스를 만들고 배포할 수 있는 명령행 도구입니다.
CLI를 설치하려면 다음 명령을 실행합니다.

$ npm install -g @aws-amplify/cli

다음은 AWS 계정의 사용자 구성 CLI를 사용합니다.

$ amplify configure

For a video walkthrough of the process of configuring the CLI,

ReactJS 설정

스트라이프 체크 아웃은 성공 및 실패 URL을 사용하여 로 리디렉션합니다.우리는 Reactjs와amplify 위탁 관리 프로젝트를 세울 것입니다.이 사이트는 두 개의 URL: yourURL이 있습니다.com/payment success en yourURL.통신/결제 실패.
웹 뷰의 URL이 변경되면 웹 뷰는 수신 상태를 변경하고 "onNavigationStateChange"함수에 URL을 전달합니다.
매개 변수에 따라 우리는 응용 프로그램에서 지불 흐름을 계속하거나 정지하거나 실패합니다.
디렉토리의 루트 디렉토리에서 다음 명령을 실행합니다.

npx create-react-app paymentsite

cd paymentsite

npm install react-router-dom query-string @stripe/stripe-js

이 코드를 응용 프로그램에 추가합니다.js 및 STRIPE\u PUBLIC\u 키를 STRIPE의 키로 바꿉니다.

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import queryString from "query-string";
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe("STRIPE_PUBLIC_KEY");

// Showing null, because we will show the result in the app and not on the web
function Success() {
  return null;
}

// Showing null, because we will show the result in the app and not on the web
function Failure() {
  return null;
}

// Showing null, because we will show the result in the app and not on the web
function PaymentInit() {
  return null;
}

function Init() {
  return (
    <div className="App">
      <p>Payment Site</p>
    </div>
  );
}

async function initStripe() {
  const parsed = queryString.parse(window.location.search);
  const sessionId = parsed.session;

  const stripe = await stripePromise;
  await stripe.redirectToCheckout({
    sessionId
  });
}

function Payment() {
  initStripe();
  return null;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Init />
        </Route>
        <Route path="/payment">
          <Payment />
        </Route>
        <Route path="/payment-init">
          <PaymentInit />
        </Route>
        <Route path="/payment-failure">
          <Failure />
        </Route>
        <Route path="/payment-success">
          <Success />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

다음 도구를 사용하여 사이트에서 로컬로 테스트할 수 있습니다.

yarn start

이 두 URL은/payment failure와/payment success 작업을 할 수 있습니다.
다음 지침을 따르십시오.
이 조치는 귀하의 현지 React 사이트를 발표하고 이를 AWS Amplify에 위탁 관리합니다.URL을 가져옵니다. 나중에 lambda 함수에 추가해야 합니다.

Instruction:

React Native 설정

우선, 우리는 우리가 사용할 React 본체 응용 프로그램을 만들 것입니다.
루트 디렉터리에서 이 명령을 실행합니다. (reactJS 디렉터리에서 실행하지 마십시오.)

$ npx expo init payApp

> Choose a template: blank

$ cd payApp

$ npm install aws-amplify aws-amplify-react-native react-native-webview @react-native-community/netinfo

확대 항목 시작

이제 React 네이티브 응용 프로그램의 루트에서 새 확대 항목을 초기화할 수 있습니다.

$ amplify init

여기서 우리는 일련의 절차를 통해 지도할 것이다.

항목 이름 입력:payApp(또는 원하는 항목 이름)

환경의 이름을 입력합니다: dev (이 이름을 사용합니다. 인용할 것이기 때문입니다)

기본 편집기 선택: Visual Studio 코드(또는 텍스트 편집기)

구축 중인 응용 프로그램 형식 선택:javascript

당신이 사용한 것은 무엇입니까javascript 프레임워크:reactnative

소스 디렉토리 경로:/

배포 디렉터리 경로:build

Build 명령: npm run script Build

Start 명령: npm run script Start

AWS 프로필을 사용하시겠습니까?Y

사용할 프로필을 선택하십시오: YOUR\u USER\u profile

현재, 우리의 확대 프로젝트는 이미 창설되었고, 우리는 다음 단계를 계속할 수 있다.

프로젝트에 Graphql 추가

React Native 응용 프로그램이 시작되고 실행되었으며 AWS Amplify가 구성되었습니다.Amplify는 다양한 서비스를 제공하여 응용 프로그램을 풍부하게 사용할 수 있습니다.API 서비스에 주목합니다.API를 추가합니다.

Amplify add api

다음 단계가 수행됩니다.

Graphql 선택

API 이름 입력:payAPI(원하는 API 이름)

API에 대한 권한 부여 유형 선택: Amazon Cognito 사용자 풀(인증된 사용자에게만 이 응용 프로그램을 사용하지만 다른 옵션을 선택할 수 있기 때문)

기본 인증 및 보안 구성 사용 여부: 기본 구성 선택

사용자는 어떻게 로그인하시겠습니까?사용자 이름(이 사용자 이름을 사용하여 AWS Amplify Auth 모듈을 활성화할 수도 있음)

고급 설정을 구성하시겠습니까?아니오, 끝났어요.

주석이 있는 GraphQL 모드가 있습니까?n

부트 모드를 만들시겠습니까?n

사용자 정의 형식 이름 제공:user

API 및 패턴 정의가 생성되었습니다.프로젝트 디렉토리에서 찾을 수 있습니다.Amplify > backend > api > name of your api구조를 열다.graphql 파일과 이 코드를 추가합니다.

I added a Product type because otherwise the schema is not deploying, but I want to show this example with Graphql instead of a plain API. In this guide we won't use the product, we show a static product, but you can use this type to add dynamic products to your app.

type Product @model {
  id: ID!
  date: String!
  name: String!
  description: String!
  price: Int!
}

type Mutation {
  createPayment(input: PaymentInput): PaymentResult
    @function(name: "makePayment-${env}")
}

input PaymentInput {
  amount: Float
  total: Int
  name: String
  email: String
}

type PaymentResult {
  statusCode: Int
  body: String
}

프로젝트에 결제 기능 추가

함수를 추가하면 Lambda 함수를 생성합니다.

Amplify add function

다음 절차를 따르십시오.

프로젝트에서 이 종류의 탭으로 자원에 우호적인 이름을 제공합니다. makePayment

AWS Lambda 함수 이름:

사용할 함수 실행 선택: NodeJS

사용할 함수 템플릿 선택: Hello world 함수

이 프로젝트에서 만든 다른 자원을 Lambda 함수에서 액세스하시겠습니까?N

이 함수를 정기 계획에서 호출하시겠습니까?N

로컬 lambda 함수를 즉시 편집하시겠습니까?N

함수가 생성되었습니다. 프로젝트 디렉터리에서 찾을 수 있습니다.Amplify > backend > function > name of your functionmakePayment 함수의 src 디렉터리로 이동하여 인덱스를 엽니다.js 파일을 붙여넣습니다.코드를 찾아 기밀 API 키 및 AMPLIFY-URL을 추가하십시오.

const stripe = require("stripe")("*****ADD YOUR SECRET API KEY*******");

exports.handler = async (event, context) => {
  try {
    const amount = event.arguments.input.amount;
    const name = event.arguments.input.name;
    const email = event.arguments.input.email;

    const customer = await createCustomer(name, email);

    const session = await createCheckOutSession(amount, customer.id);

    return session;
  } catch (error) {
    console.log("er is een fout opgetreden", error);
  }
};

async function createCustomer(name, email) {
  return new Promise(function(resolve, reject) {
    stripe.customers
      .create({
        email: email,
        name: name
      })
      .then(customer => {
        resolve(customer);
      })
      .catch(err => {
        // Error response
        reject(err);
      });
  });
}

async function createCheckOutSession(amount, customer) {
  //eslint-disable-line

  return new Promise(function(resolve, reject) {
    stripe.checkout.sessions
      .create({
        payment_method_types: ["card", "ideal"],
        customer: customer,
        line_items: [
          {
            name: "Buy your stuff here",
            amount: amount * 100,
            currency: "eur",
            quantity: 1
          }
        ],
        success_url: "AMPLIFY-URL/payment-success",
        cancel_url: "AMPLIFY-URL/payment-failure",
        locale: "nl"
      })
      .then(source => {
        // Success response
        const response = {
          statusCode: 200,
          body: JSON.stringify(source)
        };

        resolve(response);
      })
      .catch(err => {
        // Error response
        const response = {
          statusCode: 500,
          body: JSON.stringify(err.message)
        };

        reject(response);
      });
  });
}

function/src 디렉토리의 node\u 모듈에 스트라이프를 추가합니다.

npm install stripe --save

백엔드가 설정되어 있습니다. 클라우드로 전송할 수 있습니다. 실행하십시오.

amplify push

다음 절차를 따르십시오.

계속하시겠습니까?Y

새로 생성된 GraphQL API에 대한 코드를 생성하시겠습니까?Y

코드 생성 언어 목표 선택?Javascript

graphql 조회, 돌연변이, 구독 파일 이름 모드 입력

가능한 모든 GraphQL 작업 - 쿼리, 돌연변이 및 구독 생성/업데이트 여부

최대 문장 깊이 입력 [패턴 중첩이 깊으면 기본값에서 증가]?이.

React Native 애플리케이션 설정

나는 너에게 익숙하기 때문에 나의 블로그에서 나는 응용 프로그램의 사용자 체험에 그다지 관심을 가지지 않는다.나는 단지 너희들에게 기본 기능이 어떻게 작동하는지 보여주고 싶다.
응용 프로그램으로 이동합니다.js를 붙여넣습니다.
나는 이미 모든 물건을 하나의 파일에 넣었지만, 물론 너도 더 작은 구성 요소에서 그것을 재구성해야 한다.
AWS AMPLIFY에 React 사이트를 배포할 때 만든 URL로 AMPLIFY-URL을 대체합니다.

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
  ActivityIndicator,
  Dimensions
} from "react-native";
import { WebView } from "react-native-webview";
import Amplify, { API, graphqlOperation, Analytics } from "aws-amplify";
import * as mutations from "./src/graphql/mutations";
import { withAuthenticator } from "aws-amplify-react-native";
import config from "./aws-exports";

Amplify.configure(config);
Analytics.disable();

class App extends React.Component {
  state = {
    amount: 15,
    quantity: "0",
    screen: "product",
    initUrl: "AMPLIFY-URL/",
    url: "AMPLIFY-URL/payment-init",
    loading: true
  };

  async createPaymentSession() {
    // hardcode input values, make these dynamic with the values from the logged in user
    const input = {
      amount: this.state.amount * this.state.quantity,
      name: "ramon",
      email: "[email protected]"
    };

    await API.graphql(
      graphqlOperation(mutations.createPayment, { input: input })
    )
      .then(result => {
        const sessionID = JSON.parse(result.data.createPayment.body);
        this.setState({
          url: this.state.initUrl + "payment?session=" + sessionID.id,
          loading: false
        });
      })
      .catch(err => console.log(err));
  }

  handleOrder() {
    this.setState({ screen: "payment" });
  }

  _onNavigationStateChange(webViewState) {
    if (webViewState.url === this.state.initUrl + "payment-init") {
      this.createPaymentSession();
    }

    if (webViewState.url === this.state.initUrl + "payment-success/") {
      this.setState({ screen: "success" });
    }

    if (webViewState.url === this.state.initUrl + "payment-failure/") {
      this.setState({ screen: "failure" });
    }
  }

  startPayment() {
    const loader = this.state.loading;
    let url = this.state.url;
    if (url === "") {
      url = this.state.initUrl;
    }

    return (
      <View style={{ flex: 1, marginTop: 50 }}>
        <View style={{ flex: 2 }}>
          {loader && (
            <View style={[styles.loader, styles.horizontal]}>
              <ActivityIndicator
                animating={true}
                size="large"
                color="#de62bf"
              />
            </View>
          )}
          <View
            style={{
              position: "absolute",
              backgroundColor: "#fff",
              height: 70,
              width: Dimensions.get("window").width,
              zIndex: 200
            }}
          />
          <WebView
            mixedContentMode="never"
            source={{
              uri: url
            }}
            onNavigationStateChange={this._onNavigationStateChange.bind(this)}
          />
        </View>
      </View>
    );
  }

  showProduct() {
    return (
      <View style={styles.container}>
        <Text style={styles.product}>Product A</Text>
        <Text style={styles.text}>
          This is a great product which we sell to you
        </Text>
        <Text style={styles.text}>
          The price for today is € {this.state.amount},- per item
        </Text>
        <Text style={styles.quantity}>How many items do you want to buy?</Text>
        <View style={{ flex: 1 }}>
          <TextInput
            style={styles.textInput}
            onChangeText={text => this.setState({ quantity: text })}
            value={this.state.quantity}
          />
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.handleOrder()}
          >
            <Text>Order now</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  render() {
    switch (this.state.screen) {
      case "product":
        return this.showProduct();
      case "payment":
        return this.startPayment();
      case "success":
        return (
          <View style={styles.container}>
            <Text style={{ fontSize: 25 }}>Payments Succeeded :)</Text>
          </View>
        );
      case "failure":
        return (
          <View style={styles.container}>
            <Text style={{ fontSize: 25 }}>Payments failed :(</Text>
          </View>
        );
      default:
        break;
    }
  }
}

export default withAuthenticator(App);

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    marginTop: 20,
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  textInput: {
    width: 200,
    borderColor: "gray",
    borderWidth: 1,
    padding: 15
  },
  quantity: {
    marginTop: 50,
    fontSize: 17,
    marginBottom: 10
  },
  text: {
    fontSize: 17,
    marginBottom: 10
  },
  product: {
    fontSize: 22,
    marginBottom: 10
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    marginTop: 50,
    margin: 10
  },
  loader: {
    flex: 1,
    justifyContent: "center"
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10
  }
});

결론

React Native(Expo), Stripe, AWS Amplify 등의 도구를 사용하여 사용자 환경에서 결제를 설정하는 방법을 보여 드렸습니다.Stripe Checkout을 통해 이제 Apple, Google Pay 및 기타 방식과 같은 더 많은 결제 방식을 쉽게 추가할 수 있으며 응용 프로그램을 변경하는 데 많은 노력을 기울일 필요가 없습니다.
나는 이것이 너에게 유용하길 바란다. 나는 너의 피드백을 기대한다.

지저귀다

새 블로그를 업데이트하고 싶으세요?
트위터에서 팔로우하기: