Airwallex 中文名稱空中云匯 主頁(yè)是做境外VISA信用卡、銀聯(lián)支付等的一個(gè)集成支付接口

公司網(wǎng)址可以搜索空中云匯
 
一．注冊(cè)創(chuàng)建支持api key
 

 
 
二．獲取到平臺(tái)登入token
 
    function getToken(){
        $token=session('air_token');
        $config=$this->config();
        $client_id=$config['x-client-id'];
        $api_key=$config['x-api-key'];
       
      if(!$token){
        $curl = curl_init();
        curl_setopt_array($curl, array(
          CURLOPT_URL => 'https://api.airwallex.com/api/v1/authentication/login',
          CURLOPT_RETURNTRANSFER => true,
          CURLOPT_ENCODING => '',
          CURLOPT_MAXREDIRS => 10,
          CURLOPT_TIMEOUT => 0,
          CURLOPT_FOLLOWLOCATION => true,
          CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
          CURLOPT_CUSTOMREQUEST => 'POST',
          CURLOPT_HTTPHEADER => array(
            'Content-Type: application/json',
            'x-client-id:'.$client_id.'',
            'x-api-key:'.$api_key.'',
         
          ),
        ));
       
        $response = curl_exec($curl);
 
        $data=json_decode($response,true);
        //dump($data);exit;
            if($data['token']){
                session('air_token',$data['token'],60*30);
                $token= $data['token'];
            }
        }
        return $token;
 
    }
 
三. 通過token 去獲取溝通平臺(tái)創(chuàng)建支付意向訂單
public  function create_order($order)
    {
        $curl = curl_init();
        $token=$this->getToken();
       
        $time=date(DATE_ISO8601);//注意時(shí)間格式必須是DATE_ISO8601
        //dump($time);
       
        curl_setopt_array($curl, array(
          CURLOPT_URL => 'https://api.airwallex.com/api/v1/pa/payment_intents/create',
          CURLOPT_RETURNTRANSFER => true,
          CURLOPT_ENCODING => '',
          CURLOPT_MAXREDIRS => 10,
          CURLOPT_SSL_VERIFYPEER=>false,
          CURLOPT_SSL_VERIFYHOST=>false,
          CURLOPT_TIMEOUT => 0,
          CURLOPT_FOLLOWLOCATION => true,
          CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
          CURLOPT_CUSTOMREQUEST => 'POST',
          CURLOPT_POSTFIELDS =>'{
            "request_id": "'.$order['merchant_order_id'].'",
            "amount": '.$order['amount'].',
            "currency": "CNY",
            "merchant_order_id": "'.$order['merchant_order_id'].'",  
            "return_url": "xxxxxxxxxxx"
          }',
          CURLOPT_HTTPHEADER => array(
            'Content-Type: application/json',
            'Authorization: Bearer '.$token.''
          ),
        ));
       
        $response = curl_exec($curl);
       
        curl_close($curl);
        return  json_decode($response,true);
 
    }
 
return_url:可選 如果你用的支付模式是跳轉(zhuǎn)到空中云付的托管頁(yè)面就要填寫，支付成功后回跳頁(yè)面，這里我們用的是內(nèi)嵌卡片
 

    
四、前端設(shè)置支付卡片
<script src="https://checkout.airwallex.com/assets/elements.bundle.min.js"></script>
 
<div class="main-page shopping-main">
  <div class="container clear pay_box">
      <div class="syt-body">
          <div class="t1">Payment amount</div>
          <div class="t3">{$order.order_no}</div>
          <div class="t2">$ {$total_amount}</div>
          <div id="card-container" style="display: none">
            <!-- STEP #3a: Add an empty container for the card element to be injected into -->
            <div id="card"></div>
            <p id="input-error" style="color: red"></p>
            <!-- STEP #3b: Add a submit button to trigger the payment request -->
            <button id="submit" disabled="true">Submit</button>
          </div>
          <!-- Example response message containers -->
          <p id="error"></p>
          <p id="success">Payment successful!</p>
      </div>
  </div>
</div>
 
 
  <script>
    var id="{$payment.id}";
    var client_secret="{$payment.client_secret}"    
    var currency="{$payment.currency}"
    try {
      // STEP #2: Initialize the Airwallex global context for event communication
      Airwallex.init({
        env: 'prod', // Setup which Airwallex env('staging' | 'demo' | 'prod') to integrate with
        origin: window.location.origin, // Setup your event target to receive the browser events message
        intent_id: id,
        client_secret: client_secret,
        currency: currency,
 
        buttonType: 'buy', // Indicate the type of button you want displayed on your payments form. Like 'buy'
        fonts: [
          // Customizes the font for the payment elements
          {
            src:
              'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
            family: 'AxLLCircular',
            weight: 400,
          },
        ],
      });
 
      // STEP #4: Create 'card' element
      const card = Airwallex.createElement('card');
 
      // STEP #5: Mount card element
      const domElement = card.mount('card');
      // STEP #7: Add an event listener to ensure the element is mounted
      domElement.addEventListener('onReady', (event) => {
        /*
       ... Handle event
        */
        document.getElementById('card-container').style.display = 'block'; // Example: show element when it is mounted
        document.getElementById('submit').style.display = 'block'; // Example: show element when it is mounted
        console.log('Element is ready', event.detail);
      });
 
      // STEP #8: Add an event listener to validate element input
      domElement.addEventListener('onChange', (event) => {
        const { complete } = event.detail;
        document.getElementById('submit').disabled = !complete; // Example: only enable button when element input is completed
      });
 
      // STEP #9: Add an event listener to get input focus status
      domElement.addEventListener('onFocus', (event) => {
        // Customize your input focus style by listen onFocus event
        const element = document.getElementById('input-error');
        if (element) {
          element.innerHTML = ''; // Example: clear input error message
        }
      });
 
      // STEP #10: Add an event listener to show input error message when finish typing
      domElement.addEventListener('onBlur', (event) => {
        const { complete } = event.detail;
        const { error } = event.detail;
        const element = document.getElementById('input-error');
        if (element & error) {
          element.innerHTML = error.message || JSON.stringify(error); // Example: set input error message
        }
      });
 
      // STEP #11: Add an event listener to handle errors
      domElement.addEventListener('onError', (event) => {
        const { error } = event.detail;
        document.getElementById('error').style.display = 'block'; // Example: show error
        document.getElementById('error').innerHTML = error.message; // Example: set error message
        console.error('There was an error', error);
      });
    } catch (error) {
      document.getElementById('error').style.display = 'block'; // Example: show error
      document.getElementById('error').innerHTML = error.message; // Example: set error message
      console.error('There was an error', error);
    }
 
    // STEP #6a: Add a button handler to trigger the payment request
    document.getElementById('submit').addEventListener('click', () => {
      document.getElementById('error').style.display = 'none'; // Example: hide error
      document.getElementById('submit').innerHTML = 'Processing...'; // Example: set submitting state
      document.getElementById('submit').disabled = true; // Example: disable button to prevent double submission
 
      Airwallex.confirmPaymentIntent({
        element: Airwallex.getElement('card'),
        intent_id: id,
        client_secret: client_secret,
     
      })
        .then((response) => {
          // STEP #6b: Listen to the request response
          /* Handle confirm response */
          document.getElementById('success').style.display = 'block'; // Example: show success message
          document.getElementById('submit').innerHTML = 'Submit'; // Example: reset button state
          document.getElementById('submit').disabled = true; // Example: reset button state
         
        })
        .catch((response) => {
          // STEP #6c: Listen to the error response
          /* Handle error response */
          document.getElementById('error').style.display = 'block'; // Example: show error message
          document.getElementById('error').innerHTML = response.message; // Example: fill in error message
          document.getElementById('submit').innerHTML = 'Submit'; // Example: reset button state
          document.getElementById('submit').disabled = false; // Example: reset button state
          console.error(`There was an error, ${JSON.stringify(response)}`);
        });
    });
 

 
Id：創(chuàng)建訂單回調(diào)的訂單id
client_secret：創(chuàng)建訂單回調(diào)secret
Currency：支付的貨幣符號(hào)
 

• 創(chuàng)建webhooks 回調(diào)支付結(jié)果