Stripe Connect로 계정을 만들 때의 주소를 정규화하여 Geolonia의 OSS 프로그램 라이브러리에 도전해 보십시오

연말 JPStripe 발표 당시 Stripe Connect에 주소를 적었다는 기사가 화제가 됐다.
https://gist.github.com/toruf-stripe/60293ec99a333a7af1daaca31b562741
그 중에서 "Geolonia가 발표한 주소의 정규화 라이브러리는 사용할 수 있습니까?"갑자기 그렇게 말하니까 어디론가 가봤어요.

사용할 라이브러리

https://github.com/geolonia/normalize-japanese-addresses
표기 흔들림과 신구 글씨체 등 쉽게 나타나는 주소 입력 흔들림을 흡수하는 OSS(MIT 라이선스)다.
스트립도 커스터머가 등록한 주소(요청·배송) 데이터의 명부·정규화에 활용할 수 있을 것으로 생각한다.
실제로 행동하고 싶다면 아래처럼 tsdx로 설정하면 편리합니다.

% npx tsdx create --template basic connect-address
% cd connect-address
% yarn add @geolonia/normalize-japanese-addresses

동작 확인

Jest 테스트를 통해 동작을 확인합니다.
이것은 본체 테스트 코드를 직접 가지고 있는 샘플이지만'주소를 입력하면 정규화된 대상으로 되돌려준다'는 동작으로 보인다.

import { normalize } from '@geolonia/normalize-japanese-addresses';

test('大阪府堺市北区新金岡町4丁1−8', async () => {
  const res = await normalize('大阪府堺市北区新金岡町4丁1−8')
  expect(res).toStrictEqual({"pref": "大阪府", "city": "堺市北区", "town": "新金岡町四丁", "addr": "1-8", "lat": 34.568184, "lng": 135.519409, "level": 3})
})

Stripe Connect에서 사용할 때 필요한 사항

대충 보면 최소한 필요한 것은 아래 두 가지다.

객체의 속성 이름을 Stripe Connect로 변경

Stripe Connect에 대한 예외

기술적으로 포기한 일

다음 세 가지에 관해서는 이번에 포기했다.
해당되지 않지만 Stripe Connect에서 accounts.create API가 오류를 반환하지 않음을 확인합니다.

정목, 문패는 아랍 숫자다.전각, 반각 다 돼요.
-> 도서관에서'정목'을 한자 숫자로 바꾸어 되돌려준다.여기로 전환하는 처리만 추가하면 됩니다.

교토시의 통칭은 시티의 마지막에
->프로그램 라이브러리에서 통칭을 읽을 수 있기 때문에 입력 값에서 이 이름을 추출하는 처리가 필요합니다

주소에 건축물 이름, 층, 방 번호가 포함되지 않으면line2를 지정하지 않습니다
->프로세서 라이브러리만line2에 대응하는 건축물 정보 등을 얻을 수 없음

코드를 추상화하다

처리를 추가하기 전에 주 처리 부분을 함수로 설정합니다.
유형 정의를 간단하게 추가합니다.

import { normalize } from '@geolonia/normalize-japanese-addresses';

interface StripeConnectAddress {
  state: string;
  city: string;
  town: string;
  line1: string;
  line2?: string;
}

const normalizeForStripeConnect = async (address: string): Promise<StripeConnectAddress> => {
  const res = await normalize(address)
  return {
    state: res.pref,
    city: res.city,
    town: res.town,
    line1: res.addr
  }
}

test('大阪府堺市北区新金岡町4丁1−8', async () => {
  const res = await normalizeForStripeConnect('大阪府堺市北区新金岡町4丁1−8')
  expect(res)
  .toEqual({
    state: "大阪府",
    city: "堺市北区",
    town: "新金岡町四丁",
    line1: "1-8"
  })
})

이루어지다

그리고 설치한 물건은 여기 있습니다.
'예외'를 추가한 이와테(岩手)현과 삿포로시 대응 조치다.

삿포로시의'꼬챙이'가 타운의 마지막에

암수현의'제아지열'은 타운의 마지막에

const convertToStripeConnect = (address: NormalizeResult): StripeConnectAddress => {
  return {
    state: address.pref,
    city: address.city,
    town: address.town,
    line1: address.addr
  }
}

const normalizeForStripeConnect = async (address: string): Promise<StripeConnectAddress> => {
  const res = await normalize(address)
  const { addr, town, pref } = res
  // 岩手県の「第◯地割」は、town の最後につける
  if (pref === '岩手県') {
    if (/地割/.test(addr)) {
      const chiwari = (() => {
        const reg1 = addr.match(/第.\d地割/)
        if (reg1) return reg1[0]
        const reg2 = addr.match(/.\d地割/)
        if (reg2) return reg2[0]
        return ''
      })()
      res.addr = addr.replace(/第.\d地割/, '').replace(/.\d地割/, '')
      res.town = `${town}${chiwari}`
    }
  }
  // 札幌市の「◯条」は、town の最後につける
  if (pref === '北海道') {
    if (/条/.test(town)) {
      res.addr = `${town.substring(town.indexOf('条') + 1)}${addr}`
      res.town = town.substring(0, town.indexOf('条') + 1)
    }
  }
  return convertToStripeConnect(res)
}

기스트로 봐요.
어떤 운동이 되는지 아래의 테스트 코드를 보십시오.

test.each([
  ['大阪府堺市北区新金岡町4丁1−8', {
    state: "大阪府",
    city: "堺市北区",
    town: "新金岡町四丁",
    line1: "1-8"
  }],
  ["神奈川県横浜市中区本町６丁目５０−１０", {
    "city": "横浜市中区",
    "line1": "50-10",
    "state": "神奈川県",
    "town": "本町六丁目",

  }],
  ['岩手県九戸郡洋野町種市第３５地割１０２−２', {
    "city": "九戸郡洋野町",
    "line1": "102-2",
    "state": "岩手県",
    "town": "種市第35地割",
  }],
  ['京都府 京都市 中京区 御幸町通三条上る 丸屋町326', {
    "city": "京都市中京区",
    "line1": "326",
    "state": "京都府",
    "town": "丸屋町",

  }],
  ['宮城県仙台市太白区鈎取一本杉６４−１', {
    "city": "仙台市太白区",
    "line1": "一本杉64-1",
    "state": "宮城県",
    "town": "鈎取",

  }],
  ['北海道札幌市豊平区平岸５条６丁目１−２４', {
    "city": "札幌市豊平区",
    "line1": "六丁目1-24",
    "state": "北海道",
    "town": "平岸五条",

  }],
  ['愛知県名古屋市熱田区二番２丁目２０−２', {
    "city": "名古屋市熱田区",
    "line1": "20-2",
    "state": "愛知県",
    "town": "二番二丁目",
  }]
])("%p", async (address, expectedResult) => {
  const res = await normalizeForStripeConnect(address)
  expect(res).toEqual(expectedResult)
})

도 표시 흔들림과 공간 처리 등을 했으며 기본적으로 스트립 API에 직접 던진 데이터다.

Stripe를 사용하여 UI를 제공하는 경우

참고로 Stripe에서 제공하는 UI를 사용하면 우편 번호가 자동으로 입력됩니다.
원래는 입력하지 말라고 하면 흔들림을 피하는 스타일이라고 생각해요.

그림% 1개의 캡션을 편집했습니다.

시험해 보다

'포기하는 곳'에서 보듯 스트립 커넥트에 정목타운의 한자 숫자를 넣는 등 신경을 썼다.
그러나 공간의 혼입, 디지털 표기, 신구 글씨체 등의 파동 조정도 잘 이뤄졌다.
포기했다고 적힌 부분도 모두 정규 표현으로 조정할 수 없는 부분이기 때문에 어느 정도 정규 표현을 익힐 수 있는 사람이라면 완성도 불가능한 것은 아니라고 생각한다.
스스로 UI를 구축하는 등 어떻게든 스트리프가 준비한 UI를 리디렉션하기 어려운 상황에서 이런 OSS를 활용하는 건 어떨까.