fincode開発チームです！
fincodeを使って決済実行してみた 第三弾・リダイレクト型決済編をご紹介します！
リダイレクト型決済では、決済JS・トークンJSを用いた決済方法とは異なり
fincodeが提供する決済画面を使用して決済が実行されます。
リダイレクト型決済のフローは以下になります。
まず、サーバから決済URL作成APIを実行し、決済URLを取得します。
取得したURLに遷移させることで、fincodeの決済画面での決済が可能となります。
オーソリ後に決済結果画面に遷移して完了です。
今回フロントはVue.js、バックエンドはnode.js（+ Express）で実装しました。
実装メモ：
■フロント
・axiosでバックエンドのAPIを呼び出す。
・決済URL作成APIで取得したURLに遷移する。
■バックエンド
・決済URL作成APIを実行する。
※[success_url]→fincodeの決済画面で[お支払い]ボタン押下後、オーソリ完了時の遷移先を設定
[cancel_url]→fincodeの決済画面で[戻る]ボタン押下時の遷移先を設定
Vue.js
<template>
省略
</template>
<script>
import axios from "axios";
export default {
name: "redirectTest",
data() {
return {
amount: "1000",
};
},
methods: {
redirect() {
//axiosでリクエストデータ送信
axios.post("http://localhost:3000/redirect", {
amount: this.amount,
})
.then((res) => {
console.log(JSON.stringify(res));
//リダイレクト型リンクに遷移
window.location.href = res.data.link_url;
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>node.js
var express = require('express');
var router = express.Router();
/* 決済URL作成呼び出しAPI
* http://localhost:3000/redirect にPOSTを投げると、
* 決済URL作成APIのレスポンスをJSON形式で返す。
*/
router.post('/', function (req, res, next) {
"use strict";
const console = require("console");
const request = require("request");
const API_KEY = "Bearer m_prod_XXXXXXXXXXXXXXXX“”;
const BASE_URL = "https://api.fincode.jp";
const endpoint = "/v1/sessions";
const DATA = {
success_url: "http://localhost:3000/success",
cancel_url: "http://localhost:3000/cancel",
transaction: {
amount: req.body.amount,
},
};
const options = {
url: BASE_URL + endpoint,
proxy: PROXY_URL,
headers: {
"Content-Type": "application/json; charset=utf-8",
Authorization: API_KEY,
},
json: DATA,
}
main();
function main() {
// 決済URL作成API呼び出し
request.post(options, (error, response, body) => {
if (200 != response.statusCode) {
console.log("ERROR");
console.log(body);
} else {
console.log("SUCCESS");
console.log(body);
res.header('Content-Type', 'application/json; charset=utf-8')
res.send(body);
}
}
);
}
});
module.exports = router;■画面イメージ
上記を実行するとサンプルの商品選択画面からfincodeの決済画面に遷移させることができました。
・商品選択画面（サンプル）
↓ [購入画面へ]押下
・fincodeが提供する決済画面
※決済画面デザインは変更になる可能性があります
この記事をShareする
fincode byGMOはスタートアップが成功するために設計されたオンライン決済インフラです。直感的なAPIやローコードコンポーネントで工数少なく実装可能です。
2022.08.01
開発チーム
fincode開発チームです！
fincodeの仕組みや構築方法のTipsを紹介していきます。
