PayPal ペイパルロゴボタン設定方法サンプルコード

PayPal(ペイパル)ボタンを設置する方法。ざっくり。
PayPal埋め込み用ロゴhtmlコードを取得する。日本語用ペイパルロゴサンプルコードです。ランダムボタンを選択。

<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"><a href="#" onclick="javascript:window.open('https://www.paypal.com/jp/webapps/mpp/logo/about','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=900, height=700');"><img src="https://www.paypalobjects.com/marketing/web/jp/developer/logos-buttons/download/319x110_c-2_20200120.png" border="0" alt="ペイパル|銀行決済も手数料0円、カードのポイント貯まる|VISA,Mastercard,JCB,American Express, 銀行"></a></td></tr></table><!-- PayPal Logo -->

PayPal(ペイパル)公式サイトで準備されている上のコードをランダムに選んでそのまま入れたものです↓

ペイパル|銀行決済も手数料0円、カードのポイント貯まる|VISA,Mastercard,JCB,American Express, 銀行


www.paypal.com/jp/webapps/mpp/developer/logos-buttons/download

開発環境のセットアップ
ログインをしてダッシュボードへ

ウェブページにPayPal JavaScript SDKを追加する

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
</head>
<body>
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID"> // Required. Replace SB_CLIENT_ID with your sandbox client ID.
</script>
</body>

支払ボタンのレンダリング

<body>
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID"> // Required. Replace SB_CLIENT_ID with your sandbox client ID.
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons().render('#paypal-button-container');
// This function displays Smart Payment Buttons on your web page.
</script>
</body>

トランザクションの設定

<script>
paypal.Buttons({
createOrder: function(data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
}
}).render('#paypal-button-container');
</script>

トランザクションのキャプチャ

<script>
paypal.Buttons({
createOrder: function(data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
},
onApprove: function(data, actions) {
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
//This function displays Smart Payment Buttons on your web page.
</script>
<a href="https://developer.paypal.com/docs/checkout/integrate/" target="_blank">developer.paypal.com/docs/checkout/integrate</a>

PayPal(ペイパル)のドキュメントはわかりやすいような。
PayPalサンプルデモ
demo.paypal.com
PayPalサンプルデモ日本語バージョン PayPal製品の使用体験とコードサンプルを見る
demo.paypal.com/jp/demo
PayPal Developer Docs
developer.paypal.com/docs
PayPal支払いボタンのドキュメント
developer.paypal.com/docs/checkout/best-practices
PayPal チェックアウトベストプラクティス
developer.paypal.com/docs/checkout/best-practices
PayPal GitHub
github.com/paypal