Omise.js에서 지불 금액을 동태적으로 변경하는 방법
개시하다
카드 결제 시 카드 번호를 처리하기 위해 일반적으로 아래의 협의를 사용합니다
저번 서버에서 Omise의 API를 사용한다고 했을 때 신용카드 정보를 받을 때 고객측에서 하는 것이 가장 좋다고 말했다.이번에는 클라이언트의 영패 수발 부분을 설치해 보았다.
클라이언트가 Omise를 설치합니다.js 또는 Omise의 javascript 클라이언트를 사용하는 두 가지 방법이 있습니다.자바스크립트 클라이언트를 사용하려면 처음부터 신용카드를 입력하는 형식을 만들어야 하지만 자유롭게 맞춤형으로 제작할 수 있다.Omise.js를 사용하면 맞춤형이 어려울 수 있지만 신경을 쓰지 않으면 간단하게 사용할 수 있습니다.이번에는 Omise.제이스를 블루로 만들어.js로 실시해 보았지만, 동태적으로 가격의 변경을 진행할 수 있었다.
코드
우선 오미즈야.쓸 수 있게 하다.
script 라벨로 js의 cdn을 감싸세요.순서는omise다.js로 들어오는 main.js 을 사용하기 전에 쓰십시오.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuex shopping cart example</title>
</head>
<body>
<script src="https://cdn.omise.co/omise.js"></script>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
<template>
<div class="cart">
<h2>Your Cart</h2>
<p v-show="!products.length"><i>Please add some products to cart.</i></p>
<ul>
<li v-for="product in products">
{{ product.title }} - {{ "¥" + product.price }} x {{ product.quantity }}
</li>
</ul>
<p>Total: {{ "¥" + total }}</p>
<p><button :disabled="!products.length" @click.prevent="checkout(total)">Checkout</button></p>
<form action="https://postman-echo.com/post" id="my-custom-checkout-form" method="POST">
<input type="hidden" :value="total" name="total">
<input type="hidden" value="" name="omiseToken">
<input v-for="product in products" type="hidden" :value="product.quantity" :name="product.id">
</form>
<p v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</p>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex"
export default {
computed: {
...mapState({
checkoutStatus: state => state.cart.checkoutStatus
}),
...mapGetters("cart", {
products: "cartProducts",
total: "cartTotalPrice"
})
},
methods: {
checkout(total) {
OmiseCard.open({
frameLabel: "Merchant",
submitLabel: "PAY RIGHT NOW !",
amount: total
})
}
},
mounted() {
OmiseCard.configure({
publicKey: "pkey_test_???", // 公開鍵。ダッシュボードから取得できます
image: "https://cdn.omise.co/assets/dashboard/images/omise-logo.png",
currency: "JPY",
onCreateTokenSuccess: token => {
const form = document.querySelector("#my-custom-checkout-form")
form.omiseToken.value = token;
form.submit()
}
})
OmiseCard.attach()
}
}
</script>
해설
영패를 전달하는 표를 만듭니다.테스트용
https://postman-echo.com/post을 사용했는데 기호 서버가 왔어요. <form action="https://postman-echo.com/post" id="my-custom-checkout-form" method="POST">
<input type="hidden" :value="total" name="total">
<input type="hidden" value="" name="omiseToken">
<input v-for="product in products" type="hidden" :value="product.quantity" :name="product.id">
</form>
영패를 획득한 후 호출 호출을 만듭니다.카드 정보 등에 오류가 없으면 호출됩니다.1 에서 만든 폼을 제출합니다.이것은 페이지를 처음 불러올 때만 실행됩니다
mounted() {
OmiseCard.configure({
publicKey: "pkey_test_???", // 公開鍵。ダッシュボードから取得できます
image: "https://cdn.omise.co/assets/dashboard/images/omise-logo.png",
currency: "JPY",
onCreateTokenSuccess: token => {
const form = document.querySelector("#my-custom-checkout-form")
form.omiseToken.value = token;
form.submit()
}
})
OmiseCard.attach()
}
omise.js카드 정보를 입력하는 표의 함수를 호출합니다.이 가격
amount은 납품된 매개 변수에 따라 동태적으로 변화한다. methods: {
checkout(total) {
OmiseCard.open({
frameLabel: "Merchant",
submitLabel: "PAY RIGHT NOW !",
amount: total
})
}
창고.
시장 하면 베니스 상인.
Reference
이 문제에 관하여(Omise.js에서 지불 금액을 동태적으로 변경하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/vascoosx/items/786a15b3019fc1e92c88텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
