Stripe Elements

สร้างขั้นตอนการชำระเงินที่ยอดเยี่ยมและชาญฉลาด

Stripe Elements เป็นคอมโพเนนต์ UI สำเร็จรูปที่ครบครัน ซึ่งจะช่วยคุณสร้างขั้นตอนการชำระเงินที่สมบูรณ์แบบทุกรายละเอียดทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

ลองใช้เลย ดู Stripe Docs

Donate with
Or pay with card
Address
Name City
Email State
Phone Zip Code
Card Number
Expiration
$1
$5
Jane Doe 185 Berry St Jane Doe $20
janedoe@gmail.com San Francisco janedoe@gmail.com $50
(941) 555-0123 CA (941) 555-0123 $100
4242 5200 8282 8282 8210 6011 0009 9013 9424 98431
MM/YY MM/YY MM/YY MM/YY
CVC CVC CVC CVC
ZIP 94107 ZIP Code ZIP
Pay $25 Pay $25 Pay $25 Donate $5

ประสบการณ์การชำระเงินที่ดีที่สุดสำหรับลูกค้าของคุณ

Stripe Elements สร้างจากประสบการณ์โดยรวมของทีมดูแลหน้าเว็บ ทีมออกแบบ และทีมวิเคราะห์ของ Stripe ซึ่งการช่วยลูกค้าของคุณป้อนข้อมูลอย่างรวดเร็วและถูกต้องจะทำให้ Elements ลดข้อผิดพลาดของผู้ใช้ลงและเพิ่มจำนวนการชำระเงินที่สำเร็จ

  • ตรวจสอบแบบเรียลไทม์

    แสดงคำแนะนำแบบเรียลไทม์โดยอัตโนมัติขณะที่ลูกค้าพิมพ์ เพื่อตรวจจับข้อผิดพลาดได้อย่างทันท่วงที

  • การแปลให้เหมาะกับแต่ละประเทศ

    ตรวจจับโดยอัตโนมัติว่าการป้อนข้อมูลใดที่จำเป็นโดยอ้างอิงตามประเทศของบัตร แล้วแปลให้เหมาะสม

  • การจัดรูปแบบและการปกป้องข้อมูล

    ทำให้การป้อนข้อมูลง่ายและชัดเจนขึ้นสำหรับผู้ใช้ โดยการจับคู่กับการจัดรูปแบบบนบัตร

หมายเลขบัตร
ดด / ปป
CVC
รหัสไปรษณีย์
Visa 5556 04 / 21
Amex 98431 07 / 19
ซื้อด้วย
  • Apple Pay และคำขอการชำระเงิน

    ผสานการทำงานเพียงครั้งเดียวเพื่อใช้ Apple Pay และ Payment Request API (รวมถึง Google Pay)

  • การป้อนข้อมูลแบบอัตโนมัติ

    ตรวจสอบให้มั่นใจว่าการป้อนข้อมูลแบบอัตโนมัติทำงานอย่างสอดคล้องกันในทุกแพลตฟอร์มและเบราว์เซอร์ เพื่อให้ลูกค้าของคุณชำระเงินได้รวดเร็วยิ่งขึ้น

  • การปรับเปลี่ยนตามอุปกรณ์

    ปรับให้เข้ากับขนาดของหน้าจอ (ตั้งแต่เดสก์ท็อปไปจนถึงอุปกรณ์เคลื่อนที่) และเรียกใช้คีย์บอร์ดตัวเลขเมื่อต้องระบุตัวเลข

หมายเลขบัตร
ดด / ปป
CVC
รหัสไปรษณีย์
Visa 5556 04 / 21
Amex 98431 07 / 19
ซื้อด้วย
var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};

เราคือผู้สร้าง คุณคือผู้ออกแบบ

ปรับแต่ง Stripe Elements ด้วยตนเองเพื่อให้พอดีกับหน้าการชำระเงินของคุณได้ โดย Elements จะตัดความจำเป็นในการใช้หน้าการชำระเงินในระบบของเรา แต่จะมีชุดโครงสร้างให้คุณสร้างแบบฟอร์มการชำระเงินของตนเองแทน

ลองใช้เลย แก้ไขออบเจ็กต์รูปแบบในเครื่องมือแก้ไขเพื่อให้ตรงกับรูปแบบของแบบฟอร์ม และใช้ พร็อพเพอร์ตี้ CSS ส่วนใหญ่ ได้

รวบรวมรายละเอียดการชำระเงินอย่างปลอดภัย

Stripe Elements ทำให้การรวบรวมรายละเอียดการชำระเงินมีความปลอดภัยมากขึ้นและช่วยป้องกันไม่ให้ผู้ประสงค์ร้ายขโมยข้อมูลที่ละเอียดอ่อน เราสร้าง iframe ที่ปลอดภัยและแยกข้อมูลที่ละเอียดอ่อนออกจากเว็บไซต์ของคุณ ซึ่งเป็นการขจัดปัญหาการถูกโจมตีทุกระดับขณะที่ยังคงให้คุณควบคุมการดูข้อมูลได้อย่างเต็มที่

การปฏิบัติตามข้อกำหนดของ PCI ที่ง่ายขึ้น

Stripe Elements เป็นวิธีที่ง่ายที่สุดในการติดตามข้อบังคับของ PCI ล่าสุด โดยไม่ปล่อยให้ข้อมูลที่ละเอียดอ่อนเข้าสู่เซิร์ฟเวอร์ คุณจะได้รับรูปแบบการปฏิบัติตามข้อกำหนดของ PCI ที่ง่ายที่สุด ซึ่งช่วยไม่ให้คุณต้องรับการตรวจสอบที่ราคาสูงและมีกำหนดเวลา นอกจากนี้เรายังสร้างเอกสารประกอบแบบสอบถามการประเมินตนเอง (SAQ A) อีกด้วย

โค้ดน้อยลง ปัญหากรณีพิเศษน้อยลง

Stripe Elements มาพร้อมกับการตรวจสอบการป้อนข้อมูล การจัดรูปแบบ การปกป้องข้อมูล การกำหนดรูปแบบ และการจัดการข้อผิดพลาดแบบในตัว ซึ่งหมายความว่าคุณจะใช้เวลาในการจัดการโค้ดการชำระเงินน้อยลง ใช้เวลาในการแก้ไขปัญหากรณีพิเศษน้อยลง และขณะเดียวกันก็สร้างประสบการณ์การชำระเงินที่ดียิ่งขึ้นได้

การจัดรูปแบบ
// Stripe.js v2 formatting helpers
$('input[name="card"]').on('input', () => {
  let brand = Payment.fns.cardType($('input[name="card"]').val());

  $('.credit-card-img').css('opacity', 0.4);
  $(`#${brand}`).css('opacity', 1);
});
การตรวจสอบ
// We only need to manually validate and format for Stripe.js v2.
$.fn.form.settings.rules.customBillingZip = (value) => {
  if (!$("[name='billingZipSame']").is(':checked') && value === '') {
    return false;
  }
  return true;
}

$.fn.form.settings.rules.customCVV = (value) => {
  return window.Stripe.validateCVC(value);
}

$.fn.form.settings.rules.customExp = (value) => {
  if (value.split('/').length === 1) {
    let sliceIndex = value.length % 2 ? 1 : 2;
    let value = `${value.slice(0, sliceIndex)}/${value.slice(sliceIndex, value.length)}`;
  }
  return window.Stripe.validateExpiry(value);
}

$.fn.form.settings.rules.customCardNumber = (value) => {
  return Payment.fns.validateCardNumber($('input[name="card"]').val());
}
return (formData, stripeResponseHandler) => {
  // Set up Stripe payload
  if (formData.exp.split('/').length > 1) {
    let exp = formData.exp.split('/');
  } else {
    let sliceIndex = formData.exp.length % 2 ? 1 : 2;
    let exp = [formData.exp.slice(0, sliceIndex), formData.exp.slice(sliceIndex, formData.exp.length)];
  }
  let payload = {
    number: formData.card,
    cvc: formData.cvv,
    exp_month: parseInt(exp[0]),
    exp_year: parseInt(exp[1])
  }
}
Payload
// Send address if given.
if ($("name='billingZipSame']").is(':checked')) {
  payload.name = formData.name;
  payload.address_line1 = formData.address1;
  if (formData.address2) {
    payload.address_line2 = formData.address2;
  }
  payload.address_city = formData.city;
  payload.address_state = formData.state;
  payload.address_zip = formData.zip;
} else {
  payload.address_zip = formData.billingZip;
}
การจัดการกับข้อผิดพลาด
Stripe.card.createToken(payload, (status, res) => {
  if (res.error) {
    window.scrollTo(0, 0);
    $('.ui.form').form('add errors', [res.error.message]);
  }
  stripeResponseHandler(res);
});
การแปลให้เหมาะกับแต่ละประเทศ
base.card = {
  rules: [{
    type: 'customCardNumber',
    prompt: translations['Enter a valid credit card number']
  }]
};

base.cvc = {
  rules: [{
    type: 'empty',
    prompt: translations['Enter a valid CVV code']
  }]
};

base.exp = {
  rules: [{
    type: 'customExp',
    prompt: translations['Enter a valid expiation date (MM/YYYY)']
  }]
};

base.billingZip = {
  rules: [{
    type: 'customBillingZip',
    prompt: translations['Must enter a billing zip']
  }]
};
Elements
let Stripe = () => {}
let stripeClient = Stripe(key);
let stripeElements = stripeClient.elements()

let stripeCardElement = stripeElements.create('card', {
  style: {
    base: {
      fontSize: '16px',
      fontFamily: 'Lato, "Helvetica Neue", Arial, Helvetica, sans-serif',
      color: 'rgba(0,0,0,.87)'
    },
    invalid: {
      color: '#9F3A38',
      iconColor: '#9F3A38'
    },
    focus: {
      color: 'rgba(0,0,0,.95)'
    }
  }
});

มุ่งเน้นที่การดูแลผลิตภัณฑ์ของคุณและให้เราจัดการส่วนที่เหลือ

การดำเนินธุรกิจออนไลน์เป็นภารกิจที่ยาก Stripe Elements จึงให้คุณใช้ประโยชน์จากการเรียนรู้แบบรวมของ Stripe ในด้านความปลอดภัยและการสร้าง/ปรับประสบการณ์การชำระเงินให้เหมาะสม ให้คุณมีเวลามุ่งเน้นที่การดูแลผลิตภัณฑ์ได้มากขึ้น

  • การรองรับการป้อนข้อมูลอัตโนมัติในเบราว์เซอร์
    ปรับแบบฟอร์มให้ใช้ได้กับการป้อนข้อมูลการชำระเงินอัตโนมัติจากเบราว์เซอร์สำหรับเดสก์ท็อปและอุปกรณ์เคลื่อนที่ของบุคคลที่สามทั้งหมด
  • การรองรับการป้อนข้อมูลอัตโนมัติจากบุคคลที่สาม
    ปรับแบบฟอร์มให้ใช้ได้กับการป้อนข้อมูลการชำระเงินอัตโนมัติจากซอฟต์แวร์ป้อนข้อมูลอัตโนมัติหลักของบุคคลที่สามทั้งหมด (เช่น 1Password, LastPass เป็นต้น)
  • การระบุแบรนด์ของบัตร
    ตรวจสอบการป้อนข้อมูลโดยส่งสัญญาณการตรวจจับแบรนด์บัตรของลูกค้าโดยอัตโนมัติ เพื่อดำเนินการในด้านต่างๆ เช่น การจัดรูปแบบและการตรวจสอบการป้อนข้อมูล (เช่น ยอมรับเลข CVC แบบ 4 หลักเท่านั้นสำหรับบัตร American Express)
  • คำแนะนำเกี่ยวกับรหัส CVC ของบัตรโดยเฉพาะ
    ลดข้อผิดพลาดโดยการแสดงตำแหน่งของ CVC/CVV ให้ลูกค้าเห็น
  • การปกป้องข้อมูล
    ลดข้อผิดพลาดด้วยการปกป้องข้อมูลในตัว
  • การจัดรูปแบบ
    จัดรูปแบบข้อมูลของลูกค้าโดยอัตโนมัติขณะพิมพ์เพื่อให้ตรงตามที่ลูกค้าคาดหวัง
  • ข้อความแสดงข้อผิดพลาดที่แปลให้เหมาะกับแต่ละประเทศ
    ใช้ภาษาเดียวกับลูกค้าด้วยข้อความแสดงข้อผิดพลาดที่มีถึง 15 ภาษา
  • สัญลักษณ์แทนที่แปลให้เหมาะกับแต่ละประเทศ
    แสดงสัญลักษณ์แทนที่แปลให้เหมาะกับแต่ละประเทศแก่ลูกค้า (เช่น ZIP สำหรับสหรัฐอเมริกา และ Postal Code สำหรับสหราชอาณาจักร)
  • การปฏิบัติตามข้อกำหนดของ PCI ที่ง่ายดาย (SAQ A)
    ลดขอบเขต PCI ของคุณให้เล็กลงเนื่องจาก Elements มีสิทธิ์ใช้รูปแบบการตรวจสอบการปฏิบัติตามข้อกำหนดของ PCI ที่ง่ายที่สุด ซึ่งก็คือ SAQ A
  • การรองรับแบบอักษรสำหรับเว็บไซต์
    ใช้แบบอักษรสำหรับเว็บไซต์ตามต้องการ
  • การรองรับภาษาที่อ่านจากขวาไปซ้าย
    รองรับการป้อนข้อมูลจากขวาไปซ้าย เพื่อให้คุณรองรับภาษาที่อ่านจากจากขวาไปซ้ายได้
  • การตรวจสอบข้อมูลแบบเรียลไทม์
    ตรวจสอบข้อมูลแบบเรียลไทม์เพื่อลดข้อผิดพลาดให้น้อยที่สุดและลดอัตราการดำเนินการไม่สำเร็จ
  • Payment Request API
    รองรับวิธีการชำระเงินผ่าน W3C Payment Request API ที่มีเพียง Element เดียว ซึ่งจะค้นหาตัวเลือกการชำระเงินที่ดีที่สุดสำหรับลูกค้าของคุณ
  • Google Pay
    รองรับ Google Pay ด้วย Element เดียว
  • Microsoft Pay
    รองรับ Microsoft Pay ด้วย Element เดียว
  • Apple Pay
    รองรับ Apple Pay ด้วย Element เดียว
  • เป้าหมายการคลิกอัจฉริยะ
    ใช้ช่องป้อนข้อมูลที่ปลอดภัยและเข้ากันได้กับส่วนที่เหลือของแบบฟอร์มเพราะ Elements จะกำหนดเป้าหมายการคลิกโดยอัตโนมัติบนป้ายกำกับและระยะห่างจากขอบ
  • การป้อนข้อมูลที่เหมาะกับอุปกรณ์เคลื่อนที่
    แสดงคีย์บอร์ดบนอุปกรณ์เคลื่อนที่ที่เหมาะสมให้ลูกค้าป้อนข้อมูลได้ง่ายขึ้น (เช่น แสดงคีย์บอร์ดตัวเลขเมื่อลูกค้าต้องป้อนข้อมูลที่เป็นตัวเลขเท่านั้น)
  • การนำทางที่เหมาะกับอุปกรณ์เคลื่อนที่
    ตรวจสอบว่าลูกค้าจะใช้ลูกศรการนำทางแบบเนทีฟบนอุปกรณ์เคลื่อนที่เพื่อไปยังช่องข้อมูลต่างๆ ได้
  • การเข้าถึงสำหรับบุคคลที่มีข้อจำกัด (ARIA)
    ปฏิบัติตามมาตรฐาน W3C ARIA ปรับปรุงการเข้าถึงสำหรับบุคคลที่มีข้อจำกัดเพื่อตอบสนองต่อความต้องการของลูกค้าทุกคน
  • การรวบรวมรหัสไปรษณีย์แบบไดนามิก
    รวบรวมรหัสไปรษณีย์เมื่อจำเป็นเท่านั้นเนื่องจาก Elements จะกำหนดแบบไดนามิกว่าการรวบรวมรหัสไปรณีย์จะเพิ่มความน่าจะเป็นในการทำธุรกรรมสำเร็จหรือลดการฉ้อโกงหรือไม่
  • การสนับสนุนด้านตัวเลข CJK/แบบขนาดกว้าง
    รองรับตัวเลข CJK ซึ่งใช้กันอย่างแพร่หลายในคีย์บอร์ดซอฟต์แวร์ของจีน ญี่ปุ่น และเกาหลี
  • เลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์
    ใช้กับขนาดหน้าจอของลูกค้าได้ เนื่องจาก Elements จะปรับขนาดเลย์เอาต์ให้พอดีกับพื้นที่หน้าจอของลูกค้าโดยอัตโนมัติ ช่วยให้ป้อนข้อมูลบนหน้าจอขนาดเล็กได้ง่ายยิ่งขึ้น
  • การผูก React
    ผสานการทำงาน Elements กับ React ด้วย React Stripe.js
  • รูปแบบที่ปรับแต่งได้อย่างสมบูรณ์
    สร้างแบบฟอร์มตรงตามที่คุณต้องการด้วยการแบ่งเป็นส่วนย่อยและรูปแบบที่ปรับแต่งได้ของ Elements
You’re viewing our website for Brazil, but it looks like you’re in the United States.