PayPal JS JDK+Rails 前後端串接應用

此篇以「全端工程師」角色模擬使用 JS+Ruby on Rails後端進行串接paypal，後端使用 paypal的gem來做搭配。

 

paypal開發者頁面:

https://developer.paypal.com/

• 申請paypal Sandbox測試帳號，以及申請兩個金鑰：client_id與client_secret。
  • PayPal裡：
    • Sandbox 測試
    • Live 正式

設置key：(client_id 設置自己申請的)
<script src="<https://www.paypal.com/sdk/js?client-id={client_id}&currency=USD>"></script>
  
<!-- paypal文件裡面有其他樣式可以自定義 -->
<div id="paypal-button-container"></div>

/* java script code */
paypal.Buttons({
    createOrder: function(data, actions) {
        // 這個函數設置支付信息
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: 20.00 
                }
            }]
        });
    },
    onApprove: function(data, actions) {
        // 這個函數調用 PayPal 交易的支付
        return actions.order.capture().then(function(details) {
            alert('Transaction completed by ' + details.payer.name.given_name + '!');
        });
    },
    onCancel: function (data) {
        // 可以在這裡添加用戶取消支付的處理邏輯
        alert('Transaction cancelled!');
    },
    onError: function (err) {
        // 可以在這裡處理錯誤
        console.error('Error during the payment process!', err);
    }
}).render('#paypal-button-container');
  

使用這段JS成功送出資料後，Paypal後台會收到一筆[POST]的資料，這時可以取得paymentId，進行回調執行支付確認動作。

  
gem 'paypal-sdk-rest'
gem 'paypal-checkout-sdk'
gem 'paypalhttp'

# initializers/uri_escape.rb
require 'uri'
module URI
  def self.escape(str, unsafe = Regexp.new("[^#{PATTERN::UNRESERVED}]"))
    URI::DEFAULT_PARSER.escape(str, unsafe)
  end
end

# 在config/initializers/裡面新增：
# initializers/paypal_client.rb
require 'paypal-checkout-sdk'

module PayPalClient
  class << self
    def client
      PayPal::PayPalHttpClient.new(environment)
    end

    def environment
      client_id = "..."
      client_secret = "..."

      # 根据你的环境选择 Sandbox 或 Live
      PayPal::SandboxEnvironment.new(client_id, client_secret)
    end
  end
end

  

以上基本使用 Java Script前端串接到Rails後端的PayPal金流基礎架構流程。後面如果有更新會繼續更新文章。