韓国で Kakao Pay を使用した決済を受け付ける

Kakao Pay ユーザーからの決済を受け付ける方法をご紹介します。

Kakao Pay を導入すると、韓国在住の顧客が、現地で一般的なこの支払い方法を使用して支払いできるようになります。

When a customer makes a payment, we redirect them to our local processor partner to authenticate and authorize the payment. After the customer authorizes the payment, Stripe redirects them back to your site.

Payment Intents API を使用して、韓国の顧客から現地のカードと支払い方法による決済を受け付けます。

Set up Stripe
Server-side

First, you need a Stripe account. Register now.

アプリケーションから Stripe APIにアクセスするには、公式ライブラリを使用してください。

Create a PaymentIntent
Server-side

A PaymentIntent is an object that represents your intent to collect a payment from a customer and tracks the payment process. To create a PaymentIntent that accepts a payment using kakao_pay, specify the amount to collect, krw as the currency, and kakao_pay in the payment_method_types list. If you maintain a list of payment method types that you pass when creating a PaymentIntent, add kakao_pay to it.

Additionally, you must provide the buyer’s email address.

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

その後、クライアント側で JavaScript を使用して client secret を取得します。

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Make sure that your customers understand the terms of use
Client-side

Stripe’s processor partner requires that customers be made aware of the identity of the processor, and understand its terms of use. You must include the following language and link in your checkout page:

注

After submission, you’re redirected to complete next steps. This transaction is processed through NICEPAY in accordance with NICEPAY’s terms of use.

Redirect to local processor
Client-side

顧客が Kakao Pay での支払いをクリックしたときに、Stripe.js を使用してその支払いを Stripe に送信します。Stripe.js は、決済フローを構築するための基本的な JavaScript ライブラリです。このライブラリにより、以下で説明するリダイレクトなどの複雑な処理が自動的に行われ、他の決済手段にも対応できるように実装を拡張できます。Stripe.js スクリプトを決済ページに含めるには、HTML ファイルの head にこのスクリプトを追加します。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

決済ページで以下の JavaScript を使用して、Stripe.js のインスタンスを作成します。

client.js
// Set your publishable key. Remember to change this to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Use the client secret of the PaymentIntent and call stripe.confirmPayment to handle redirecting to the checkout page of the local processor. On this page, the customer selects their issuer and authorizes the payment. Add a return_url to determine where Stripe redirects the customer after they complete the payment.

client.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async function(event) {
  event.preventDefault();

  // Set the clientSecret of the PaymentIntent
  const { error } = await stripe.confirmPayment({
    clientSecret: clientSecret,
    confirmParams: {
      payment_method_data: {
        type: 'kakao_pay',
      },
      // Return URL where the customer should be redirected after the authorization
      return_url: `${window.location.href}`,
    },
  });

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('error-message');
    errorElement.textContent = result.error.message;
  }
});

The return_url corresponds to a page on your website that displays the result of the payment. You can determine what to display by verifying the status of the PaymentIntent. To verify the status, the Stripe redirect to the return_url includes the following URL query parameters. You can also append your own query parameters to the return_url. They persist throughout the redirect process.

Parameter	説明
`payment_intent`	The unique identifier for the `PaymentIntent`.
`payment_intent_client_secret`	The client secret of the `PaymentIntent` object.

Test integration with Kakao Pay

Test your integration with Kakao Pay with your test API keys by viewing the redirect page. You can test the successful payment case by authenticating the payment on the redirect page. The PaymentIntent transitions from requires_action to succeeded. To test the case where the customer fails to authenticate, use your test API keys and view the redirect page. On the redirect page, click Fail test payment. The PaymentIntent transitions from requires_action to requires_payment_method.

注

韓国で Kakao Pay を使用した決済を受け付ける

Kakao Pay ユーザーからの決済を受け付ける方法をご紹介します。

Set up StripeServer-side

Create a PaymentIntentServer-side

client secret を取得する

Make sure that your customers understand the terms of useClient-side

注

Redirect to local processorClient-side

Test integration with Kakao Pay

オプションHandle post-payment events

Set up Stripe
Server-side

Create a PaymentIntent
Server-side

Make sure that your customers understand the terms of use
Client-side

Redirect to local processor
Client-side