Slash Web3 Payment を使ってみよう！！ 【基本編②】

![Slash2.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299653/392057d9-1717-2c68-8a2d-ab13b1199be5.jpeg)

皆様、こんにちは！

前回に引き続き、**Slash Web3 Paymentを使ってみよう**シリーズの続きとなります！！

前回の記事は下記からアクセスできます！

https://qiita.com/mashharuki/items/3d001eb95b2445260644

今回は、前回より少し実践的な内容になります！

Reactのテンプレートアプリに、**Crypto Pay**ボタンを埋め込んで自分の作ったアプリケーションからSlashによる決済を行えるようにしてみたいと思います！！

これを読み終わった頃には、自分のアプリにSlash決済の機能を埋め込めるようになっているはずです！！

## 作ったアプリのイメージ

Reactのテンプレアプリにリンクボタンを埋め込んだとてもシンプルなアプリになっています。

![](https://raw.githubusercontent.com/mashharuki/SlashSampleReactApp/main/docs/init.png)

## Live demo App

https://slash-sample-react-app.vercel.app/

## ソースコード

https://github.com/mashharuki/SlashSampleReactApp

## ソースコードの解説

**GitHub**を見ていただくとわかるのですがほぼテンプレ通りでpngファイルを追加したのと、`App.tsx`の中身を少し改造しただけです！

ボタン用のpngファイルは下のページから持ってきました！

https://slash.fi/media_kit


それではアプリのメイン部分となる`App.tsx`を見てみましょう！

```Ts
import React from 'react';
import logo from './logo.svg';
import './App.css';
import paymentButton from './paymentButton.png';

/**
 * App Component
 */
function App() {
  // 決済URL (ここは必要に応じて変更する。)
  const paymentUrl = "https://testnet.slash.fi/payment-merchant/2334ea3bc896476c4e8b525952d411f2";

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Please click button
        </p>
        <a
          className="App-link"
          href={paymentUrl}
          target="_blank"
          rel="noopener noreferrer"
        >
          <img 
            src={paymentButton} 
            alt="payment button" 
            height={120}
          />
        </a>
      </header>
    </div>
  );
}

export default App;
```

はい！これだけです！！

`paymentUrl`変数に前回生成した決済URLをコピペしたら完成です！！

決済用のURLは、下のページで確認することができます！！

![](https://camo.qiitausercontent.com/96964a0ec8e364cfceb50827412e71dc824c1331/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f313239393635332f39383661663237302d376634332d343130362d643263322d3938623465313438653431352e706e67)

### アプリの動かし方

:::note info
① ソースコードをgitでcloneしてくる。
② モジュールのインポート 
③ アプリ起動
:::

① ソースコードをgitでcloneしてくる。

```bash
git clone https://github.com/mashharuki/SlashSampleReactApp.git
```

② モジュールのインポート

```bash
cd frontend && npm i 
```

③ アプリ起動

```bash
npm run start
```

問題なく起動できれば、[localhost:3000](localhost:3000)でアプリにアクセスできるはずです。

事前にfaucetで少額の暗号資産を入手しておきましょう！

https://github.com/arddluma/awesome-list-testnet-faucets

![](https://raw.githubusercontent.com/mashharuki/SlashSampleReactApp/main/docs/init.png)

**Crypto Pay**ボタンを押すと、前回でも確認したSlashの決済画面に遷移します！

![](https://raw.githubusercontent.com/mashharuki/SlashSampleReactApp/main/docs/pay.png)

支払う法定通貨の種類と金額を指定します！

すると支払い画面に遷移します！ 決済コントラクトを複数作成した場合には、接続するネットワークを切り替えて決済することもできます！

Polygonに資産が無いけど、AstarNetworkになら資産があるというときにも決済を行うことができます！！

![](https://raw.githubusercontent.com/mashharuki/SlashSampleReactApp/main/docs/pay2.png)

支払う暗号資産を選択してしばらく待つと支払いが完了します！！

![](https://raw.githubusercontent.com/mashharuki/SlashSampleReactApp/main/docs/pay3.png)

はい！ ここまでで**React**で作ったアプリに**Slashの決済機能**を埋め込むことができました！

この方法は**Slashをアプリに導入できる最も簡単な方法**だと思いますので、皆さんぜひやってみてください！
導入する側に**MetaMaskなどの接続部分を実装する必要がない**点は魅力的ですよね！

### 具体的な実装例への繋げ方のヒント

上記の仕組みをうまく自分達の仕組みに取り入れていくヒントや実装例を紹介したいと思います！

まず、今回作成したアプリですが支払い金額は都度ユーザー側が入力する必要がある仕組みになってしまっています。
なので、下記のサイトを参考にしてAPIをコールし加盟店側であらかじめ必要事項などを設定したURLを発行してあげることもSlashでは可能ですのでぜひ参考にしてみてください！ フロントエンド・バックエンドともにソースコードがあります！


https://slash-fi.gitbook.io/docs/integration-guide/integration-guide/standard-integration

そして、QRコードを使わず決済用のURLだけを使う方法としてはすでに投げ銭アプリとして取り入れている人もいるのでぜひ参考にしてみてはいかがでしょうか？

https://twitter.com/gdvonly/status/1637348713906733056

**シンプル**ゆえに柔軟性も高く導入しやすいと考えています。

QRコードでももちろん導入実績があるみたいなので下記などが参考になると思います！
実際にお店でSlashに対応している店舗もあり、決済することも可能みたいです！

https://twitter.com/zou_yilu/status/1634022803182854145


今回のトピックはここまでです！

ありがとうございました！！


その他ピッチ資料などが公開されていましたのでご興味があればぜひこちらも！
決済ソリューション以外にも開発が進められているみたいなので楽しみですね！！

https://drive.google.com/file/d/1ib1-RokKEaXtJnmyzxMKgLI6Ndz2kqXH/view